[英]Using jQuery AJAX to POST multiple variables to an ASP .NET MVC Controller
[英]How To Post Multiple Objects from View To dot net core 6 MVC Controller using ajax jquery
我试图解决这个问题,但我无法弄清楚我不知道我的代码中有什么问题我想用对象发布这个表单告诉我我在其中缺少什么任何帮助将不胜感激! 这是我的脚本
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; }
}
您正在手动构建一个包含另一个 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!');
}
});
}
这是一个使用 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("");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.