从 Ajax 调用返回 PartialView 后如何更新模型？

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)

这样，每次渲染局部时都会更新隐藏的输入，您将在每次点击时读出新值

从 Ajax 调用返回 PartialView 后如何更新模型？

How to update model after returning PartialView from an Ajax call?

ajax

asp.net-mvc

jquery

partial-views