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

Gur*_*Rao 67 javascript c# ajax asp.net-mvc form-data

如何通过formdata传递整个模型对象并将其转换为控制器中的模型类型?

以下是我尝试过的!

JavaScript部分:

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

然后通过AJAX传递它,它将是一个字符串,如果我检查Request.Form["model"]结果的值将是相同的,那就是它将作为字符串接收并且值将是"[object object]"

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

小智 83

如果您的视图基于模型并且您已在<form>标记内生成控件,则可以将模型序列化为FormData使用

var formdata = new FormData($('form').get(0));
Run Code Online (Sandbox Code Playgroud)

这还包括使用生成的任何文件 <input type="file" name="myImage" .../>

然后用它回发

$.ajax({
  url: '@Url.Action("YourActionName", "YourControllerName")',
  type: 'POST',
  data: formdata,
  processData: false,
  contentType: false,         
});
Run Code Online (Sandbox Code Playgroud)

并在你的控制器

[HttpPost]
public ActionResult YourActionName(YourModelType model)
{
}
Run Code Online (Sandbox Code Playgroud)

或(如果您的模型不包含属性HttpPostedFileBase)

[HttpPost]
public ActionResult YourActionName(YourModelType model, HttpPostedFileBase myImage)
{
}
Run Code Online (Sandbox Code Playgroud)

如果要添加表单中没有的其他信息,可以使用附加信息

formdata.append('someProperty', 'SomeValue');
Run Code Online (Sandbox Code Playgroud)

  • @StephenMuecke非常感谢你.它实际上是关于Ajax调用最困难的问题之一,并且在你的帮助下,它已经解决了:)我想知道它是否也可以使用`Html.BeginForm`和`Ajax.BeginForm`而不是`<form> `?如果是,应该应用哪些更改? (2认同)
  • 是的,使用`Html.BeginForm()`可以包含正常提交正常的文件.对不起,我有点迷路了.这是指哪个问题? (2认同)
  • @LuisGouveia,不,不是'Ajax.BeginForm()`.在任何情况下,`Ajax`方法都已过时(它们甚至不包含在最新版本的MVC中)并使用`$ .ajax()`(或其派生词,如`$ .get()`,`$ .load ()`等给你更多的灵活性. (2认同)
  • @LuisGouveia,是的,这是另一种选择,但为什么不按照答案使用`FormData`?(或者你不需要支持它的老浏览器吗?) (2认同)
  • @MSH,它会上传多个文件(该参数将只是需要`的IEnumerable <HttpPostedFileBase>`如果你有一个`<INPUT TYPE ="文件"多个="多" ... />` (2认同)

小智 19

如果你想使用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) {
    }
})
Run Code Online (Sandbox Code Playgroud)

  • 在服务器端,使用Request.Files获取文件 (2认同)