如何使用 jQuery 获取 MVC3 WebGrid 中的底层数据？答案

【问题标题】：How do you get to the underlying data in an MVC3 WebGrid using jQuery?如何使用 jQuery 获取 MVC3 WebGrid 中的底层数据？
【发布时间】：2013-04-01 23:47:27
【问题描述】：

我有一个简单的 MVC WebGrid。当用户点击一行时，我想根据他点击的行做一些事情。它在 jqGrid 中非常简单，甚至可以使用 jquery 模板，但我想使用 MVC WebGrid 来正确处理它。

我有以下几点：

<h2>OrderList</h2>
@{
    var grid = new WebGrid(canPage: true, rowsPerPage: 20, canSort: true, ajaxUpdateContainerId: "grid_Orders");
    grid.Bind(Model.Orders, rowCount: Model.TotalOrders, autoSortAndPage: true);
    grid.Pager(WebGridPagerModes.All);
    @grid.GetHtml(htmlAttributes: new { id = "grid_Orders" },
        columns: grid.Columns(
            grid.Column(columnName: "OrderNo", header: "Order No"),
            grid.Column(columnName: "TotalAmountDisplay", header: "Amount", format:@<div style="text-align:right"> R @item.TotalAmountDisplay</div>, canSort: false)
    ));
}

和下面的jQuery

$(document).ready(function () {
    $("#grid_Orders").delegate("tbody tr", "hover", function () {
        $(this).css("cursor", "pointer");
        $(this).toggleClass("datahighlight");
    });

    $("#grid_Orders").delegate("tbody tr", "click", function () {
        //How do I get the underlying data in this row???
    });

});

【问题讨论】：

我已经设法将 OrderNo 取出来，但我确信这不是正确的做法 $("#grid_Orders").delegate("tbody tr", "click" , function () { alert($(this).children(':first-child').html()); });

标签： asp.net-mvc asp.net-mvc-3 select webgrid

【解决方案1】：

不幸的是，您需要使用 jQuery 来访问每一行的 html 数据——我知道没有针对它的丰富编程模型（有时也有 MVC 之美哈）

同样的场景也适用于这里： MVC WebGrid - How to programatically get the current page, sort column etc

【讨论】：

希望模板/数据绑定团队在不久的将来能对这个助手有所帮助
如果您使用 json 并绑定到网格，您可以访问您的源数据。不确定 webgrid 是否支持这一点，但 teleriks 支持 - 这是一个 100 倍更好的网格恕我直言并且免费。