使用Ajax和复杂对象的MVC加载部分

Question

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

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

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

Answer 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);
    });
}); 

Answer 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);
    });
});

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