jQuery Datatable行链接

时间:2013-09-03 22:34:05

标签: c# jquery asp.net-mvc-4 jquery-datatables

我已经看了很多其他类似的问题,但是我没有找到一个目标完全相同的问题。我使用ASP.NET MVC4中的ADO.NET实体模型从数据库中获取数据表的行。我希望能够单击任何给定行上的链接,并让该链接将我带到一个完全不同的行数据表,这些行来自完全不同的数据库表,但与我单击的行中的链接相关联。将单击的链接绑定到我想要查看的新数据表的数据位于每行的隐藏列中。我已经发现我可以通过与完整[]数组中的视图模型对应的索引从“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的代码目前没有做任何事情,因为它只是一个练习,以确定如何从一些隐藏的列访问数据。 编辑:虽然我说链接网址没有去任何地方,但我并不是说暗示完整[10]和完整[11]没有得到正确的值。我检查了我的代码生成的URL,确实为每行获取了正确的ID号。我只是不知道如何将它们传回服务器以便在我的控制器中使用。

提前感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

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

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

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