在asp.net核心中的ajax发布后Html不刷新

Question

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

下面是我的示例代码

模型类

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。

步骤

1. 用户单击按钮将模型发布到服务器。
2. 服务器获取模型并为模型附加时间戳（秒）。
3. 服务器返回带有更新模型的局部视图。
4. 在只读部分部分视图将属性写入文本。例如@Model.FirstName、@Model.LastName、@Model.City
5. 部分视图还将属性呈现为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;
        }