使用ajax MVC传递复杂对象

时间:2017-01-23 13:23:52

标签: javascript jquery asp.net-mvc asp.net-ajax

我有一个包含多个部分的视图。我想使用部分视图和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 on View:

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。

2 个答案:

答案 0 :(得分:3)

  

为什么我不能只将绑定模型转换为json

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

“绑定模型”是通过模型从控制器到视图的一种方式;你可能会将术语“绑定模型”与“模型”和“绑定”混合在一起。

如果您发布表单,您将在Action中获取模型(当然基于参数),但如果您通过ajax传递,则需要从表单中获取当前值(如评论中所示) '从输入创建模型的新实例')。

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

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

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

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

答案 1 :(得分:3)

这是因为您传递的数据是根据@Html.Raw(Json.Encode(@Model.userdetails))在页面加载时静态设置的。

您需要使用$form.serialize()之类的内容,或者从页面上的实际字段创建帖子正文。