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

Question

我的控制器是

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 保存数据。我需要避免它。

Answer 1

当我变成

$('#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();
    }

有效

Answer 2

您显示的方法是 GET，但其参数是 Customer SM，这意味着 DefaultModelBinder 将为模型中的每个属性生成一个查询字符串。我猜想（因为此方法 return 是局部视图）您在主视图中使用 @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);，否则 return HTTP 错误代码。然后在成功回调中你可以做类似

的事情

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

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

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

pass a model from partial view to controller by ajax in mvc

asp.net-mvc

asp.net-ajax