使用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呢？

- Animus Miles-Militis

---

“为什么我不能将绑定模型转换为JSON” - 因为您正在使用MVC而不是MVVM。 您的“绑定模型”只能通过模型从控制器向视图单向传输。 您混淆了“绑定模型”、“模型”和“绑定”这些术语。 如果您提交表单，您将获得该模型，但如果您通过ajax传递，则需要从表单中获取当前值（如您的评论“从输入创建模型的新实例”）。 var detailsmodel = JSON.stringify ...在生成视图时设置，并且不会更改。 - freedomn-m

谢谢您的解释。我会努力创建模型的新实例。如果您把您的评论变成答案，我会接受的。再次感谢。 - Animus Miles-Militis

Answer 1

为什么不能直接将绑定模型转换为JSON？

这是因为您正在使用MVC而不是MVVM。

“绑定模型”只能通过模型从控制器向视图单向传递；您可能将“绑定模型”与“模型”和“绑定”混淆了。

如果您提交表单，将在Action中获取模型（当然是基于参数的），但是如果通过ajax传递，则需要从表单中获取当前值（如您的评论“从输入创建模型的新实例”）。

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

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

与其手动添加每个输入，不如使用其他方法。

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

- freedomn-m

Answer 2

这是因为你传递的数据在页面加载时就已经静态设置了，基于@Html.Raw(Json.Encode(@Model.userdetails))。

你需要使用类似于$form.serialize()的方法，或者从页面上实际的字段创建POST请求体。

- Chris Pratt