[翻译] ASP.NET MVC Tip #9 – 创建GridView视图用户控件

Myth丶恋晨 2021-12-10 07:21 229阅读 0赞

原文地址：[http://weblogs.asp.net/stephenwalther/archive/2008/06/25/asp-net-mvc-tip-9-create-a-gridview-view-user-control.aspx][http_weblogs.asp.net_stephenwalther_archive_2008_06_25_asp-net-mvc-tip-9-create-a-gridview-view-user-control.aspx]

摘要：在这个Tip中，Stephen Walther向你展示了如何创建一个ASP.NET MVC视图用户控件，它能接受一组数据库记录，并自动在一个HTML表格中呈现这些记录。使用视图用户控件的好处是，你可以自定义特定列的呈现方式。

在昨天的Tip中，我解释了如何创建新的HTML辅助方法来在HTML表中呈现一组数据库记录。换句话说，我展示了一种在ASP.NET MVC中模拟GridView控件的方法。在今天的Tip中，我将继续介绍第二种模拟GridView的方法。

在今天的Tip中，我将解释如何使用ASP.NET MVC视图用户控件来模拟GridView控件。ASP.NET MVC视图用户控件和ASP.NET用户控件类似，但有一个重要的区别。和ASP.NET MVC视图一样，视图用户控件可以接受强类型的视图数据。我们将创建一个接受IEnumerable视图数据的视图用户控件。

清单1中包含了GridView视图用户控件。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 清单1 - GridView.ascx   
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]<%![dot.gif][]@ Control Language="C\#" AutoEventWireup="true" CodeBehind="GridView.ascx.cs" Inherits="Tip9.Views.Home.GridView" %>  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]<%![dot.gif][]@ Import Namespace="System.Reflection" %>  
![None.gif][]     
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]<%![dot.gif][]\-- Show the Headers \--%>  
![None.gif][]<table class="gridView">  
![None.gif][]<thead>  
![None.gif][]<tr>  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]    <%![dot.gif][] foreach (PropertyInfo prop in this.Columns)  
![ExpandedBlockEnd.gif][]       \{ %>  
![None.gif][]        <th><%= prop.Name %></th>     
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]    <%![dot.gif][] \} %>  
![None.gif][]</tr>  
![None.gif][]</thead>  
![None.gif][]     
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]<%![dot.gif][]\-- Show the Rows \--%>  
![None.gif][]<tbody>  
![None.gif][]     
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]    <%![dot.gif][] foreach (object row in this.Rows)  
![ExpandedBlockEnd.gif][]       \{ %>  
![None.gif][]       <tr class="<%= this.FlipCssClass( "item", "alternatingItem") %>">  
![None.gif][]         
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]       <%![dot.gif][]\-- Show Each Column \--%>  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]       <%![dot.gif][] foreach (PropertyInfo prop in this.Columns)  
![ExpandedBlockEnd.gif][]          \{ %>  
![None.gif][]            <td>  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]            <%![dot.gif][] var typeCode = Type.GetTypeCode(prop.PropertyType); %>  
![None.gif][]     
![None.gif][]     
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]            <%![dot.gif][]\-- String Columns \--%>  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]            <%![dot.gif][] if (typeCode == TypeCode.String)   
![ExpandedBlockEnd.gif][]               \{ %>  
![None.gif][]                 
![None.gif][]                <%= GetColumnValue(row, prop.Name)%>  
![None.gif][]              
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]            <%![dot.gif][] \} %>  
![None.gif][]     
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]            <%![dot.gif][]\-- DateTime Columns \--%>  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]            <%![dot.gif][] if (typeCode == TypeCode.DateTime)   
![ExpandedBlockEnd.gif][]               \{ %>  
![None.gif][]                  
![None.gif][]                <%= GetColumnValue(row, prop.Name, "\{0:D\}")%>  
![None.gif][]              
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]            <%![dot.gif][] \} %>  
![None.gif][]     
![None.gif][]     
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]            <%![dot.gif][]\-- Decimal Columns \--%>  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]            <%![dot.gif][] if (typeCode == TypeCode.Decimal)   
![ExpandedBlockEnd.gif][]               \{ %>  
![None.gif][]                  
![None.gif][]                <%= GetColumnValue(row, prop.Name, "\{0:c\}") %>  
![None.gif][]              
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]            <%![dot.gif][] \} %>  
![None.gif][]     
![None.gif][]     
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]            <%![dot.gif][]\-- Boolean Columns \--%>  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]            <%![dot.gif][] if (typeCode == TypeCode.Boolean)   
![ExpandedBlockEnd.gif][]               \{ %>  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]                <%![dot.gif][] if ((bool)(this.GetColumnValue(row, prop.Name)))  
![ExpandedBlockEnd.gif][]                   \{ %>  
![None.gif][]                   <input type="checkbox" disabled="disabled" checked="checked" />                     
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]                   <%![dot.gif][] \}  
![InBlock.gif][]                   else  
![ExpandedBlockEnd.gif][]                   \{ %>  
![None.gif][]                   <input type="checkbox" disabled="disabled" />  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]                <%![dot.gif][] \} %>  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]            <%![dot.gif][] \} %>  
![None.gif][]              
![None.gif][]              
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]            <%![dot.gif][]\-- Integer Columns \--%>  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]            <%![dot.gif][] if (typeCode == TypeCode.Int32)   
![ExpandedBlockEnd.gif][]               \{ %>  
![None.gif][]                  
![None.gif][]                <%= GetColumnValue(row, prop.Name)%>  
![None.gif][]              
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]            <%![dot.gif][] \} %>  
![None.gif][]              
![None.gif][]            </td>  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]       <%![dot.gif][] \} %>  
![None.gif][]        </tr>  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]    <%![dot.gif][] \} %>  
![None.gif][] </tbody>     
![None.gif][] </table>

注意GridView.ascx文件包含两个循环。第一个循环遍历了表头，第二个循环遍历表的所有行。

一系列的if语句用于显示特殊的列。根据列的类型——Integer、String、Decimal、DateTime、Boolean——会使用不同的模板显示列中的值。例如，对于Boolean列，会显示一个复选框来标识列的值（如图1）。当然，你可以通过修改HTML来自定义这些列的外观。

图1 - GridView  
![clip_image002_thumb.jpg][]

清单2包含了GridView视图用户控件的code-behind文件。注意视图用户控件拥有一个泛型构造器，可以接受IEnumerable视图数据。它还暴露了很多有用的属性和方法。例如，Columns属性返回数据库表中所有列的信息（该信息是通过反射得到的）。Rows属性返回数据表的所有行。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 清单2 - GridView.ascx.cs   
![None.gif][]using System;  
![None.gif][]using System.Collections;  
![None.gif][]using System.Collections.Generic;  
![None.gif][]using System.Linq;  
![None.gif][]using System.Web;  
![None.gif][]using System.Web.UI;  
![None.gif][]using System.Web.Mvc;  
![None.gif][]using System.Reflection;  
![None.gif][]   
![None.gif][]namespace Tip9.Views.Home  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]![dot.gif][]\{  
![InBlock.gif][]    public partial class GridView : System.Web.Mvc.ViewUserControl<IEnumerable>  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]    ![dot.gif][]\{  
![InBlock.gif][]        protected PropertyInfo\[\] Columns  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]        ![dot.gif][]\{  
![InBlock.gif][]            get   
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]            ![dot.gif][]\{  
![InBlock.gif][]                var e = ViewData.Model.GetEnumerator();  
![InBlock.gif][]                e.MoveNext();  
![InBlock.gif][]                object firstRow = e.Current;  
![InBlock.gif][]                if (firstRow == null)  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]                ![dot.gif][]\{  
![InBlock.gif][]                    throw new Exception("No data passed to GridView User Control.");  
![ExpandedSubBlockEnd.gif][]                \}  
![InBlock.gif][]                return firstRow.GetType().GetProperties();  
![ExpandedSubBlockEnd.gif][]            \}  
![ExpandedSubBlockEnd.gif][]        \}  
![InBlock.gif][]   
![InBlock.gif][]        protected IEnumerable Rows  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]        ![dot.gif][]\{  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]            get ![dot.gif][]\{ return ViewData.Model; \}  
![ExpandedSubBlockEnd.gif][]        \}  
![InBlock.gif][]   
![InBlock.gif][]   
![InBlock.gif][]        protected object GetColumnValue(object row, string columnName)  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]        ![dot.gif][]\{  
![InBlock.gif][]            return DataBinder.Eval(row, columnName);  
![ExpandedSubBlockEnd.gif][]        \}  
![InBlock.gif][]   
![InBlock.gif][]        protected object GetColumnValue(object row, string columnName, string format)  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]        ![dot.gif][]\{  
![InBlock.gif][]            return DataBinder.Eval(row, columnName, format);   
![ExpandedSubBlockEnd.gif][]        \}  
![InBlock.gif][]   
![InBlock.gif][]   
![InBlock.gif][]        bool flip = false;  
![InBlock.gif][]        protected string FlipCssClass(string className, string alternativeClassName)  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]        ![dot.gif][]\{  
![InBlock.gif][]            flip = !flip;  
![InBlock.gif][]            return flip ? className : alternativeClassName;  
![ExpandedSubBlockEnd.gif][]        \}  
![InBlock.gif][]   
![ExpandedSubBlockEnd.gif][]    \}  
![ExpandedBlockEnd.gif][]\}

你可以通过调用Html.RenderUserControl()方法在视图页中使用GridView控件。清单3中的视图页呈现了GridView视图用户控件。主页该页面包含一个CSS样式表。该样式表用于自定义GridView所呈现的表格的外观。例如，alternating CSS类用于格式化GridView中的偶数行。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 清单3 - Index.aspx (C\#)   
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]<%![dot.gif][]@ Page Language="C\#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="Tip9.Views.Home.Index" %>  
![None.gif][]   
![None.gif][]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
![None.gif][]   
![None.gif][]<html xmlns="http://www.w3.org/1999/xhtml" >  
![None.gif][]<head runat="server">  
![None.gif][]    <title>Index</title>  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]    <style type="text/css">![dot.gif][]  
![InBlock.gif][]      
![InBlock.gif][]      
![InBlock.gif][]    .gridView   
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]    \{ ![dot.gif][]\}\{   
![InBlock.gif][]        border-collapse: collapse;  
![ExpandedSubBlockEnd.gif][]    \}  
![InBlock.gif][]      
![InBlock.gif][]    .gridView th, .gridView td  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]    \{ ![dot.gif][]\}\{   
![InBlock.gif][]        padding: 5px;  
![ExpandedSubBlockEnd.gif][]    \}  
![InBlock.gif][]      
![InBlock.gif][]    .gridView th  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]    \{ ![dot.gif][]\}\{   
![InBlock.gif][]        border-bottom: double 3px black;  
![ExpandedSubBlockEnd.gif][]    \}  
![InBlock.gif][]      
![InBlock.gif][]    .gridView td  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]    \{ ![dot.gif][]\}\{   
![InBlock.gif][]        border-bottom: solid 1px black;  
![ExpandedSubBlockEnd.gif][]    \}  
![InBlock.gif][]      
![InBlock.gif][]    .alternatingItem  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]    \{ ![dot.gif][]\}\{   
![InBlock.gif][]        background-color: lightgrey;  
![ExpandedSubBlockEnd.gif][]    \}  
![InBlock.gif][]      
![ExpandedBlockEnd.gif][]    </style>  
![None.gif][]</head>  
![None.gif][]<body>  
![None.gif][]    <div>  
![None.gif][]      
![None.gif][]      
![None.gif][]    <%= Html.RenderUserControl("~/Views/Home/GridView.ascx", ViewData.Model) %>  
![None.gif][]      
![None.gif][]    </div>  
![None.gif][]</body>  
![None.gif][]</html>

视图数据由清单4重的控制器提供。该控制器通过一个LINQ to SQL查询取得数据库数据。然而，GridView可以与通过ADO.NET、NHibernate或其他任何方式获取来的数据完美地兼容。GridView需要的是IEnumerable数据。只要你给GridView传递的是IEnumerable，他就会很happy。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 清单4 - HomeController.cs   
![None.gif][]using System;  
![None.gif][]using System.Collections.Generic;  
![None.gif][]using System.Linq;  
![None.gif][]using System.Web;  
![None.gif][]using System.Web.Mvc;  
![None.gif][]using Tip9.Models;  
![None.gif][]   
![None.gif][]namespace Tip9.Controllers  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][]![dot.gif][]\{  
![InBlock.gif][]     public class HomeController : Controller  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]     ![dot.gif][]\{  
![InBlock.gif][]         private MovieDataContext \_db = new MovieDataContext();  
![InBlock.gif][]   
![InBlock.gif][]   
![InBlock.gif][]         public ActionResult Index()  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.gif][]         ![dot.gif][]\{  
![InBlock.gif][]             return View(\_db.Movies);  
![ExpandedSubBlockEnd.gif][]         \}  
![ExpandedSubBlockEnd.gif][]     \}  
![ExpandedBlockEnd.gif][]\}

比起昨天的Tip中的方法，我更喜欢今天这种为数据库数据显示表格的方法。于昨天Tip中介绍的方法不同，今天的方法可以完全自定义GridView的外观。  
  
此处下载源代码：[http://weblogs.asp.net/blogs/stephenwalther/Downloads/Tip9/Tip9.zip][http_weblogs.asp.net_blogs_stephenwalther_Downloads_Tip9_Tip9.zip]。  
  
\-----  
  
广告：[http://regex-lib.net/][http_regex-lib.net]，.NET正则表达式库。

转载于:https://www.cnblogs.com/AndersLiu/archive/2008/07/17/asp-net-mvc-tip-9-create-a-gridview-view-user-control.html

[http_weblogs.asp.net_stephenwalther_archive_2008_06_25_asp-net-mvc-tip-9-create-a-gridview-view-user-control.aspx]: http://weblogs.asp.net/stephenwalther/archive/2008/06/25/asp-net-mvc-tip-9-create-a-gridview-view-user-control.aspx
[ContractedBlock.gif]: https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211210/b6800e49a1d541ca9332062847f8157b.png
[dot.gif]: /images/20211210/1a7e3d73c6d44dad934d5ffe8939ee68.png
[None.gif]: /images/20211210/665eecee5a2c42bd86031cf3137f47d1.png
[ExpandedBlockEnd.gif]: /images/20211210/56dfb1c7b3464dbc81131213e11752bc.png
[InBlock.gif]: /images/20211210/a6ddaf0075184d748195db0a5f2e5e30.png
[clip_image002_thumb.jpg]: /images/20211210/3aa87240d0b64f97b7458ecdef2a31bf.png
[ExpandedSubBlockStart.gif]: https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif
[ContractedSubBlock.gif]: https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif
[ExpandedSubBlockEnd.gif]: https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif
[http_weblogs.asp.net_blogs_stephenwalther_Downloads_Tip9_Tip9.zip]: http://weblogs.asp.net/blogs/stephenwalther/Downloads/Tip9/Tip9.zip
[http_regex-lib.net]: http://regex-lib.net/