视图模型是否通过 Ajax 调用得到更新？

Question

我不明白以下内容：

我的视图上有一个 Ajax.ActionLink，它启动对控制器的 ajax 调用，return 局部视图。在下面的视图中，您可以看到我的 Ajax.ActionLink 方法。

这是我的视图（主页）：

model EDR.ViewModels.ViewModels.PersonListViewModel

@{
    ViewBag.Title = "Person";
}

<div class="row">
    <div class="col-md-12">
        <div id="partialPlaceHolder">
            <h2>@ViewBag.Title</h2>
            @*@using (Html.BeginForm("PersonListOptions", "Person", FormMethod.Post))*@
            @using (Ajax.BeginForm("PersonListOptions", "Person", new AjaxOptions { HttpMethod = "post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "updatedContent" }))
            {
                <p>
                    Search Criteria: @Html.TextBox("SearchString")
                    Search Options: @Html.DropDownList("SearchOptions", ViewBag.SearchOptions as IEnumerable<SelectListItem>)
                    <input type="submit" value="Search" class="btn btn-primary" />
                </p>
            }
            <div id="updatedContent">
                @{ Html.RenderPartial("_PersonListContent"); }
            </div>

            @Ajax.ActionLink("<<", "PersonListPaging", new { pageNumber = Model.PageNumber - 1, sortOption = Model.SortOption }, new AjaxOptions { HttpMethod = "get", InsertionMode = InsertionMode.Replace, UpdateTargetId = "updatedContent" }, new { @class = "btn btn-info" })
            @Ajax.ActionLink(">>", "PersonListPaging", new { pageNumber = Model.PageNumber + 1, sortOption = Model.SortOption }, new AjaxOptions { HttpMethod = "get", InsertionMode = InsertionMode.Replace, UpdateTargetId = "updatedContent" }, new { @class = "btn btn-info" })

        </div>

    </div>
</div>

这是我的局部视图：

@model EDR.ViewModels.ViewModels.PersonListViewModel

@Styles.Render("~/Content/css")

<table class="table table-hover">
    <thead>
        <tr>
            @*<th>@Html.ActionLink("Name", "PersonList", new { sort = "Name", sortDirection = Session["SortDirection"] as String })</th>*@
            <th>@Ajax.ActionLink("Name", "PersonListOptions", new { sort = "Name", sortDirection = Session["SortDirection"] as String }, new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "get", UpdateTargetId = "updatedContent" })</th>
            <th>@Ajax.ActionLink("Date of Birth", "PersonListOptions", new { sort = "BirthDate", sortDirection = Session["SortDirection"] as String }, new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "get", UpdateTargetId = "updatedContent" })</th>
            <th>@Ajax.ActionLink("Last Reg Date", "PersonListOptions", new { sort = "LastActiveRegistrationDate_NDF", sortDirection = Session["SortDirection"] as String }, new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "get", UpdateTargetId = "updatedContent" })</th>
            <th>@Ajax.ActionLink("Last Reg Number", "PersonListOptions", new { sort = "LastActiveRegistrationNo_NDF", sortDirection = Session["SortDirection"] as String }, new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "get", UpdateTargetId = "updatedContent" })</th>
            <th>@Ajax.ActionLink("Reg Count", "PersonListOptions", new { sort = "ActiveRegistrationCount_NDF", sortDirection = Session["SortDirection"] as String }, new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "get", UpdateTargetId = "updatedContent" })</th>
            <th>@Ajax.ActionLink("Gender", "PersonListOptions", new { sort = "GenderDescription_FKD", sortDirection = Session["SortDirection"] as String }, new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "get", UpdateTargetId = "updatedContent" })</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var person in Model.PersonList.Items)
        {
            <tr>
                <td>@person.Name  @person.Surname</td>
                <td>@person.BirthDate</td>
                <td>@person.LastActiveRegistrationDate_Description</td>
                <td>@person.LastActiveRegistrationNo_Description</td>
                <td>@person.ActiveRegistrationCount_Description</td>
                <td>@person.Gender_Description</td>
                <td>@Ajax.ActionLink("Edit/View", "EditPerson", "Person", new { id = person.ID }, new AjaxOptions { UpdateTargetId = "partialPlaceHolder", HttpMethod = "get", InsertionMode = InsertionMode.Replace }, new { @class = "btn btn-info btn-sm" })</td>
            </tr>
        }
    </tbody>
</table>

这是我在控制器上的操作方法：

    public PartialViewResult PersonListPaging(int pageNumber, string sortOption)
    {
        var vm = new PersonListViewModel
        {
            PageNumber = pageNumber == 0 ? 1 : pageNumber,
            SortOption = sortOption
        };
        vm.RefreshList();
        return PartialView("_PersonListContent", vm);
    }

在我上面的控制器操作中，我收到了页码，然后使用当前收到的页码创建了一个新的 VM，并将其传递回视图。当我再次单击该按钮时，与之前一样通过相同的数字，并且视图模型尚未更新到我的操作方法中新创建的 VM。似乎 Model.PageNumber 总是 1，因为我在操作中一直为 pageNumber 获取值 2。

任何帮助将不胜感激

Answer 1

您需要将分页逻辑移动到部分视图中，因为每次转到下一页或上一页时都需要刷新页码。

所以您的主视图应该是这样的。

model EDR.ViewModels.ViewModels.PersonListViewModel

@{
    ViewBag.Title = "Person";
}

<div class="row">
    <div class="col-md-12">
        <div id="partialPlaceHolder">
            <h2>@ViewBag.Title</h2>
            @*@using (Html.BeginForm("PersonListOptions", "Person", FormMethod.Post))*@
            @using (Ajax.BeginForm("PersonListOptions", "Person", new AjaxOptions { HttpMethod = "post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "updatedContent" }))
            {
                <p>
                    Search Criteria: @Html.TextBox("SearchString")
                    Search Options: @Html.DropDownList("SearchOptions", ViewBag.SearchOptions as IEnumerable<SelectListItem>)
                    <input type="submit" value="Search" class="btn btn-primary" />
                </p>
            }
            <div id="updatedContent">
                @{ Html.RenderPartial("_PersonListContent"); }
            </div>
       </div>
    </div>
</div>

分部视图应为：

@model EDR.ViewModels.ViewModels.PersonListViewModel

@Styles.Render("~/Content/css")

<table class="table table-hover">
    <thead>
        <tr>
            @*<th>@Html.ActionLink("Name", "PersonList", new { sort = "Name", sortDirection = Session["SortDirection"] as String })</th>*@
            <th>@Ajax.ActionLink("Name", "PersonListOptions", new { sort = "Name", sortDirection = Session["SortDirection"] as String }, new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "get", UpdateTargetId = "updatedContent" })</th>
            <th>@Ajax.ActionLink("Date of Birth", "PersonListOptions", new { sort = "BirthDate", sortDirection = Session["SortDirection"] as String }, new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "get", UpdateTargetId = "updatedContent" })</th>
            <th>@Ajax.ActionLink("Last Reg Date", "PersonListOptions", new { sort = "LastActiveRegistrationDate_NDF", sortDirection = Session["SortDirection"] as String }, new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "get", UpdateTargetId = "updatedContent" })</th>
            <th>@Ajax.ActionLink("Last Reg Number", "PersonListOptions", new { sort = "LastActiveRegistrationNo_NDF", sortDirection = Session["SortDirection"] as String }, new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "get", UpdateTargetId = "updatedContent" })</th>
            <th>@Ajax.ActionLink("Reg Count", "PersonListOptions", new { sort = "ActiveRegistrationCount_NDF", sortDirection = Session["SortDirection"] as String }, new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "get", UpdateTargetId = "updatedContent" })</th>
            <th>@Ajax.ActionLink("Gender", "PersonListOptions", new { sort = "GenderDescription_FKD", sortDirection = Session["SortDirection"] as String }, new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "get", UpdateTargetId = "updatedContent" })</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var person in Model.PersonList.Items)
        {
            <tr>
                <td>@person.Name  @person.Surname</td>
                <td>@person.BirthDate</td>
                <td>@person.LastActiveRegistrationDate_Description</td>
                <td>@person.LastActiveRegistrationNo_Description</td>
                <td>@person.ActiveRegistrationCount_Description</td>
                <td>@person.Gender_Description</td>
                <td>@Ajax.ActionLink("Edit/View", "EditPerson", "Person", new { id = person.ID }, new AjaxOptions { UpdateTargetId = "partialPlaceHolder", HttpMethod = "get", InsertionMode = InsertionMode.Replace }, new { @class = "btn btn-info btn-sm" })</td>
            </tr>
        }
    </tbody>
</table>

@Ajax.ActionLink("<<", "PersonListPaging", new { pageNumber = Model.PageNumber - 1, sortOption = Model.SortOption }, new AjaxOptions { HttpMethod = "get", InsertionMode = InsertionMode.Replace, UpdateTargetId = "updatedContent" }, new { @class = "btn btn-info" })
@Ajax.ActionLink(">>", "PersonListPaging", new { pageNumber = Model.PageNumber + 1, sortOption = Model.SortOption }, new AjaxOptions { HttpMethod = "get", InsertionMode = InsertionMode.Replace, UpdateTargetId = "updatedContent" }, new { @class = "btn btn-info" })

视图模型是否通过 Ajax 调用得到更新？

Does View Model get updated with Ajax call?

c#

asp.net-mvc

asp.net-mvc-partialview

razor