如何制作WebGrid行可点击

此代码段是一个系列中的一个,显示如何使用jQuery来增强网页WebGrid的行为。此示例显示如何使整个行点击,以便将用户置于显示所选行的详细信息的另一个页面。

此示例使用Northwind数据库的SQL CE 4.0版本。它假设您有一个引用jQuery的布局页面,并包含一个名为的可选部分的renderection调用"script":

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@Page.Title</title>
        <脚本 src="@"//code.jquery.com/jquery.min.js"type="text/javascript"></脚本>
        <link href="@Href("~/styles/site.css")" rel="stylesheet" />
        @RenderSection("脚本", required: false)
    </head>
    <body>
        @RenderBody()
    </body>
</html>

主页页面从数据库获取数据,指定某些列和Ajax更新容器。它还包括jQuery,使行可点击 脚本 section:

@{
    Page.Title = "Clickable Rows";
    var db = Database.Open("Northwind");
    var query = "SELECT * FROM Customers";
    var data = db.Query(query);
    var columns = new[]{"CustomerID", "CompanyName", "ContactName", "Address", "City", "Country", "Phone"};
    var grid = new  WebGrid. (data, ajaxUpdateContainerId: "grid", columnNames: columns);
}
<h1>Clickable Rows</h1>
<div id="grid">
    @grid.GetHtml(    
        tableStyle : "table",
        alternatingRowStyle : "alternate",
        headerStyle : "header"
    )
</div>
@section script{
<脚本 type="text/javascript">
    $(function(){
        $('tbody tr').hover( function(){
            $(this).toggleClass('clickable');
        }).on('click', function(){
            location.href = '/Details/' + $(this).find( 'td:first' ).text();  
        }); 
    });
</脚本>       
}

“的CSS” 可点击 '风格定义如下:

.clickable{
    cursor: pointer;
    background: #ffff99;
}

当用户在数据行中运行它们的光标(悬停)时,当前行变为黄色,并且光标与指向手指形状的手变化。此事件处理程序仅应用于表中的表行 托架 元素,桌子头和脚不受影响。与此同时,该行添加了一个单击事件处理程序,该命令将用户导航到名为详细信息的页面。每行中第一个单元格的文本内容 ( 'td:first' ) 将URL附加到URLDATA。因此,单击第一行将将用户带到详细信息/ alfki。在此示例中检索和显示相关详细信息的代码很简单:

@{
    Page.Title = "Details";
    var db = Database.Open("Northwind");
    var query = "SELECT * FROM Customers WHERE CustomerID = @0";
    var data = db.QuerySingle(query, UrlData[0]);

}
<h1>Details</h1>
@foreach(var item in data.GetDynamicMemberNames()){
    <strong>@item:</strong> @data[item]<br />
}

提供包含源代码的演示 这里 .