如何从Ajax调用返回部分视图后更新模型？

Question

我正在尝试在屏幕上显示一个调用Ajax GET的按钮，在后台执行一些魔术并在完成后更新我的模型。

好消息是，我的后端实际上正在执行魔法并返回局部视图。

坏消息是，我的模型永远不会更新，当我尝试按两次按钮时，模型数据（data: { periodId: model.PeriodId, periodShift: model.PeriodShift }）仍然与我最初运行应用程序时相同。甚至在success电话之后。

Index.cshtml：

@model WorkOverview 
<script>
    $("#demoBtn").on('click', function () {
        var model = @Html.Raw(Json.Encode(Model.CurrentShift));

        $.ajax({
            url: "/WorkOverview/Demo",
            type: "GET",
            data: { periodId: model.PeriodId, periodShift: model.PeriodShift },
            success: function (partialView) {
                $("#demo").load(partialView);
            }
        });
    })
</script>

<button id="demoBtn">Load something</button>
<div id="demo">
    @{Html.Partial("_Test", Model.CurrentShift);}
</div>

_Test.cshtml（局部视图）：

@model DataAccess.Models.Shift

<div>@Model.PeriodId</div>
<div>@Model.PeriodShift</div>

控制器：

public ActionResult Index()
{   
    WorkOverview workOverview = GetWorkOverview();

    return View(workOverview);
}

[HttpGet]
public ActionResult Demo(int periodId, int periodShift)
{
    Shift testShift = new Shift();

    periodId++;
    periodShift++;

    testShift.PeriodId = periodId;
    testShift.PeriodShift = periodShift;

    return PartialView(testShift);
}

WorkOverview.cs（模型）：

public class WorkOverview
{
    ...
    public Shift CurrentShift { get; set; }
    ...
}

Answer 1

这是因为该行：

@Html.Raw(Json.Encode(Model.CurrentShift));

当页面使用页面加载时的值呈现为固定字符串时解析。之后你永远不会再次更新模型。

您需要做的是再次读取页面上的值，如下所示：

$("#demoBtn").on('click', function () {
    $.ajax({
        url: "/WorkOverview/Demo",
        type: "GET",
        data: { periodId:$('#PeriodId').val(), periodShift: $('#PeriodShift').val()  },
        success: function (partialView) {
            $("#demo").load(partialView);
        }
    });
})

并将以下内容添加到_Test.cshtml视图中：

@Html.HiddenFor(x => x.PeriodId)
@Html.HiddenFor(x => x.PeriodShift)

这样，隐藏输入将在每次渲染部分时更新，并且您将在每次单击时读取新值