使用 ajax MVC 传递复杂对象

Question

我有一个包含多个部分的视图。我想使用部分视图和 ajax.

单独更新部分

到目前为止我有这个：

控制器：

[HttpPost]
public PartialViewResult userdetailssettings(UserDetails model)
{ .... }

查看Html:

<div id="userDetailsPartial">
    @Html.Partial("_user_details", Model.userdetails)         
</div>

部分Html：

<div class="form-group">
    <div class="col-md-12">
        @Html.TextBoxFor(x => x.Forename, new { @class = "form-control", placeholder = "Enter your forename" })
        @Html.ValidationMessageFor(x => x.Forename)
    </div>
</div>
<div class="form-group">
    <div class="col-md-12">
        @Html.TextBoxFor(x => x.Surname, new { @class = "form-control", placeholder = "Enter your surname" })
        @Html.ValidationMessageFor(x => x.Surname)
    </div>
</div>

Javascript 视图：

var detailsUrl = "@Url.Action("userdetailssettings", "UserLogin")";
var detailsmodel = JSON.stringify(@Html.Raw(Json.Encode(@Model.userdetails)));

$(document).on('click touchstart', '#saveDetails', function () {      
        $.ajax({
            type: "POST",
            dataType: 'json',
            data: detailsmodel,
            url: detailsUrl,
            contentType: "application/json"
        }).done(function (res) {
            $("#userDetailsPartial").html(res);
            addresssearch();
        });
    });

ajax 正在将模型传递给控制器，但是这些值不是输入的值。它们是从控制器传递来打开视图的原始值。

我试过将局部包裹在标签中，还尝试在局部中添加表单标签。

我也试过输入这段代码：

var detailsUrl = "@Url.Action("userdetailssettings", "UserLogin")";
var detailsmodel = JSON.stringify(@Html.Raw(Json.Encode(@Model.userdetails)));

点击功能内部。

我所做的一切都没有传递来自输入的更新值。

我考虑过根据 javascript 中的输入创建模型的新实例，即

var detailsmodel = [ { Forename: $('#Forename').val(), Surname: $('#Surname').val() } ];

但如果我只是创建 json 为什么我不能将绑定模型转换为 json。

Answer 1

why can I not just convert the bound model to json

这是因为您使用的是 MVC，而不是 MVVM。

"bound model" 是通过模型从控制器到视图的一种方式；您可能将术语 "bound model" 与 "model" 和 "binding" 混用了。

如果您 POST 表单，您将在 Action 中获取模型（当然基于参数），但如果您通过 ajax 传递，则需要获取表单中的当前值（如您的评论 'creating a new instance of the model from the inputs' 中所示）。

您可以通过各种方式生成要通过 AJAX 传递的数据，例如：

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

而不是手动添加每个输入。

var detailsmodel = JSON.stringify...在生成视图时设置，不会使用 MVC 自动更改。

Answer 2

那是因为您传递的数据是在页面加载时根据 @Html.Raw(Json.Encode(@Model.userdetails)).

静态设置的

您需要使用 $form.serialize() 之类的东西，或者以其他方式从页面上的实际字段创建 post 正文。

使用 ajax MVC 传递复杂对象

Pass complex objects using ajax MVC

javascript

asp.net-mvc

jquery

asp.net-ajax