表单提交之List集合

一、表单数据

<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>

 

二、使用jquery提交数据

$('#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;
        });

 

三、后台接收方法

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

更多案例可参考以下地址:https://www.cnblogs.com/tianma3798/p/6638837.html

posted @ 2018-01-19 21:15  骚年丶勿忘初心。  阅读(1756)  评论(0编辑  收藏  举报