c# - 如何使用 Ajax 从部分 View 更新父表

Question

我有一个表格，列出了系统中的类(class)，每个类(class)都有一个“选择”按钮(连续)。当我单击“选择”时，将显示该类(class)的注册用户。类(class)实体具有导航属性 public List<CourseRegistration> CourseRegistrations { get; set; }

我有这个 ViewModel 用于此目的:

public class CourseIndexViewModel
{     
    public int SelectedCourseId { get; set; }

    public List<Course> Courses { get; set; }
}

在注册列表(或注册)下方，我有一个文本框(用于关键字)和按钮，用于搜索用户进行注册。我使用 AJAX 执行 Controller (UserController)(我向其传递关键字)的操作，该操作在数据库中搜索用户，并将结果集传递到部分 View ，该 View 返回一个每行带有注册按钮的用户表。

到目前为止一切正常。现在，我需要在部分 View 内实现注册按钮。但是，我需要类(class)的 ID，该 ID 实际上在主视图中可用(即 SelectedCourseId)。有没有办法从部分 View 访问该值？我是否必须(或者应该)使用隐藏输入来实现此目的？

最大的挑战是在注册新用户后更新主视图中显示的注册列表。我想使用 Ajax 来防止页面刷新。

是否可行并建议使用 Ajax 再次从数据库获取注册并用部分 View 中生成的新表替换主视图中现有的注册表？

更新 这是主要 View :

@model EcholuMvc.Models.CourseIndexViewModel

<table class="table">
    <tr>
        <th></th>
        <th>
            CourseTitle
        </th>           
        <th></th>
    </tr>

    @foreach (var item in Model.Courses)
    {
        <tr @(Model.SelectedCourseId == item.CourseId ? "style=background-color:whitesmoke;" : "style=" )>
            <td>
                @Html.ActionLink("Select", "Index", new { courseId = item.CourseId })
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CourseTitle)
            </td>                
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.CourseId }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.CourseId })
            </td>
        </tr>
        if (Model.SelectedCourseId == item.CourseId)
        {
            <tr>
                <td>
                    <h4>Enrolled users:</h4>
                    <table class="table">
                        <tr>
                            <th>First name</th>
                            <th>Last name</th>                                
                            <th></th>
                        </tr>
                        @if (item.CourseRegistrations.Count > 0)
                        {
                            var registrations = item.CourseRegistrations;
                            foreach (var reg in registrations)
                            {
                                <tr>
                                    <td>
                                        @reg.Member.FirstName
                                    </td>
                                    <td>
                                        @reg.Member.LastName
                                    </td>                                        
                                    <td>
                                        @Html.ActionLink("Delete", "Delete", new { memberid = reg.MemberId, courseid = reg.CourseId })
                                    </td>
                                </tr>
                            }
                        }
                        else
                        {
                            <tr>
                                <td colspan="4">No enrollment!</td>
                            </tr>
                        }

                    </table>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-9">
                                <input id="txt_SearchUser" placeholder="Enter a name.." class="form-control " type="text" />
                            </div>
                            <input id="btn_SubmitUserSearch" class="btn btn-default btn-sm col-sm-3" type="button" value="Search" />
                        </div>
                        <div class="row">
                            <div id="div_UserSearchResults" class="col-sm-12">

                            </div>
                        </div>
                    </div>
                    <script>
                        $("#btn_SubmitUserSearch").click(function () {
                            $.ajax({
                                url: 'Account/SearchUsers',
                                contentType: 'application/html; charset=utf-8',
                                data: { keyword: $('#txt_SearchUser').val() },
                                type: 'GET',
                                dataType: 'html'
                            })
                            .success(function (result) {
                                $('#div_UserSearchResults').html(result);
                            })
                            .error(function (xhr, status) {
                                alert(status);
                            })
                        });
                    </script>
                </td>
            </tr>
        }
    }

</table>

而且，这是部分 View :

@model IEnumerable<EcholuMvc.Models.ApplicationUser>

<table class="table-striped" >
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.FirstName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.LastName)
        </td>
        <td>
            <select id="drp_Role">
                <option value="Student" selected="selected">Student</option>
                <option value="Instructor">Instructor</option>
            </select>
        </td>
        <td>
            <input id="btn_Enroll" data-userid="@item.Id" type="button" />
        </td>
    </tr>
}

</table>

Answer 1

如果您只想在客户端选择所选的 courseId(用于新注册的 ajax 提交或任何其他内容)，您可以向主视图添加一个隐藏字段，并在需要时从中读取它。

@Html.HiddenFor(s=>s.SelectedCourseId)

现在，每当您的 ajax 帖子需要它时，只需读取它的值并使用

var selectedCourseId=$("#s.SelectedCourseId").val();

但是，如果您出于某种原因希望在搜索功能中使用 courseId，您可以将选定的 courseId 作为参数传递给 ajax 调用。将类(class) ID 作为 html 5 数据属性保留到搜索输入字段

<input id="txt_SearchUser" placeholder="Enter a name.."
               data-course="@item.CourseId" class="form-control " type="text" />

现在，当您进行 ajax 调用时，读取该值并发送它。

$("#btn_SubmitUserSearch").click(function () {
     $.ajax({
             url: 'Account/SearchUsers',
             data: { keyword: $('#txt_SearchUser').val(),
                     courseId:$('#txt_SearchUser').data("course") },
             type: 'GET',
             dataType: 'html'
            })
            .success(function (result) {
                $('#div_UserSearchResults').html(result);
            })
            .error(function (xhr, status) {
               alert(status);
           })
});

确保您的 SearchUsers 端点接受这个新参数并将其传递给它将呈现的结果部分 View 。

public ActionResult SearchUsers(string keyword,int courseId)
{
  // to do : Do something with the passed values
  // to do : return something
}

我还假设，根据您的 if 条件，您在页面中仅呈现一个搜索表单，因为您不能有重复的 id。还可以考虑使用 Url.Action 辅助方法来生成操作方法的正确 url，而不是像 this post 中所述对 url 进行硬编码。 .