Asp.Net Mvc表單提交（批量提交）

采用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);
    //其他邏輯
}