ASP.NET MVC问题：修改表单值后模型未更新如何解决？

核心问题分析 #

你遇到的问题有两个关键原因：

1. 直接序列化服务器初始模型：JS里的@Html.Raw(Json.Serialize(@Model))是页面加载时生成的静态JSON，完全不会反映用户在文本框中输入的新值。
2. foreach生成的表单控件不符合绑定规则：用foreach循环生成的TextBoxFor，输出的name属性是item.Property而非Items[0].Property这种带索引的格式，不仅服务器端无法正确绑定更新后的模型，客户端也难以准确收集输入值。

修复步骤 #

1. 修正表单控件生成方式（用for循环替代foreach）

确保表单控件的name属性符合ASP.NET MVC模型绑定的要求，这样不管是客户端收集数据还是服务器接收数据都能正常工作：

@model MyModel

<div class="text-center">      
    <form id="myForm">
        @* 若Items是IEnumerable类型，先转成List *@
        @{ var itemsList = Model.Items.ToList(); }
        @for (int i = 0; i < itemsList.Count; i++)
        {
            @Html.TextBoxFor(m => m.Items[i].Property)
        }

        <input id="btnFormAjaxJson" type="button" value="Save" />
    </form>
</div>

2. 修改JS逻辑，从DOM读取最新输入值

不再依赖服务器生成的静态模型，而是从表单里实时获取用户编辑后的内容，构建成正确的JSON对象：

@section scripts{
    <script>
    $('#btnFormAjaxJson').on('click', function () {
        // 收集所有文本框的输入值，构建Items数组
        var updatedItems = [];
        $('input[name^="Items["]').each(function() {
            updatedItems.push({
                Property: $(this).val()
            });
        });

        // 构建完整的模型JSON（若有其他属性，自行补充）
        var jsonData = {
            Items: updatedItems
        };

        alert(JSON.stringify(jsonData));

        $.ajax({
            url: '/api/Home',
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(jsonData)
        }).done(function (result) {
            alert(result.FullName)
        });
    });
    </script>
}

额外说明 #

• 如果MyModel还有其他顶级属性（比如FullName），可以在jsonData里直接添加对应字段，例如FullName: $('#fullNameInput').val()。
• 也可以使用$('#myForm').serializeArray()快速序列化表单数据再转成JSON对象，但手动构建方式对复杂模型结构的匹配更直观可控。

内容的提问来源于stack exchange，提问作者Harvey Gibbs