在 Razor 视图中更新模型的问题答案

【问题标题】：Issue with Updating Model in Razor View在 Razor 视图中更新模型的问题
【发布时间】：2021-07-23 07:22:07
【问题描述】：

第一次发帖。尝试解决我在 Razor 视图和模型之间看到的问题。我有一个弹出窗口，正在提供部分视图和模型。

 public IActionResult ClickedCovid19Question(int id)
    {
        var existingQ = db.CustomerInfoItems.Find(id);

        var suffix = existingQ.Suffix;

        if (suffix.Length == 2)
            suffix = suffix.Insert(0, "0");

        var salesman = SalesmanHelper.GetSalesmanNum();

        var par = db.Pars.Where(p => p.AccountNo == existingQ.CustNum).Where(p => p.Suffix == suffix)
                    .Where(p => p.SalesmanNumber == salesman).FirstOrDefault();
        var clickedCovid19Model = new ClickedCovidQuestionModel
        { //insert model data here }
        
        clickedCovid19Model.Machines = db.MachinePopulationItems
            .Where(m => m.CustNum == existingQ.CustNum)
            .ToList();

        return View("~/Views/Covid19/_ClickedCovid19Question.cshtml", clickedCovid19Model);
    }

这在第一页渲染时效果很好。我看到数据填充了从剃刀页面上的@model 调用的 UI 元素。当我的用户在此处更新字段并提交时，我使用此功能

function SaveClickedCovid19Question(idJS) {
    C19ParChanged('@Model.Par');
    var jsonJS = SerializeForm("#c19QuestionForm");

    $.ajax({
        url: '/Covid19/SaveClickedCovid19Question',
        type: 'GET',
        data:
        {
            id: idJS,
            json: jsonJS
        },
        success: function (data) {
            Alert(data);
            RefreshLV("CovidQuestions");
            HideWindow("#Covid19Question");
        },
        error: function (data, error, e2) {
            debugger;
        }
    });
}

但是，在弹出窗口关闭并打开另一个弹出窗口后，我们调用相同的 ClickedCovid19Question IActionResult 来再次填充我们的表单。它使用它生成的新模型很好地填充 UI，调试显示它创建了一个包含所有正确数据的新模型。当用户再次提交此表单时出现问题，Razor 视图上的模型似乎认为它仍然是第一次提交的模型。这方面的一个例子是 javascript 函数的第一行。创建 razor 视图时，它具有正确的 @Model.Par 数据，正如我在创建一些元素来显示它时所看到的那样。但是，当尝试使用 @Model.Par 捕获该数据时，它会捕获原始 Model.Par 数据。长话短说，后续弹出窗口不会从第一个弹出窗口覆盖模型数据。我很难过，因为这个系统适用于我们代码库的许多其他领域。我可以解决这个问题，创建隐藏元素来存储我需要在任何请求中发送的数据，但我觉得必须有比这更好的答案。

编辑：下面是我用来测试的示例。下面的视图部分将始终在 id=parID 输入框中显示正确的 par 数据。但是，在第二个弹出窗口和之后的每次，如果我要运行下面的简单 javascript 函数来查找模型保存的数据，它总是会更新到页面曾经呈现的第一个模型的数据，这似乎与其他区域不一致我的代码可以正常工作。

function updateParID() {
        $("#c19QuestionForm").find("#parID").val('@Model.Par');

    }


<input id="parID" type="text" disabled="disabled" value="@Model.Par"/>
        <partial name="Forms/_FormDropDown" model=@(new FormDropDownModel { Name = "Par", Values = Lists.ParStates(), Value = Model.CallsPerYear}) />
        <button type="submit" onclick="RefreshWindow('@Model.ID')">Refresh</button>
        <button type="submit" onclick="updateParID()">Update Par ID</button>

【问题讨论】：

您重新加载视图以获取刷新模型的部分在哪里？ @Model.Par 在第一次提供 javascript 时来自服务器。除非页面在某处刷新，否则它没有得到任何更新。刷新LV？
可以添加RefreshLV功能码吗？
如果您愿意，我仍然可以添加它，但该代码实际上会刷新此弹出窗口来自的 ListView 父项。我有一个包含许多对象的 ListView，onclick 给了我这个代码所在的弹出窗口。如果进入我们数据库的任何其他数据发生更改，RefreshLV 只会更新该父 ListView。我可能是错的，但我的假设是它们与这个问题无关
嗨@wlfreeman93，你能分享你的观点吗？确保SaveClickedCovid19Question(idJS) 中的idJS 是正确的。可以的话，请分享更详细的js代码。
嗨@Rena，我添加了一个编辑，显示了我认为很好地总结了我的问题的部分视图。如果您需要更多我可以添加，整个视图非常大，因为它是一个相当大的表单。

标签： c# model-view-controller razor asp.net-core-mvc razor-pages

【解决方案1】：

@Model.Par（或您在 @Model 中拥有的任何道具）在浏览器中显示任何内容之前呈现。 Razor 页面将呈现您的视图，然后将其传递给浏览器。因此，如果您想使用 ajax 获取数据，您应该手动将从 ajax 接收的数据放入您的 html 控件中。

祝你编码愉快:)

【讨论】：

我可能没有彻底解释清楚，我很抱歉，但我所有的 ajax 实际上拉回的是一个“成功”消息，它会发送到我们在那里覆盖的自定义警报。如果成功，它只会提醒用户是否命中数据库，在数据更改的情况下刷新父 ListView，并隐藏出现问题的弹出窗口。虽然我知道您所说的会起作用，但我只有另一个区域的代码几乎相同，可以正常工作，模型在每个部分视图渲染到新模型时重置，我可以处理数据，这个弹出页面确实不是，

【解决方案2】：

所以，我实际上最终解决了这个问题。我的问题是，尝试绑定来自@Model.Par 的数据或javascript 函数内的任何模型数据将始终使用初始模型进行绑定。对该函数的每次后续调用将始终只使用第一个模型。我忽略的解决方案是首先将模型中的数据作为参数实际发送到函数，而不是尝试将其绑定到 javascript 函数中。

示例：我的编辑有这些行

function updateParID() {
        $("#c19QuestionForm").find("#parID").val('@Model.Par');

    }

<button type="submit" onclick="updateParID()">Update Par ID</button>

当我将捕获该模型的顺序更改为：

function updateParID(parID) {
        $("#c19QuestionForm").find("#parID").val(parID);

    }

<button type="submit" onclick="updateParID('@Model.Par')">Update Par ID</button>

现在可以正确捕获存在的模型数据。我确信 javascript 以这种方式工作是有原因的，但我不知道是否有人可以阐明它。如果这是一个简单的答案，请原谅我，我是网络编程的新手。谢谢大家帮忙！

【讨论】：