您的位置: 首页  >  IT文章  >  Asp.Net Mvc表单提交（批量提交） 采用form表单提交  对于Model类型的，只要Action参数Model的字段名和input的name相同就行 采用ajax提交 对于List类型  对于list类型，解决方法如下： 当然还有一种方法,只需做一下变通，将json数组对象转为json字符串

Asp.Net Mvc表单提交（批量提交） 采用form表单提交  对于Model类型的，只要Action参数Model的字段名和input的name相同就行 采用ajax提交 对于List类型  对于list类型，解决方法如下： 当然还有一种方法,只需做一下变通，将json数组对象转为json字符串

分类: IT文章 • 2022-08-31 22:06:16

Asp.Net Mvc中Action的参数可以自动接收和反序列化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值；
}
$.ajax({
            url: options.url,
            data: person,
            type: options.type,
            dataType: options.dataType,
            success: function (data) {
                if (data.type == "3") {
                    dialogAlert(data.message, -1);
                } else {
                    Loading(false);
                    dialogMsg(data.message, 1);
                    options.success(data);
                    if (options.close == true) {
                        dialogClose();
                    }
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                Loading(false);
                dialogMsg(errorThrown, -1);
            },
            beforeSend: function () {
                Loading(true, options.loading);
            },
            complete: function () {
                Loading(false);
            }
        });

以上介绍的都是单个值提交和一个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);
    //其他逻辑
}

    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值；
}
$.ajax({
            url: options.url,
            data: person,
            type: options.type,
            dataType: options.dataType,
            success: function (data) {
                if (data.type == "3") {
                    dialogAlert(data.message, -1);
                } else {
                    Loading(false);
                    dialogMsg(data.message, 1);
                    options.success(data);
                    if (options.close == true) {
                        dialogClose();
                    }
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                Loading(false);
                dialogMsg(errorThrown, -1);
            },
            beforeSend: function () {
                Loading(true, options.loading);
            },
            complete: function () {
                Loading(false);
            }
        });

以上介绍的都是单个值提交和一个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);
    //其他逻辑
}

相关推荐