如何从 MVC ViewModel 获取输入数据到 ajax post

Question

我正在将 SQL 数据库表中的数据提取到 ASP.NET MVC Razor 视图中，但是我无法将更改的输入数据输入到 Ajax 帖子中，例如：

@model MyViewModel
    <div class="row">
        <div class="col-1">
            @Html.LabelFor(model => model.Id, "Id:", new {})
        </div>
        <div class="col-4">
            @Html.Label(Model.Id.ToString(), new { title = "" })
        </div>
    </div>

    <div class="row">
        <div class="col-1">
            @Html.LabelFor(model => model.Test, "Test:", new { })
        </div>
        <div class="col-9">
            @Html.TextBoxFor(model => model.Test, new { data_bind = "value: Test", @type = "text" })
        </div>
    </div>

    @section scripts {
        <script type="text/javascript">
                $("#save-click").click(function () {
                    var nr = @Model.Id;
                    var postData = @Html.Raw(Json.Encode(@Model));
                    //alert(postData.Test);

                    $.ajax({
                        type: "POST",
                        url: actions.test.createOrUpdate + "?id=" + nr,
                        dataType: "json",
                        traditional: true,
                        data: postData,
                        success: function (response) {
                            if (response.Code == 0) {
                                    else {
                                        window.location.reload(false);
                                    }
                            } else {
                                alert('err');
                            }
                        }
                    });
                });
            });
        </script>
    }

当我加载视图时，一切都正确显示。控制器动作被正确触发，并且 Id（不能更改）也被正确传递。但是，当输入字段发生更改时，不是将更改后的值传递给控制器​​，而是将原始值传递到视图中。

序列化似乎有效，因为警报 (postData.Test) 返回一个值 - 但始终保持不变。

任何帮助将不胜感激。

Answer 1

var postData = @Html.Raw(Json.Encode(@Model));

这条线是罪魁祸首。当 Razor 渲染脚本时，它会将原始/未更改的模型分配给您的 postData 变量。

如果您使用“检查元素”或开发工具检查 postData 的值，您会发现这些值不会更改，因为它们是静态分配的。

您需要在每次点击按钮时检查使用

var postData = $("form").serialize();

并确保将您的输入字段包装在表单标签内。见以下代码：

<form>
   <div class="row">
        <div class="col-1">
            @Html.LabelFor(model => model.Id, "Id:", new {})
        </div>
        <div class="col-4">
            @Html.Label(Model.Id.ToString(), new { title = "" })
        </div>
    </div>

    <div class="row">
        <div class="col-1">
            @Html.LabelFor(model => model.Test, "Test:", new { })
        </div>
        <div class="col-9">
            @Html.TextBoxFor(model => model.Test, new { data_bind = "value: Test", @type = "text" })
        </div>
    </div>
</form>

@section scripts {
     <script type="text/javascript">
             $("#save-click").click(function () {
                 var nr = @Model.Id;

                 // use form.serialize or use the id/class of your form
                 var postData = $("form").serialize();

                 $.ajax({
                     type: "POST",
                     url: actions.test.createOrUpdate + "?id=" + nr,
                     dataType: "json",
                     traditional: true,
                     data: postData,
                     success: function (response) {
                         if (response.Code == 0) {
                                 else {
                                     window.location.reload(false);
                                 }
                         } else {
                             alert('err');
                         }
                     }
                 });
             });
         });
     </script>
}