jquery - 在asp.net core中ajax发布后Html不刷新

Question

我有asp.net core应用程序。我正在使用 jQuery ajax 将数据发布到服务器。当服务器收到模型时，它会使用时间戳更新所有模型属性，并返回包含更新模型的部分 View 。在客户端，jQuery 只是将响应 html 放入 div

中

下面是我的示例代码

模型类

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

    public string LastName { get; set; }

    public string City { get; set; }
}

Controller

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);
        }
    }

索引 View

@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。

步骤

1. 用户单击按钮将模型发布到服务器。
2. 服务器获取模型并为模型附加时间戳(秒)。
3. 服务器返回带有更新模型的部分 View 。
4. 在只读部分部分 View 将属性写入文本。例如@Model.FirstName、@Model.LastName、@Model.City
5. 部分 View 还将属性呈现为输入字段。 (请注意每个输入字段使用不同的语法)

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

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

Answer 1

在 Post 操作方法期间更新模型之前，尝试通过调用 ModelState.Clear() 来清除模型状态。这将使(部分) View 中的输入元素反射(reflect)对模型的任何更改。

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

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