如何使用 Ajax 从局部视图更新父级 table

Question

我有一个 table 列出了系统中的课程，每个课程都有一个 Select 按钮（在一行中）。当我点击 Select 时，会显示该课程的注册用户。课程实体有导航属性 public List<CourseRegistration> CourseRegistrations { get; set; }

我有这个 ViewModel 用于此目的：

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

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

就在注册列表（或注册）下方，我有一个文本框（用于关键字）和用于搜索用户注册的按钮。我使用 AJAX 执行控制器 (UserController)（我向其传递关键字）的操作，该操作在数据库中搜索用户，并将结果集传递给部分视图，其中 returns a table 的用户在每行中有注册按钮。

到目前为止一切正常。现在，我需要在局部视图中实现注册按钮。但是，我需要课程的 ID，它实际上在主视图中可用（即 SelectedCourseId）。有没有办法从局部视图访问该值？为此，我必须（或应该）使用隐藏输入吗？

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

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

更新这是主视图：

@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>

而且，这是局部视图：

@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 调用。将课程 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 端点接受这个新参数并将其传递给它将呈现的结果局部视图。

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

我还假设，根据您的 if 条件，您只会在页面中呈现一个搜索表单，因为您不能有重复的 ID。还可以考虑使用 Url.Action 辅助方法为操作方法生成正确的 url，而不是像 .

中解释的那样对 url 进行硬编码

如何使用 Ajax 从局部视图更新父级 table

How to update parent table from partial view using Ajax

c#

ajax

asp.net-mvc

partial-views