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

Question

我正在从 SQL 数据库 table 中获取数据到 ASP.NET MVC Razor 视图中，但是我无法将更改后的输入数据放入 Ajax post 例如：

@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) returns 一个值 - 但始终不变。

如有任何帮助，我们将不胜感激。

Answer 1

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

这一行是罪魁祸首。当 Razor 呈现脚本时，它会将 original/unchanged 模型分配给您的 postData 变量。

如果您使用 "Inspect Element" 或开发工具检查 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>
}

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

How to get input data from MVC ViewModel into ajax post

ajax

asp.net-mvc

razor-pages