Javascript 如何在MVC中将整套模型追加到formdata中并获取
如何通过formdata传递整套模型对象,并在控制器中将其转换为模型类型 下面是我试过的 JavaScript部分: 然后通过AJAX传递它,它将是一个字符串,如果我检查Request.Form[model]的值,结果将是相同的,即它将作为字符串接收,值将是[object]Javascript 如何在MVC中将整套模型追加到formdata中并获取,javascript,c#,ajax,asp.net-mvc,form-data,Javascript,C#,Ajax,Asp.net Mvc,Form Data,如何通过formdata传递整套模型对象,并在控制器中将其转换为模型类型 下面是我试过的 JavaScript部分: 然后通过AJAX传递它,它将是一个字符串,如果我检查Request.Form[model]的值,结果将是相同的,即它将作为字符串接收,值将是[object] 有没有办法将模型传递给formdata并在控制器中接收它 如果视图基于模型,并且已在标记中生成控件,则可以使用 这还将包括使用生成的任何文件 并使用 $.ajax({ url: '@Url.Action("YourAct
有没有办法将模型传递给formdata并在控制器中接收它 如果视图基于模型,并且已在标记中生成控件,则可以使用 这还将包括使用生成的任何文件 并使用
$.ajax({
url: '@Url.Action("YourActionName", "YourControllerName")',
type: 'POST',
data: formdata,
processData: false,
contentType: false,
});
在你的控制器里
[HttpPost]
public ActionResult YourActionName(YourModelType model)
{
}
或者如果您的模型不包含HttpPostedFileBase的属性
如果要添加表单中没有的其他信息,可以使用
formdata.append('someProperty', 'SomeValue');
如果您想使用Ajax发送表单数据,这是发送表单数据的方法
var formData = new FormData();
//File Upload
var totalFiles = document.getElementById("Iupload").files.length;
for (var i = 0; i < totalFiles; i++) {
var file = document.getElementById("Iupload").files[i];
formData.append("Document", file);
}
formData.append("NameCode", $('#SelecterID').val());
formData.append("AirLineCode", $('#SelecterID').val());
$.ajax({
url: "/Controller/ActionName",
type: "POST",
dataType: "JSON",
data: formData,
contentType: false,
processData: false,
success: function (result) {
}
})
在视图方面,如果您使用的是ajax
$('#button_Id').on('click', function(){
var Datas=JSON.stringify($('form').serialize());
$.ajax({
type: "POST",
contentType: "application/x-www-form-urlencoded; charset=utf-8",
url: '@Url.Action("ActionName","ControllerName")',
data:Datas,
cache: false,
dataType: 'JSON',
async: true,
success: function (data) {
},
});
});
在控制器端
[HttpPost]
public ActionResult ActionName(ModelName modelObj)
{
//Some code here
}
使用纯Javascript,考虑到您已经
<form id="FileUploadForm">
<input id="textInput" type="text" />
<input id="fileInput" type="file" name="fileInput" multiple>
<input type="submit" value="Upload file" />
</form>
参考资料:我刚才不是回答了这个问题吗?我在@StephenMuecke发表了一条评论。这就是我把它贴在这里的原因…@StephenMuecke非常感谢你。这确实是关于Ajax调用的最困难的问题之一,在您的帮助下,它得到了解决:我想知道是否也可以使用Html.BeginForm和Ajax.BeginForm代替?如果是这样,应该应用什么更改?是的,可以使用Html.BeginForm包含具有正常提交模式的文件。对不起,我有点迷路了。这是指哪个问题?@LuisGouveia,不,这不是关于Ajax.BeginForm的。在任何情况下,Ajax方法都是过时的,它们甚至没有包含在最新版本的MVC中,并且使用$.Ajax或其衍生工具,如$.get、$.load等,可以为您提供更大的灵活性。@LuisGouveia,是的,这是另一种选择,但为什么不按照答案使用FormData呢?或者,对于不支持此功能的旧浏览器,您是否需要此功能?@MSH,它将上载多个文件。如果您在服务器端有一个参数,则该参数只需要是IEnumerable。使用Request.files获取文件这里的问题是发送FormData,您已经给出了在post请求中发送普通json数据的答案
$('#button_Id').on('click', function(){
var Datas=JSON.stringify($('form').serialize());
$.ajax({
type: "POST",
contentType: "application/x-www-form-urlencoded; charset=utf-8",
url: '@Url.Action("ActionName","ControllerName")',
data:Datas,
cache: false,
dataType: 'JSON',
async: true,
success: function (data) {
},
});
});
[HttpPost]
public ActionResult ActionName(ModelName modelObj)
{
//Some code here
}
<form id="FileUploadForm">
<input id="textInput" type="text" />
<input id="fileInput" type="file" name="fileInput" multiple>
<input type="submit" value="Upload file" />
</form>
document.getElementById('FileUploadForm').onsubmit = function () {
var formdata = new FormData(); //FormData object
var fileInput = document.getElementById('fileInput');
//Iterating through each files selected in fileInput
for (i = 0; i < fileInput.files.length; i++) {
//Appending each file to FormData object
formdata.append(fileInput.files[i].name, fileInput.files[i]);
}
//text value
formdata.append("textvalue",document.getElementById("textInput").value);
//Creating an XMLHttpRequest and sending
var xhr = new XMLHttpRequest();
xhr.open('POST', '/Home/UploadFiles');
xhr.send(formdata); // se
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
//on success alert response
alert(xhr.responseText);
}
}
return false;
}
[HttpPost]
public ActionResult UploadFiles(YourModelType model, HttpPostedFileBase fileInput)
{
//save data in db
}