View Model是否通過Ajax調用進行更新？

Question

我不理解以下內容：

我的視圖上有一個Ajax.ActionLink，它啟動對控制器的ajax調用，以返回部分視圖。 在下面的視圖中，您可以看到我的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" })