Jquery 数据表和 MVC 表单发布

Question

我在表单中有一个表(项目列表)，允许用户对每一行执行某些操作(例如:删除项目)。当用户单击“提交”时，所有行(数据和操作)都会发送到 Controller 。效果很好。

现在我想向表中添加一些数据表过滤功能。我让它在 View 上运行得很好，但是当我单击“提交”时，它发送的只是空值而不是行数据。我的理解是数据表修改了页面/DOM，并且我需要在提交触发之前将其返回到页面上。我看到一些使用数据表 API 函数 fnGetHiddenNodes() 的建议，但我不确定如何在我的页面上执行此操作。任何帮助将不胜感激。

代码

@model IEnumerable<Admin.Models.MemberFeedback>

@{
    ViewBag.Title = "Member Feedback";
}

@Scripts.Render("~/bundles/datatables")

   @using (Html.BeginForm("MemberFeedback", "Admin", FormMethod.Post, new { @id = "processmemberfeedback" }))
    {
        <table class="dynamicTable table table-striped table-bordered table-primary" id="feedbackemails">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>From</th>
                    <th>Feedback</th>
                    <th>Action</th>
                </tr>
            </thead>

            <tbody>
                @Html.EditorForModel()
            </tbody>
        </table>

        <br />
        <input type="submit" value="Submit" id="submit1" class="btn btn-inverse"/>
    }
</div>

<script>
    /* Table initialisation */
    var oJobListingsTable = $('#feedbackemails').dataTable({
        "sPaginationType": "bootstrap",
        "bLengthChange": false,
        "bFilter": false,
        "oLanguage": {
            "sEmptyTable": "No records found.",
            "sLengthMenu": "Rows: _MENU_",
            "sSearch": "Filter: "
        },
        "iDisplayLength": 10,
    });
</script>

如何让 jquery 数据表表单正确回发到 Controller (并且不发送空值)？

更新 2013 年 8 月 29 日

我遵循 abc123 的建议，我可以让它序列化隐藏字段中的字符串。但是，我仍然无法将其发回我的 Controller 。我尝试过以下方法:

[HttpPost]
public ActionResult MemberFeedback(IEnumerable<MemberFeedback> memberfeedbacks, string dataTableFiltered)
{ ...}

和

[HttpPost]
public ActionResult MemberFeedback(string dataTableFiltered)
{ ...}

但这两个都给了我 dataTableFiltered 的空值。我确信我在这里做了一些愚蠢的事情。

Answer 1

jQuery DataTables 1.9 及更高版本

使用的链接

1. DataTables Example for Form Submission
2. How to get filtered Data
3. JSON2 array serializing

代码:

@model IEnumerable<Admin.Models.MemberFeedback>

@{
    ViewBag.Title = "Member Feedback";
}

@Scripts.Render("~/bundles/datatables")

   @using (Html.BeginForm("MemberFeedback", "Admin", FormMethod.Post, new { @id = "processmemberfeedback" }))
    {
        <table class="dynamicTable table table-striped table-bordered table-primary" id="feedbackemails">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>From</th>
                    <th>Feedback</th>
                    <th>Action</th>
                </tr>
            </thead>

            <tbody>
                @Html.EditorForModel()
            </tbody>
        </table>

        <br />
        <input type="hidden" id="dataTableFiltered">
        <input type="submit" value="Submit" id="submit1" class="btn btn-inverse"/>
    }
</div>

<script type='text/javascript'>
    $('#MemberFeedback').submit( function() {
        $('#dataTableFiltered').val(JSON.stringify(oTable._('tr', {"filter":"applied"})));
    });

    /* Table initialisation */
    var oJobListingsTable = $('#feedbackemails').dataTable({
        "sPaginationType": "bootstrap",
        "bLengthChange": false,
        "bFilter": false,
        "oLanguage": {
            "sEmptyTable": "No records found.",
            "sLengthMenu": "Rows: _MENU_",
            "sSearch": "Filter: "
        },
        "iDisplayLength": 10,
    });
</script>

描述

oTable._('tr', {"filter":"applied"})

从数据表中返回应用了过滤器的数据。

JSON.stringify(oTable._('tr', {"filter":"applied"}))

返回上面的JSON字符串。

$('#dataTableFiltered').val(JSON.stringify(oTable._('tr', {"filter":"applied"})));

将 dataTableFiltered 隐藏输入的值设置为上述内容。

注意:这使用 JSON2.js plugin