Asp.Net Mvc表单提交（批量提交）
Asp.Net Mvc表单提交（批量提交）
yaphetsfang
发布于 2020-07-30 09:51:49
发布于 2020-07-30 09:51:49
Asp.Net Mvc中Action的参数可以自动接收和反序列化form表单的值，
采用form表单提交
name=value类型，只要Action参数的变量名和input的name相同就行
html代码：
<form action="@Url.Action("Test")" method="post">
<div class="form-group">
<input name="name" value="吕布" />
</div>
<input class="btn btn-success" type="submit" value="提交" />
</form>C#代码
public JsonResult Test(string name)
{
return Json(name);
}对于Model类型的，只要Action参数Model的字段名和input的name相同就行
html如下：
<form action="@Url.Action("Test")" method="post">
<div class="form-group">
<input name="name" value="吕布" />
</div>
<div class="form-group">
<input name="sex" value="男" />
</div>
<input class="btn btn-success" type="submit" value="提交" />
</form>C#代码需对应改动：
public class Person
{
public string name;
public string sex;
}
public JsonResult Test(Person person)
{
//相关代码
}采用ajax提交
构造object，object字段和Action参数变量名相同或者和接收参数定义Model类型相同就行
HTML和C#代码如上，js代码改动
var person ={
name = 获取表单的name值；
sex = 获取表单的sex值；以上介绍的都是单个值提交和一个model提交，理解和使用相对比较简单，对于List类型，很多时候不知所错，当然比较笨的方法，可以用js代码写个循环一个一个提交。
数据量小的话，这种方法还能接受，如果大批量插入的话，这种方法对应前后台性能都有大大的影响。下面介绍批量提交：
对于List<string>类型
html代码如下：
<form action="@Url.Action("Test")" method="post">
<div class="form-group">
<input name="name" value="吕布" />
</div>
<div class="form-group">
<input name="name" value="貂蝉" />
</div>
<input class="btn btn-success" type="submit" value="提交" />
</form>C#代码如下
public JsonResult Test(List<string> name)
{
//自己代码
}
对于list<Model>类型，解决方法如下：
html代码如下：
<form action="@Url.Action("Test")" method="post">
<div class="form-group">
<input id="name1" name="name" value="吕布" />
<input id="sex1" name="name" value="男" />
</div>
<div class="form-group">
<input id="name2" name="name" value="貂蝉" />
<input id ="sex2" name="name" value="女" />
</div>
<input class="btn btn-success" type="submit" value="提交" />
</form>js代码如下：
var postArr = [];
var arr = new Array(2);
for (var i = 0; i < arr.length; i++) {
let postData = {
"name":$("#name"+i),
"sex": $("#sex"+i)
postArr.push(postData);
}
$.ajax({
url: ../control名字/Test,
data: {personList：postArr},//这个地方请注意！！！参数和C#代码保持一致
type: options.type,
dataType: options.dataType,
success: function (data) {
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
},
beforeSend: function () {
},
complete: function () {
}
});C#代码如下：
public JsonResult Test(List<Person> personList)
{
//自己代码
}当然还有一种方法,只需做一下变通，将json数组对象转为json字符串
HTML内容同上，js代码修改如下：
var postArr = [];
var arr = new Array(2);
for (var i = 0; i < arr.length; i++) {
let postData = {
"name":$("#name"+i),
"sex": $("#sex"+i)
postArr.push(postData);
}
$.ajax({
url: "../control名字/Test?other"=其他值,
data: {personList：JSON.stringify(postArr)},//这个地方请注意！！！参数和C#代码保持一致
type: options.type,
dataType: options.dataType,
success: function (data) {
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
},
beforeSend: function () {
},
complete: function () {
}
});C#代码如下：
public JsonResult Test(string personList, string other = 其他值)
{
//反序列化处理
List<Student> list = JsonConvert.DeserializeObject<List<Person>>(personList);
//其他逻辑
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-06-27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录