jQuery 数据表行链接

Question

我查看了许多其他与我类似的问题，但我还没有找到一个目标完全相同的问题。我正在使用 ASP.NET MVC4 中的 ADO.NET 实体模型从数据库中获取我的数据表的行。我希望能够单击任何给定行上的链接，并让该链接将我带到完全不同的行数据表，这些数据表来自完全不同的数据库表，但与我单击的行中的链接相关联。将单击的链接绑定到我想查看的新数据表的数据位于每行的隐藏列中。我发现我可以通过与 full[] 数组中的视图模型相对应的索引从“mRender”函数获取该数据。

我对 MVC 和 jQuery 都很熟悉，所以请耐心阅读我的代码。

这是我的看法：

@using System.Web.Optimization

@{
    ViewBag.Title = "ShowPeople";
}

<h2>ShowPeople</h2>
<div id="example_wrapper" class="dataTables_wrapper form-inline" role="grid">
    <table border="0" class="table table-striped table-bordered dataTable" id="people" aria-describedby="example_info">
        <thead>
            <tr role="row">
                <th class="sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1" aria-controls="example">Header1</th>
                <th class="sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1" aria-controls="example">Header2</th>
                <th class="sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1" aria-controls="example">Header3</th>
                <th class="sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1" aria-controls="example">Header4</th>
                <th class="sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1" aria-controls="example">Header5</th>
                <th class="sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1" aria-controls="example">Header6</th>
                <th class="sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1" aria-controls="example">Header7</th>
                <th class="sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1" aria-controls="example">Header8</th>
                <th class="sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1" aria-controls="example">Header9</th>
                <th class="sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1" aria-controls="example">Header10</th>
                <th role="columnheader" tabindex="0" rowspan="1" colspan="1" aria-controls="example">ID_PART1</th>
                <th role="columnheader" tabindex="0" rowspan="1" colspan="1" aria-controls="example">ID_PART2</th>
                <th role="columnheader" tabindex="0" rowspan="1" colspan="1" aria-controls="example">LINKS</th>
            </tr>
        </thead>
        <tbody role="alert" aria-live="polite" aria-relevant="all"></tbody>
    </table>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#people').dataTable({
            "bServerSide": true,
            "sAjaxSource": "DataAjaxHandler",
            "bProcessing": true,
            "sPaginationType": "full_numbers",
            "aoColumns": [
                            { "sName": "data1" },
                            { "sName": "data2" },
                            { "sName": "data3" },
                            { "sName": "data4" },
                            { "sName": "data5" },
                            { "sName": "data6" },
                            { "sName": "data7" },
                            { "sName": "data8" },
                            { "sName": "data9" },
                            { "sName": "data10" },
                            {
                                "sName": "ID_ONE",
                                "bVisible": false,
                                "bSearchable": false,
                                "bSortable": false,
                                "mData": null
                            },
                            {
                                "sName": "ID_TWO",
                                "bVisible": false,
                                "bSearchable": false,
                                "bSortable": false,
                                "mData": null
                            },
                            {
                                "sName": "Links",
                                "bSortable": false,
                                "bSearchable": false,
                                "mData": null,
                                "mRender": function (data, type, full) {
                                    var urlBase = "@Url.Action("ShowData", "Data")";

                                    return "<a href='" + urlBase + "/?id1=" + full[10] + "&id2=" + full[11] + "'>Events</a>";
                                }
                            }
            ]
        });
    });
</script>

这是我的控制器：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Web_UI.Models;

namespace Web_UI.Controllers
{
    public class DataController : Controller
    {
        //
        // GET: /Reports/

        public ActionResult ShowData()
        {
            return View();
        }

        public ActionResult DataAjaxHandler(jQueryDataTableParamModel param)
        {
            //How can I get those IDs?
        }
    }
}

我想弄清楚是否有办法将数据从我的隐藏 ID 列获取到我的控制器的 ajaxhandler 操作方法。我知道如何使用 linq 从我的数据库中获取我需要的数据，但我需要那些 ID 列中的数据，以获取特定行的链接被单击以获取它。有什么办法可以做到这一点吗？

我已经阅读过的许多问题都涉及使用“fnServerParams”函数推送数据，但我并不真正了解它是如何工作的，而且我看到的所有示例看起来都非常静态（因为它们总是推送相同的数据）。提供链接 URL 的代码目前没有做任何事情，因为它只是一个练习，用于弄清楚如何从一些隐藏的列中访问数据。 编辑：虽然我说链接 URL 不会去任何地方，但我并不是要暗示 full[10] 和 full[11] 没有得到正确的值。我检查了我的代码生成的 URL，它们确实为每一行获取了正确的 ID 号。我只是不知道如何将它们传回服务器以在我的控制器中使用。

提前感谢您的帮助。

Answer 1

要将数据发送回控制器，您应该使用 ajax 调用。

$.ajax({
     url: "@(Url.Action("Action", "Controller"))",
     type: "POST",
     cache: false,
     async: true,
     data: { id: 'id' },
     success: function (result) {
         (do something)
     }
});

您可以通过数据传递多个字段作为数据：'data，data1：'data1'等