时间戳

首页 > 解决方案 > 如何从 MVC ViewModel 获取输入数据到 ajax post

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

问题描述

我正在将 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) 返回一个值 - 但始终是未更改的值。

任何帮助，将不胜感激。

标签： ajaxasp.net-mvcrazor-pages

解决方案

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

推荐阅读