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后如何更新模型？

1 个答案: