Question

我在asp.net MVC 3中使用aspx视图引擎。我有一个WebGrid控件，可以正确显示所选记录和页面。单击字段标题也可以对数据进行排序。

问题：

如果我在第二页并点击任何可排序字段，则网格会在排序后重新加载回第一页。我希望将它保留在第二页本身，同时仍然进行排序。
在下面的代码中的其中一个字段“Level”旁边，我想要显示一个图像，鼠标悬停时会显示一个静态DIV图层，其行为类似于描述该字段的工具提示。

似乎没有任何内置属性来执行这两件事。有没有工作？这是我的代码：

var grid = new WebGrid(source: Model.EmployeeList, columnNames: new[] { "Name", "Level", "Department"});

grid.GetHtml(tableStyle: "table-EmpStyle", headerStyle: "tr-header", rowStyle: "webGrid-Row", alternatingRowStyle: "webGrid-alt-Row", previousText: "Previous",nextText: "Next", numericLinksCount: 0, 
     columns: grid.Columns(
     grid.Column("Name", header: "Full Name"),
     grid.Column( "Level", header: "Level"   ),
     grid.Column("Department", header: "Department") ))

感谢您的时间......

Answer 1

您还需要将ajaxUpdateContainerId参数设置为webgrid所在容器的名称。例如：

<div id="updateWebGrid">
    @grid.GetHtml(tableStyle: "table-EmpStyle", headerStyle: "tr-header", rowStyle: "webGrid-Row", alternatingRowStyle: "webGrid-alt-Row", previousText: "Previous",nextText: "Next", numericLinksCount: 0,  ajaxUpdateContainerId: "updateWebGrid"
     columns: grid.Columns( 
         grid.Column("Name", header: "Full Name"), 
         grid.Column( "Level", header: "Level"   ), 
         grid.Column("Department", header: "Department") )) 
</div>

对于第二个问题，您需要使用列的Format属性来注入一些类

例如：

@helper CreateImage(string m)
{
    <div>@m <img src="#" class="someImage"/></div>
}

@grid.GetHtml(columns: new WebGridColumn[]
{
    new WebGridColumn() {ColumnName = "TestTypeId", Header = "Test Type"},
    new WebGridColumn() {ColumnName = "Name", Header = "Name", Format = m => CreateImage(m.Name)}
})

声明此部分后，只要将鼠标悬停在类someImage的img标记上，就应使用jQuery显示div。

$(document).ready(function() {
    $(".someImage").mouseover(function() {
        $("yourDivId_Or_Class_for_Tooltip").show();
    });

    $(".someImage").mouseout(function() {
        $("yourDivId_Or_Class_for_Tooltip").show();
    });
});

就是这样。我没有检查这段代码的每一部分，但这是你应该遵循的逻辑。我写了一篇关于WebGrid的博客文章，因此您可以查看它以供进一步参考：http://apparch.wordpress.com/2012/01/04/webgrid-in-mvc3/

asp.net webgrid标头格式和分页问题

1 个答案: