How do you get to the underlying data in an MVC3 WebGrid using jQuery?

Question

I have a simple MVC WebGrid. When a user clicks on a row, I'd like to do something based on the row he clicked. Its pretty simple in jqGrid and even using jquery templates, but I'd like to get it right using the MVC WebGrid.

I have the following:

<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)
    ));
}

and the following 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???
    });

});

Answer 1

Unfortunately you will need to use jQuery in order to access each row's html data - there is no rich programming model against it that Im aware of (the beauty of MVC at times as well ha)

The same scenario applies here: MVC WebGrid - How to programatically get the current page, sort column etc