提问人：Guruprasad J Rao 提问时间：3/27/2015 最后编辑：RiverGuruprasad J Rao 更新时间：4/13/2021 访问量：56197
如何在 formdata 中附加整套模型并在 MVC 中获取它
How to append whole set of model to formdata and obtain it in MVC
问：
如何通过formdata传递整个集合的模型对象，并在控制器中将其转换为模型类型？
以下是我尝试过的！
JavaScript 部分：
model = {
EventFromDate: fromDate,
EventToDate: toDate,
ImageUrl: imgUrl,
HotNewsDesc: $("#txthtDescription").val().trim(),
};
formdata.append("model",model);
然后通过AJAX传递它，它将是一个字符串，如果我检查结果的值将是相同的，也就是说它将作为字符串接收，并且值将是Request.Form["model"]"[object object]"
有没有办法通过formdata传递模型并在控制器中接收它？
答：
95赞
user3559349
3/27/2015
#1
如果视图基于模型，并且已在标记内生成控件，则可以将模型序列化为 使用<form>FormData
var formdata = new FormData($('form').get(0));
这还将包括使用<input type="file" name="myImage" .../>
并使用
$.ajax({
url: '@Url.Action("YourActionName", "YourControllerName")',
type: 'POST',
data: formdata,
processData: false,
contentType: false,
});
和在您的控制器中
[HttpPost]
public ActionResult YourActionName(YourModelType model)
{
}
或（如果您的模型不包含HttpPostedFileBase)
[HttpPost]
public ActionResult YourActionName(YourModelType model, HttpPostedFileBase myImage)
{
}
如果要添加表单中没有的其他信息，则可以使用
formdata.append('someProperty', 'SomeValue');
评论
2赞
Jack
6/20/2015
@StephenMuecke 非常感谢。这确实是关于Ajax呼叫最困难的问题之一，在您的帮助下，它得到了解决:)我想知道是否也可以用 和 代替？如果是这样，应该应用哪些更改？Html.BeginFormAjax.BeginForm<form>
2赞
6/21/2015
是的，可以包含具有正常提交正常的文件。对不起，我有点迷茫。这指的是哪个问题？Html.BeginForm()
3赞
12/11/2015
@LuisGouveia，不，它没有.无论如何，这些方法已经过时（它们甚至不包含在最新版本的 MVC 中），并且使用（或其衍生物，如 等）为您提供了更大的灵活性。Ajax.BeginForm()Ajax$.ajax()$.get()$.load()
2赞
12/11/2015
@LuisGouveia，是的，这是另一种选择，但为什么不直接按照答案使用呢？（或者对于不支持它的旧浏览器，您是否需要它？FormData
2赞
9/13/2017
@MSH，它将上传多个文件（如果您有一个IEnumerable<HttpPostedFileBase><input type="file" multiple="multiple" ... />
23赞
user3824027
5/2/2016
#2
如果要使用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) {
}
})
评论
2赞
Minh Nguyen
11/15/2016
在服务器端，使用 Request.Files 获取文件
-1赞
Sam
1/16/2019
#3
在视图方面，如果您使用的是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
}
评论
0赞
Deepak paramesh
6/15/2021
这里的问题是发送 FormData，您已经给出了在 post 请求中发送普通 json 数据的答案
0赞
Vikas Lalwani
4/13/2021
#4
使用纯 Javascript，考虑到你有
<form id="FileUploadForm">
<input id="textInput" type="text" />
<input id="fileInput" type="file" name="fileInput" multiple>
<input type="submit" value="Upload file" />
</form>
JS系列
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;
}
在 C# 控制器中，您可以按如下方式获取值
[HttpPost]
public ActionResult UploadFiles(YourModelType model, HttpPostedFileBase fileInput)
{
//save data in db
}
评论