Asp.Net Mvc表單提交之List集合

一、說明

1.Asp.Net Mvc中Action的參數可以自動接收和反序列化form表單的值，

2.對於name=value類型，只要Action參數的變量名和input的name相同就行，不區分大小寫

3.對於Model類型的，只要Action參數Model的字段名和input的name相同就行，不區分大小寫

4.對於List類型，如下

二、List 基礎數據類型提交

Html代碼

<div class="panel panel-default">
    <div class="panel-heading">
       <div class="panel-title"> List 基礎數據類型提交</div>
    </div>
    <div class="panel-body">
        <form action="@Url.Action("TestOne")" 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>
    </div>
</div>

Action接收

public JsonResult TestOne(List<string> name)
{
    return Json(name);
}

參數傳遞：

顯示結果：

三、List<Model>類型提交json數組

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title"> List&lt;Model&gt; 數據類型提交（一）</div>
    </div>
    <div class="panel-body">
        <form action="@Url.Action("TestTwo")" method="post">
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input name="ID" value="1" /></td>
                        <td><input name="Name" value="張三" /></td>
                    </tr>
                    <tr>
                        <td><input name="ID" value="2" /></td>
                        <td><input name="Name" value="李四" /></td>
                    </tr>
                </tbody>
            </table>
            <input type="submit" class="btn btn-success" id="submit1" value="提交" />
        </form>
    </div>
</div>

使用Ajax提交

        $('#submit1').click(function () {
            var form = $(this).parents('form');
            var result = [];
            form.find('tbody tr').each(function () {
                var thisItem = $(this);
                result.push({
                    ID: thisItem.find("input:eq(0)").val(),
                    Name: thisItem.find('input:eq(1)').val()
                })
            });
            $.post(form.attr('action'), {
                stuList: result, //直接提交json數組
            }, function (data) {
                alert(data);
            });
            return false;
        });

后台action接收處理

public JsonResult TestTwo(List<Student> stuList)
{
    return Json(stuList);
}

參數傳遞：

 

四、List<Model>類型提交之json數組字符串

HTML內容同上，

整合json數組，以字符串格式傳遞

$('#submit2').click(function () {
    var form = $(this).parents('form');
    var result = [];
    var data = form.serializeArray();
    for (var i = 0; i < data.length; i++) {
        var item = data[i];
        var stu_i = Math.floor(i / 2); //沒2(對象的屬性個數)個位一組，整合到一個對象中
        if (!result[stu_i])
            result[stu_i] = {}; //初始化數組中的對象
        result[stu_i][item['name']] = item['value'];
    }
    console.info(result);
    $.post(form.attr('action'), {
        stuList: JSON.stringify(result), //提交json字符串，后台自己反序列化
        other: 'test'
    }, function (data) {
        alert(data);
    });
    return false;
});

action后台參數接收處理

public JsonResult TestThree(string stuList, string other = "沒有內容")
{
    //自己反序列化處理，更靈活處理
    List<Student> list = JsonConvert.DeserializeObject<List<Student>>(stuList);
    return Json(new { stu = list, other = other });
}

參數傳遞：

返回結果：

特別說明

提交的Josn數組整合方式1：從頁面dom中獲取

//處理方式1，從頁面獲取值
var result = [];
form.find('tbody tr').each(function () {
    var thisItem = $(this);
    result.push({
        ID: thisItem.find("input:eq(0)").val(),
        Name: thisItem.find('input:eq(1)').val()
    })
});

整合方式2：從表單的序列化數組中獲取

var result = [];
var data = form.serializeArray();
for (var i = 0; i < data.length; i++) {
    var item = data[i];
    var stu_i = Math.floor(i / 2); //沒2(對象的屬性個數)個位一組，整合到一個對象中
    if (!result[stu_i])
        result[stu_i] = {}; //初始化數組中的對象
    result[stu_i][item['name']] = item['value'];
}
console.info(result);