如何将整个模型集附加到表单数据中,并在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传递模型并在控制器中接收它吗
如果您的视图基于模型,并且您已经在<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');
如果您想使用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) {
}
})
使用纯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
}
参考:在MVC 中使用jQuery Ajax或Javascript上传文件
在视图端,如果您使用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
}
相关文章:
- 从服务器获取数据并在选择控件中使用ng选项无法显示选项
- web浏览器中的离线应用程序存储数据并在之后上传
- 如何过滤对象内部深度堆叠的数据(并在之后编辑删除它)
- 自动修改JSON数据并在构建时保存
- 我如何在AJAX中循环数据并在其中存储特定值's各自的tr td
- 检索parse.com数据并在数据表中显示
- 如何接受用户数据并在提交后以图形形式返回
- 如何从<窗体>中获取数据并在单独的
- Facebook是否可以获取用户的数据并在iframe中填充表单
- 需要在 PHP 脚本中使用用户的本地时间来发送电子邮件 - 我如何从 JS 中获取数据并在我的 php 中使用它
- 使用 WebClient 类返回图像数据并在标记中呈现图像
- 计算数据并在从服务器端获取所有数据后呈现它们;$(window).load() 没有运气
- D3.js - 从 CSV 文件加载数据并在函数调用外部使用它
- 我如何使用从谷歌分析检索到的数据并在谷歌图表中显示
- Mongoose创建测试数据并在没有数据库连接的情况下进行填充
- 在jQuery中解析JSON数据并在文本字段中显示
- 如何从sql查询中检索数据并在我的javascript函数中使用它
- 表,以验证手动插入的数据并在末尾给出消息
- 转换Geojson嵌套数组数据并在jquery中将其打印为列表
- Javascript-发送编码二进制(zip)文件数据并在c#中对其进行解码