分页或排序WebGrid时如何维护滚动位置

此代码段是一个系列中的一个,显示如何使用jQuery来增强网页WebGrid的行为。此示例显示如何在分页或排序WebGrid时在页面上维护滚动位置。

WebGrid.的默认行为的问题是当您启用了Ajax分页和排序时,当用户单击页面或排序链接时,用户将被带到页面顶部。这是因为使用了排序和分页链接 HREF. 的价值 #,有效地意味着"this page",并且总是将用户带到页面的顶部,因为没有片段标识符 # 符号。虽然在没有目的地时不想进入有关使用锚点的优点的争论,但在这种情况下,解决方案是提供一个片段标识符,并且使用jQuery相对容易地完成这一点。片段标识符被添加到之后的URL # 标志,应该与具有匹配的元素对应 名称 attribute value.

与本系列中的其他片段一样,此示例使用Northwind数据库的SQL CE 4.0版本。它假定您有一个引用jQuery的布局页面,并包括对名为“脚本”的可选部分的renderection调用:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />

        <title>@Page.Title</title>
        <script src="@Href("~/scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>

        <link HREF.="@Href("~/styles/site.css")" rel="stylesheet" />
        @RenderSection("script", required: false)
    </head>

    <body>
        @RenderBody()
    </body>
</html>

示例页面从数据库获取数据,指定某些列和Ajax更新容器。它包括运行30次的循环,每次添加空段落,该段落将WebGrid按到大多数屏幕底部下方。这会强制滚动条,以便可以测试解决方案的有效性。就在WebGrid本身之前,已添加命名锚点。它已经给出了一个标识符"grid-anchor"。页面的最后一部分是jQuery。在代码之后审查了这一点:

@{
    Page.Title = "Maintain scroll position";
    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>Maintain Scroll Position</h1>
@for(var i = 1; i <= 30; i++){
    <p>&nbsp;</p>
}
<a 名称="网格锚"></a>
<div id="grid">
    @grid.GetHtml(    
        tableStyle : "table",
        alternatingRowStyle : "alternate",
        headerStyle : "header"
    )
</div>
@section script{
<script type="text/javascript">
    $(function(){
        $('th a, tfoot a').live('click', function(){
            $(this).attr('href', '#grid-anchor');
        });
    });
</script>    
}

排序和分页链接出现在 thTfoot. 网格的元素。 jquery瞄准锚元素 thTfoot. 只有,并改变他们的 HREF. 值要包括片段标识符 - 网格锚,这确保了当点击链路时,将用户驶向指示的锚位置,从而保持滚动位置。单击事件处理程序绑定到链接 居住 命令,可确保所有将来的链接都受到影响 - 当在Ajax部分更新期间替换目标元素时,必不可少。

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