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

Posted 2023-02-22

【中文标题】如何将整套模型附加到formdata并在MVC中获取

【英文标题】：How to append whole set of model to formdata and obtain it in MVC

【发布时间】：2015-05-31 08:45:57

【问题描述】：

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

以下是我尝试过的！

JavaScript 部分：

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

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

有没有办法通过formdata传递model并在controller中接收？

【问题讨论】：

我不是刚刚回答了这个here吗？

我已删除评论@StephenMuecke。这就是为什么我把它贴在这里...

【参考方案1】：

使用纯 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

参考：File Uploading using jQuery Ajax or Javascript in MVC

【参考方案2】：

在视图方面，如果您使用的是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) 

            ,
        );
    );

在Controller端，

 [HttpPost]
 public ActionResult ActionName(ModelName modelObj)
 
 //Some code here
 

【讨论】：

这里的问题是发送FormData，你已经给出了在post请求中发送普通json数据的答案

【参考方案3】：

如果你想使用Ajax发送Form数据。这是发送的方式

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获取文件

【参考方案4】：

如果您的视图是基于模型的，并且您已经在<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');

【讨论】：

@StephenMuecke 非常感谢。这确实是关于 Ajax 调用的最困难的问题之一，在你的帮助下，它得到了解决:) 我想知道 html.BeginForm 和 Ajax.BeginForm 是否也可以代替 <form>？如果是，应该应用哪些更改？

是的，Html.BeginForm() 可以包含正常提交正常的文件。对不起，我有点迷路了。这是指哪个问题？

@LuisGouveia，不，不是Ajax.BeginForm()。在任何情况下，Ajax 方法都已过时（它们甚至不包含在最新版本的 MVC 中）并且使用$.ajax()（或其派生类，例如$.get()、$.load() 等为您提供了更大的灵活性。跨度>

@LuisGouveia，是的，这是另一种选择，但为什么不按照答案使用FormData？ （或者对于不支持它的旧浏览器，您是否需要这个？）

@MSH，它将上传多个文件（如果您有<input type="file" multiple="multiple" ... />，则参数只需为IEnumerable<HttpPostedFileBase>