Html 在 asp.net 核心 ajax post 之后不刷新

Question

我有 asp.net 核心应用程序。我正在使用 jQuery ajax 到 post 数据到服务器。当服务器收到模型时，它会使用时间戳更新所有模型属性，并使用更新后的模型 returns 部分视图。在客户端 jQuery 只需将响应 html 放入 div

下面是我的示例代码

型号Class

public class MyModel
{
    public string FirstName { get; set; }

    public string LastName { get; set; }

    public string City { get; set; }
}

控制器

public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View(new MyModel { FirstName = "Foo", LastName = "Bar", City = "Dallas" });
        }        

        public IActionResult PostData(MyModel model)
        {
            model.FirstName = model.FirstName + string.Format(" {0:ss}", DateTime.Now);
            model.LastName = model.LastName + string.Format(" {0:ss}", DateTime.Now);
            model.City = model.City + string.Format(" {0:ss}", DateTime.Now);

            return PartialView("_MyPartialView", model);
        }
    }

索引视图

@model MyModel   
<div id="mydetail">
    @Html.Partial("_MyPartialView.cshtml", Model)
</div>

_MyPartialView

@model MyModel

<form id="myform">
    <div class="readonly">
        This is readonly section. This section gets refreshed after POST
        @Model.FirstName
        @Model.LastName
        @Model.City
    </div>
    <div class="row">
        <div class="col-lg-3">
            <input asp-for="FirstName" />
        </div>
        <div class="col-lg-3">            
            @Html.TextBoxFor(x=>x.LastName) 
        </div>
        <div class="col-lg-3">
            <input id="City" name="City" type="text" value="@Model.City" /> 
        </div>
    </div>
    @DateTime.Now.ToString()
</form>

javascript

$(function () {
    var form = $("#myform");
    $('#btn').click(function () {
        $.ajax({
            cache: false,
            type: 'POST',
            url: '/home/postdata',
            data: form.serialize(),
            dataType: 'html',            
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
        })
        .done(function (response, textStatus, jqXHR) {
            $('#mydetail').html(response);
        })
        .fail(function (response, textStatus, errorThrown) {
            alert(response);
        })
    })
})

MyModel 有 3 个属性 FirstName、LastName 和 City。出于演示目的，我使用 3 种不同的方式将这些属性呈现为 TextBox。

步骤

用户单击按钮将 post 模型发送到服务器。
服务器获取模型并为模型附加时间戳（秒）。
服务器 returns 更新模型的局部视图。
在只读部分部分视图中将属性写入文本。例如@Model.FirstName、@Model.LastName、@Model.City
分部视图还将属性呈现为 input 字段。（注意每个输入字段使用不同的语法）

问题
成功 POST 后，当部分视图被渲染时，只有 readonly 部分和 City 属性被刷新，我看到更新的数据。但是 FirstName 和 LastName 不会刷新。为什么使用 Tag-Helper 和 Html Helper 的 input 字段没有刷新？

这是 ASP.NET Core 中的错误吗？

Answer 1

尝试在 Post 操作方法更新模型之前调用 ModelState.Clear() 来清除模型状态。这将使您的（部分）视图中的输入元素反映对模型的任何更改。

我认为您的情况与我在 3 年前发布的 SO 问题中遇到的相同，这里是 the answer I got

ModelState.Clear() is required to display back your model object

Answer 2

Frank 的回答解决了这个问题，使用 ModelState.Clear(); 将使示例按预期工作。

查看源代码后，我认为这有效的原因如下：HtmlHelper 使用 DefaultHtmlGenerator 生成输入标签。它使用 GenerateInput 方法，该方法首先尝试从 ModelState 获取值，如果未找到值 [在 ModelState.Clear(); 之后就是这种情况]，则它使用当前模型值。

下面来自源的相关代码：

case InputType.Text:
    default:
        var attributeValue = (string)GetModelStateValue(viewContext, fullName, typeof(string));
        if (attributeValue == null)
        {
            attributeValue = useViewData ? EvalString(viewContext, expression, format) : valueParameter;
        }

Html 在 asp.net 核心 ajax post 之后不刷新

Html does not refresh after ajax post in asp.net core

jquery

asp.net-core

asp.net-core-mvc

coreclr

tag-helpers