MVC 使用 ajax 和复杂对象加载部分答案

【问题标题】：MVC load partial using ajax and complex objectMVC 使用 ajax 和复杂对象加载部分
【发布时间】：2016-01-11 23:03:24
【问题描述】：

我有一个加载部分数据视图的主视图。这是初始加载时使用的代码：

<div id="customerdetailsDIV" class="well main-well clearfix">
    @Html.Partial("_customer_details", Model.customerviewmodel)
</div>

这是部分视图以下是示例，但所有数据均已绑定。该脚本将模型和 url 传递给我的 common.js 文件：

@model myproject.Models.customerdetails

<div class="col-md-5ths plain-well">
    <label>Title:</label>
    @Html.TextBoxFor(x => x.title, new { @class = "form-control" })
</div>

// etc //

<div class="col-md-5ths plain-well">
    <div id="customerSaveBtn" class="btn btn-success btn-block">Save</div>
</div>

<script>
    var url = "@Url.Action("savecustomerdetails", "Home")";
    var model = @Html.Raw(Json.Encode(Model));
</script>

以下是我的 common.js 中的 javascript：

$("#customerSaveBtn").on("click", function () {
    $.ajax({
        type: "POST",
        data: JSON.stringify(model),
        url: url,
        contentType: "application/json"
    }).done(function (res) {
        $("#customerdetailsDIV").html(res);
    });
});

这回发给我的控制器：

[HttpPost]
public PartialViewResult savecustomerdetails([System.Web.Http.FromBody] customerdetails model)
    {
        mycontext db = new mycontext();
        CustomerDetail item = db.CustomerDetails.Where(x => x.CustomerID == model.customerID).FirstOrDefault();
        item.FirstName = model.forename;
        // etc //            
        db.SaveChanges();
        return PartialView("_customer_details", model);
    }

我遇到的问题是，如果我在控制器中设置断点，则传递的模型不包含视图中新键入的数据，而只包含初始数据，因此绑定似乎不起作用。

第二个问题是，如果我在控制器中手动设置一个文本字段来测试部分不会用新数据刷新。

编辑：

我已经根据答案更改了我的代码

<div id="customerdetailsDIV" class="well main-well clearfix">
    @using(Html.BeginForm()) {
        @Html.Partial("_customer_details", Model.customerviewmodel)
    }  
</div>

$("#customerSaveBtn").on("click", function () {        
    $.ajax({
        type: "POST",
        data: $("#customerdetailsDIV > form").serialize(),
        url: url,
        contentType: "application/json"
    }).done(function (res) {
        $("#customerdetailsDIV").html(res);
    });
});

我的断点根本没有被击中。是因为我的控制器期待我的模型吗？

【问题讨论】：

显然 - var model = @Html.Raw(Json.Encode(Model)); 您只使用输入模型，但没有在客户端更新它。所以 POST 将发送初始模型。在将其发布到服务器之前，您必须使用 JQuery 在客户端更新 model。
对于您的第二个问题，您在哪里手动设置它，我在控制器代码中没有看到您将 model 设置为任何属性的任何位置。

标签： javascript ajax asp.net-mvc partial-views

【解决方案1】：

只需在 View 中创建表单并将带有部分助手的 div 放入其中

@using(Html.BeginForm()) {
   <div id="customerdetailsDIV" class="well main-well clearfix">
       @Html.Partial("_customer_details", Model.customerviewmodel)
   </div>
}

然后序列化这个表单并使用 ajax 发布。

$("#customerSaveBtn").on("click", function () {
    $.ajax({
        type: "POST",
        data: $("#customerdetailsDIV").closest("form").serialize(),
        url: url,
        contentType: "application/json"
    }).done(function (res) {
        $("#customerdetailsDIV").html(res);
    });
});

【讨论】：

我想最好把form 放在div 里面。然后选择器将是$("#customerdetailsDIV > form").serialize()。它更干净。

【解决方案2】：

在努力让表格发挥作用后，我最终参加了@ramiramilu 建议的一轮

$("#customerSaveBtn").on("click", function () {
    var model = {
        customerID: $('#customerID').val(),
        title: $('#title').val(),
        forename: $('#forename').val(),
        surname: $('#surname').val(),
        address1: $('#address1').val(),
        address2: $('#address2').val(),
        address3: $('#address3').val(),
        address4: $('#address4').val(),
        postcode: $('#postcode').val(),
        email: $('#email').val(),
        contact: $('#contact').val()
    };

    $.ajax({
        type: "POST",
        data: JSON.stringify(model),
        url: url,
        contentType: "application/json"
    }).done(function (res) {
        $("#customerdetailsDIV").html(res);
    });
});

这解决了原帖中的两个问题。

【讨论】：