通过 ajax 在 mvc 中将模型从局部视图传递到控制器答案

【问题标题】：pass a model from partial view to controller by ajax in mvc通过 ajax 在 mvc 中将模型从局部视图传递到控制器
【发布时间】：2015-08-22 06:27:59
【问题描述】：

我的控制器是

public ActionResult AddCustomer(Customer SM)
{
    DataAccessLayer.ConClass obj = new DataAccessLayer.ConClass();
    obj.SaveCustumerDetails(SM);
    ModelState.Clear(); 
    return PartialView();
}

我的模型是

public class Customer
{
    [DisplayFormat(ConvertEmptyStringToNull = false)]
    public string Customer_id { get; set; }
    [DisplayFormat(ConvertEmptyStringToNull = false)]
    public string Customer_Contact_Person { get; set; }
    [DisplayFormat(ConvertEmptyStringToNull = false)]
    public string Customer_Contact_Person_Designation { get; set; }
    [DisplayFormat(ConvertEmptyStringToNull = false)]
      public string Customer_name { get; set; }
    [DisplayFormat(ConvertEmptyStringToNull = false)]
    public string Customer_Address1 { get; set; }
    [DisplayFormat(ConvertEmptyStringToNull = false)]
    public string Customer_Address2 { get; set; }
    [DisplayFormat(ConvertEmptyStringToNull = false)]
    public string Customer_City { get; set; }
    [DisplayFormat(ConvertEmptyStringToNull = false)]
    public string Customer_State { get; set; }
    [DisplayFormat(ConvertEmptyStringToNull = false)]
    public string Customer_Country { get; set; }
    [DisplayFormat(ConvertEmptyStringToNull = false)]
    public string Customer_PIN { get; set; }
    [DisplayFormat(ConvertEmptyStringToNull = false)]
    public string Customer_Phone1 { get; set; }
    [DisplayFormat(ConvertEmptyStringToNull = false)]
    public string Customer_Phone2 { get; set; }
    [DisplayFormat(ConvertEmptyStringToNull = false)]
    public string Customer_Email1 { get; set; }
    [DisplayFormat(ConvertEmptyStringToNull = false)]
    public string Customer_Email2 { get; set; }
}

Savecutomer 是按钮的名称。我的部分视图代码是

<script>
  $('#SaveCustomer').click(
    function () {
      $.ajax({
        type: "POST",
        url: '@Url.Action("AddCustomer", "Customer")',
        data: ' $("myform").serialize() ,
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        complete: function (data) {
      },
    });
  });
</script>

当我点击savecustomer 按钮时，我需要保存客户详细信息，我不想在 url 上看到详细信息。通过这种方式 url 保存数据。我需要避免它。

【问题讨论】：

不清楚是什么问题，这里的问题是什么，能不能具体点？
你的方法需要标记[HttpPost]。如果您显示的是您的 GET 方法，则删除 Customer SM 参数（永远不要将模型传递给 GET 方法）并删除 obj.SaveCustumerDetails(SM); 和 ModelState.Clear();（您不应该在 GET 方法中保存数据）和添加 POST 方法。
另外，你不应该有 contentType: 'application/json; charset=utf-8', 并且你指定了 dataType: 'json', 但是你显示的控制器方法返回 html 这也会引发错误。然后你不会对返回的数据做任何事情。非常不清楚你真正想要做什么。
@MaxBrodin 如何通过 ajax 将整个模型传递给我的控制器
@StephenMuecke 你能否建议对`数据进行一些编辑：'$("myform").serialize(),`

标签： asp.net-mvc asp.net-ajax

【解决方案1】：

您显示的方法是 GET，但它的参数是 Customer SM，这意味着 DefaultModelBinder 将为模型中的每个属性生成一个查询字符串。我猜（因为此方法返回部分视图）您在主视图中使用@Html.Action() 或ajax 调用它以将表单加载到视图中。

首先你需要方法，一个GET和一个POST

public ActionResult AddCustomer()
{
  // Initialize a new instance of your model and pass it to the view
  Customer model = new Customer(); 
  return PartialView(model);
}
[HttpPost]
public JsonResult AddCustomer(Customer SM)
{
  DataAccessLayer.ConClass obj = new DataAccessLayer.ConClass();
  obj.SaveCustumerDetails(SM);
  return Json(true); // see notes below
}

请注意，如果您在部分中包含@Html.AntiForgeryToken，那么您还需要添加[ValidateAntiForgeryToken]

接下来，从局部视图中删除脚本并将其添加到主视图中（脚本永远不应位于局部视图中）。然后把脚本改成

$('#SaveCustomer').click(function() {
  $.ajax({
    type: "POST",
    url: '@Url.Action("AddCustomer", "Customer")',
    data: $('#myform').serialize(), // change this to include the #
    dataType: 'json',
    success: function (data) {
      // do something?
    },
  });
});

请注意，这假设您的表单具有id="myform"。另请注意contentType 已被删除（除非您对数据进行字符串化，否则不需要）。也可以简化为

$.post('@Url.Action("AddCustomer", "Customer")', $('#myform').serialize(), function(data) {
  // do something
});

旁注：不清楚你想在成功回调中做什么。如果保存成功，我建议在 POST 方法中使用 return Json(true);，否则返回 HTTP 错误代码。然后在成功回调中你可能会做类似的事情

if (data) {
  // the save was successful so reset existing form controls
  $('#myform').get(0).reset();
  // maybe display a message indicating success
}

同样，您可以通过显示一条指示无法保存客户的消息来处理错误。

【讨论】：

【解决方案2】：

当我改成

$('#SaveCustomer').click(

   function () {
   $.ajax({
           type: "POST",
           url: '@Url.Action("AddCustomer", "Customer")',
           data: "{'Customer_Name' :        '" + $('#Customer_Name').val() + "' ," +
                  " 'Customer_Adress1' :      '" + $('#Customer_Address1').val() + "'}" ,


           contentType: 'application/json; charset=utf-8',
           dataType: 'json'

       });
   })

并将控制器更改为

       public ActionResult AddCustomer(string Customer_Name, string Customer_Address1)
    {

        DataAccessLayer.ConClass obj = new DataAccessLayer.ConClass();
        obj.SaveCustomerDetails( Customer_Name,  Customer_Address1);
        ModelState.Clear();
        return PartialView();
    }

效果不错

【讨论】：