ASP.NET MVC 中的 WebGrid – 6 个重要技巧

Shivprasad koirala

4.75/5 (20投票s)

2014年11月18日

CPOL

5分钟阅读

110120

在本文中，我们将尝试了解 MVC WebGrid 以及 6 个有助于您有效使用 WebGrid 的重要技巧。

ASP.NET MVC 中的 WebGrid – 6 个重要技巧

引言

当 Webform 开发者迁移到 MVC 时，会发现一些他们喜欢的东西不见了。他们看不到后端代码、视图状态、页面生命周期、服务器控件等。您可以参阅这篇文章，了解 ASP.NET Webform 开发者迁移到 MVC 时会错过什么。

但是，当许多开发者看到他们喜欢的服务器控件消失时，会感到心碎和震惊。其中最令人怀念的是 GridView / DataGrid 控件。作为一名 ASP.NET Webform 开发者，我非常理解将 GridView 控件拖放到表单上，进行绑定并在几秒钟内看到输出的乐趣，这简直是一种瘾。

因此，在 MVC 中，我们有“WebGrid”类来解救。我再说一遍，它是一个类，所以它无法与旧 GridView 和 DataGrid 的可视化 RAD 相比，但如果您想节省时间，它比使用原始 HTML 表格要好得多。如果您仍在想为什么 MVC 没有可视化 RAD 支持，请阅读这篇文章 ASP.NET Webform VS ASP.NET MVC。

在本文中，我们将尝试了解 MVC WebGrid 以及 6 个有助于您有效使用 WebGrid 的重要技巧。

MVC WebGrid 简单示例

“WebGrid”从集合中显示数据，该集合可以是强类型列表、泛型等。因此，让我们先加载一个包含强类型对象的简单集合，并使用“WebGrid”类将这些对象显示在网格中。

在下面的代码中，您可以看到我们已将一个简单的“List”集合与名为“Custs”的变量中的“Customer”对象加载。

@{
    List<Customer> Custs = new List<Customer>();
    Custs.Add(new Customer { CustomerCode = "1001", CustomerName = "Shiv" });
    Custs.Add(new Customer { CustomerCode = "1002", CustomerName = "Shiv1" });

为了在 MVC 视图中显示集合，我们创建“WebGrid”对象，并通过“WebGrid”类的构造函数传递“Customer”集合。“Custs”是客户列表的变量集合。

第二步是调用“GetHtml()”方法以 HTML 表格格式显示网格。

@{
    WebGrid obj = new WebGrid(Custs);
}
@obj.GetHtml();

一旦您使用 MVC 运行上述视图，您应该会看到如下所示的显示。很不错，对吧？:-)。

技巧 1：- MVC WebGrid 中的排序

当您谈论在网格中显示数据时，我们首先要了解如何进行排序。在 MVC 的“WebGrid”中，默认情况下会根据列名进行排序。如果您仔细查看列名，会发现它们带有超链接，可以帮助您进行排序。

如果您想禁用超链接排序，可以将“canSort”设置为“false”，如下面的代码片段所示。

WebGrid obj = new WebGrid(Custs, canSort:false);

如果您想应用默认排序，可以在构造函数中将列名传递给“defaultsort”，如下面的代码所示。

WebGrid obj = new WebGrid(Custs,defaultSort:"CustomerCode");

技巧 2：- MVC WebGrid 中的分页

要使用 MVC WebGrid 进行分页，可以指定“rowsPerPage”值，如下面的代码所示。

WebGrid obj = new WebGrid(Custs,rowsPerPage:3);

分页显示为超链接，如下面的图所示。

技巧 3：- 显示必要的 MVC WebGrid 列

很多时候，您的集合中有 10 列，但您只想显示 5 列。为了显示必要的列，您可以使用“ColumnNames”参数并指定列名。

WebGrid obj = new WebGrid(Custs,columnNames: new[] { "CustomerCode"});

在下面的显示中，您可以看到只显示了“CustomerCode”，而“CustomerName”被隐藏了。

技巧 4：- 为 MVC WebGrid 提供自定义列名

很多时候，集合中指定的列名对用户来说不友好。例如，我们有一个名为“CCode”的列，但在网格中显示时，我们希望将其显示为“CustomerCode”。

为此，我们需要在“GetHtml”函数中的“columns”参数中传递列名，如下所示。在下面的代码片段中，我们希望将“CustomerCode”显示为“Code”，将“CustomerName”显示为“Name”。

@{
    WebGrid obj = new WebGrid(Custs);
}

@obj.GetHtml(columns: obj.Columns(
 obj.Column("CustomerCode", header: "Code"),
     obj.Column("CustomerName", header: "Name")
 ));

如果您运行上述视图，您将看到如下所示的显示。

技巧 5：- 为 MVC WebGrid 添加样式

开发者最常要求的功能之一是更改网格的外观和感觉。在 MVC WebGrid 中，我们可以创建一个 CSS 样式并将其应用于 WebGrid。

您可以将样式应用于 WebGrid 的所有部分。换句话说，您可以将 CSS 样式应用于表页脚、页眉、行等。

所以，您可以像往常一样创建 CSS。您可以在下面的代码片段中看到，我们创建了一个名为“webGrid”的样式，具有特定的边距、边框和宽度等。

<style type="text/css">
    .webGrid {
        margin: 4px;
        border-collapse: collapse;
        width: 500px;
        background-color: #B4CFC3;
    }

上面的样式现在可以通过在“GetHtml”函数中设置“tableStyle”来应用于网格。

@{
    WebGrid obj = new WebGrid(Custs);
}
@obj.GetHtml(tableStyle:"webGrid");

如果您运行上述代码，您将在浏览器中看到您的表格具有以下样式。

技巧 6：- 实现 WebGrid 的 Ajax

Ajax 现在是所有网站的默认需求。如果您想在 WebGrid 中启用 Ajax，您需要执行以下操作。第一步是将“GetHtml”的调用包装在 HTML div 标签中，如以下代码所示。第二步是在“ajaxUpdateContainerId”参数中提供 div 标签的 ID 值。

<div id="div1">
    @{
        WebGrid obj = new WebGrid(Custs, ajaxUpdateContainerId: "div1");
    }
    @obj.GetHtml();
</div>

如果您是 ASP.NET MVC 的新手，可以从视频“2 天内学会 MVC，即 16 小时”开始。

ASP.NET MVC 中的 WebGrid – 6 个重要技巧

目录