如何使用ajax jquery将多个对象从视图发布到dot net core 6 MVC控制器答案

【问题标题】：How To Post Multiple Objects from View To dot net core 6 MVC Controller using ajax jquery如何使用ajax jquery将多个对象从视图发布到dot net core 6 MVC控制器
【发布时间】：2022-06-10 20:59:16
【问题描述】：

我试图解决这个问题，但我无法弄清楚我不知道我的代码中有什么问题我想发布这个带有对象的表单告诉我我在其中缺少什么任何帮助将不胜感激！这是我的脚本

 function getInvoiceObject() 
      {
    var Invoice = new Object();
    //var form = $('#Invoice-Form')[0];
    //const formData = new FormData(form);
    Invoice.InvoiceId = $('#InvoiceId').val();
    Invoice.InvoiceTemplateId = $('#InvoiceTemplateId').val();
    Invoice.InvoiceDueAfterDays = $('#InvoiceDueAfterDays').val();
    Invoice.DefulatTerms = $('#DefulatTerms').val();
    Invoice.DefaultFooter = $('#DefaultFooter').val();
    return Invoice;
      }
      
      function getEmailObject() 
      {
          var Email = new Object();
          Email.EmailId = $('#EmailId').val();
          Email.InvoiceEmailBody = $('#InvoiceEmailBody').val();
          Email.OverDueInvoiceEmailBody = $('#OverDueInvoiceEmailBody').val();
         return Email;
      }
      

      function SaveAllSettings()
      {
debugger;
          var InvoicesVM = getInvoiceObject();
          var EmailVM    = getEmailObject();
         // var AllSettings = [];
         // AllSettings.push(Invoices);
         // AllSettings.push(Email);
           var AllSettings = {InvoicesVM:InvoicesVM, EmailVM: EmailVM};
           //console.log(postData);
          $.ajax({
                //dataType: 'json',
               // async: true,
                type: 'POST',
                url: "/Settings/SaveAllSettings",              
                data: '{ "AllSettings":' + JSON.stringify(AllSettings) + '}', 
                processData: false,
                traditional: true,
                cache: false,
                contentType: "application/json; charset=utf-8",  
                dataType: "json", 
                success: function (response) {
                  toastr.success('Saved SuccessFully!');
                },
                error: function (msg) {
                  //toastr.error('Cannot Save the Data!');
                }
            })

      }

这是我的控制器

           
        [HttpPost]
       public JsonResult SaveAllSettings(SettingsVM AllSettings)
        {
           
            return Json("");
        }

这是我的 ViewModel 类

 public class SettingsVM
    {
        public InvoiceSettingsVM InvoicesVM { get; set; }
        public EmailSettingsVM EmailVM { get; set; }
    }

【问题讨论】：

标签： c# jquery .net-core asp.net-core-mvc asp.net-ajax

【解决方案1】：

您正在手动构建一个包含另一个 JSON 字符串的 JSON 字符串，这是问题的根本原因。要解决此问题，请为 $.ajax() 调用的 data 属性提供一个普通的 JS 对象。

data: { 
  InvoicesVM: InvoicesVM, 
  EmailVM: EmailVM
},

这是一个完整的示例，其中包含一些其他语法/良好实践改进：

let getInvoiceObject = () => ({
  invoiceId = $('#InvoiceId').val(),
  invoiceTemplateId = $('#InvoiceTemplateId').val(),
  invoiceDueAfterDays = $('#InvoiceDueAfterDays').val(),
  defulatTerms = $('#DefulatTerms').val(), // typo in property name/element id here...?
  defaultFooter = $('#DefaultFooter').val(),
})

let getEmailObject = () => ({
  emailId = $('#EmailId').val(),
  invoiceEmailBody = $('#InvoiceEmailBody').val(),
  overDueInvoiceEmailBody = $('#OverDueInvoiceEmailBody').val(),
})

let saveAllSettings = () => {
  $.ajax({
    type: 'POST',
    url: "/Settings/SaveAllSettings",
    dataType: "json",
    data: { 
      invoicesVM: getInvoiceObject(), 
      emailVM: getEmailObject()
    }, 
    traditional: true, // probably not needed here
    cache: false,
    success: function(response) {
      toastr.success('Saved SuccessFully!');
    },
    error: function(msg) {
      //toastr.error('Cannot Save the Data!');
    }
  });
}

【讨论】：

将实施并回复您提前谢谢
非常感谢您的帮助，但它仍然没有在控制器中绑定 emailvm 和 invoicevm
根对象allSettings不需要在json中命名； data: { InvoicesVM: InvoicesVM, EmailVM: EmailVM } 但你需要[FromBody]。
@JeremyLakeman 感谢您指出这一点 - 不知道我是怎么错过的！

【解决方案2】：

这是一个使用 ajax 将 json 类型数据传递给操作的工作演示：

js:

function getInvoiceObject() 
      {
    var Invoice = new Object();
    //var form = $('#Invoice-Form')[0];
    //const formData = new FormData(form);
    Invoice.InvoiceId = $('#InvoiceId').val();
    Invoice.InvoiceTemplateId = $('#InvoiceTemplateId').val();
    Invoice.InvoiceDueAfterDays = $('#InvoiceDueAfterDays').val();
    Invoice.DefulatTerms = $('#DefulatTerms').val();
    Invoice.DefaultFooter = $('#DefaultFooter').val();
    return Invoice;
      }
      
      function getEmailObject() 
      {
          var Email = new Object();
          Email.EmailId = $('#EmailId').val();
          Email.InvoiceEmailBody = $('#InvoiceEmailBody').val();
          Email.OverDueInvoiceEmailBody = $('#OverDueInvoiceEmailBody').val();
         return Email;
      }
      

      function SaveAllSettings()
      {
debugger;
          var InvoicesVM = getInvoiceObject();
          var EmailVM    = getEmailObject();
         // var AllSettings = [];
         // AllSettings.push(Invoices);
         // AllSettings.push(Email);
           var AllSettings = {InvoicesVM:InvoicesVM, EmailVM: EmailVM};
           //console.log(postData);
          $.ajax({
                //dataType: 'json',
               // async: true,
                type: 'POST',
                url: "/Settings/SaveAllSettings",              
                data: JSON.stringify(AllSettings),
                contentType: "application/json; charset=utf-8",  
                dataType: "json", 
                success: function (response) {
                  toastr.success('Saved SuccessFully!');
                },
                error: function (msg) {
                  //toastr.error('Cannot Save the Data!');
                }
            })

      }

行动：

[HttpPost]
       public JsonResult SaveAllSettings([FromBody]SettingsVM AllSettings)
        {
           
            return Json("");
        }

【讨论】：

【解决方案3】：

https://www.c-sharpcorner.com/article/passing-multiple-models-using-ajax-in-asp-net-mvc-step-by-step/

这个链接对于这个问题很有用

【讨论】：