Javascript 如何在MVC中将整套模型追加到formdata中并获取

如何通过formdata传递整套模型对象，并在控制器中将其转换为模型类型

下面是我试过的

JavaScript部分：

model = {
             EventFromDate: fromDate,
             EventToDate: toDate,
             ImageUrl: imgUrl,
             HotNewsDesc: $("#txthtDescription").val().trim(),
        };
formdata.append("model",model);

然后通过AJAX传递它，它将是一个字符串，如果我检查

Request.Form[“model”]

的值，结果将是相同的，即它将作为字符串接收，值将是

“[对象]”

---

有没有办法通过formdata传递模型并在控制器中接收它？

如果您的视图基于模型，并且您已经在

标记中生成了控件，那么您可以使用

var formdata = new FormData($('form').get(0));

这还包括使用

并使用

$.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) {
    }
})

var formData=new formData（）；
//文件上传
var totalFiles=document.getElementById（“Iupload”）.files.length；
对于（var i=0；i

在视图端，如果您使用的是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（））

etc为您提供了更大的灵活性。@LuisGouveia，是的，这是另一个选项，但为什么不按照答案使用

FormData

。@MSH，它将上载多个文件（参数只需是

IEnumerable

，如果服务器端有

，则使用Request.files获取文件

<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
}