Как обновить модель после возврата PartialView из вызова 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 view:

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

Таким образом, скрытый ввод будет обновляться каждый раз при визуализации части, и вы будете читать новые значения при каждом клике