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


75

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

以下是我尝试过的!

JavaScript部分:

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

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

有什么方法可以通过formdata传递模型并在控制器中接收模型?


我不是只在这里回答吗?

我已发表评论@StephenMuecke。这就是为什么我在这里发布...
Guruprasad J Rao 2015年

Answers:


89

如果你的观点是基于模型,并已产生内部控制<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
@StephenMuecke非常感谢。关于Ajax调用,这确实是最困难的问题之一,在您的帮助下,它已经解决了:)我想知道使用Html.BeginFormAjax.BeginForm代替它是否还可能<form>?如果是这样,应该进行哪些更改?
2015年

2
是的,可以Html.BeginForm()包含正常提交的文件。抱歉,我有点迷茫。这是指哪个问题?

2
@LuisGouveia,不,不Ajax.BeginForm()。在任何情况下的Ajax方法已经过时(他们甚至没有包括在MVC的最新版本),并使用$.ajax()(或其衍生物,如$.get()$.load()等会给你更大的灵活性。

2
@LuisGouveia,是的,这是另一种选择,但是为什么不FormData按照答案使用?(或者您是否需要不支持它的旧版浏览器?)

2
@MSH,它将上传多个文件(IEnumerable<HttpPostedFileBase>如果您有一个<input type="file" multiple="multiple" ... />

21

如果要使用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) {
    }
})

在服务器端,使用Request.Files
Minh Nguyen

0

在视图方面,如果您正在使用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
 }
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.