搜索文章:

首页  |  Java技术  |  Asp.net  |  Asp编程  |  VC/C++  |  Delphi  |  VB编程

ASP.NET 2.0中Gridview控件高级技巧

天极软件专题专区精选     到天极软件“读编交流区”畅所欲言
Google专区 POPO专区 QQ专区 QQ挂机 了解Web2.0
Flash MX 视频教程 Photoshop视频教程 网页设计视频教程 照片处理数字暗房
PPT动画演示教程 Excel动画教程集 Word动画演示教程 Windows Vista专区
特洛伊木马专区 黑客知识教程专区 防火墙应用专区 注册表应用专区
Windows API开发专区 网络编程专区 VB数据库编程专区 图像处理与多媒体编程

  ASP.NET 2.0中,新增加的gridview控件的确十分强大,弥补了在asp.net 1.1中,使用datagrid控件时的不足之处。因为在asp.net 1.1中,在使用datagrid时,很多情况下依然要编写大量的代码,十分不方便,而且有时需要很多技巧。而在asp.net 2.0中,很多情况下,使用gridview控件的话,甚至只需要拖拉控件,设置属性就可以了,不需要编写任何代码。在《使用ASP.NET 2.0中的GridView控件》和《ASP.NET2.0中用Gridview控件操作数据》中,已经对gridview控件做了一系列介绍,如果之前没有了解过gridview的读者,请先阅读这两篇文章。在本文中,将继续深入介绍gridview的一些使用技巧。

  一 格式化gridview

  和asp.net 1.1一样,gridview可以很方便地定制其样式,比如css,颜色等。要定制gridview的格式,十分简单,只需要鼠标右击gridview,在弹出的菜单中选择"AUTO FORMAT",则可以选择gridview的样式,内置了许多样式,如下图:


  如果你要对gridview中每一列自定义格式,则只需要点击gridview右上角的"smart tag"智能标记,在弹出的菜单中,选择"edit columns",会弹出如下图的窗体,这样就可以对每列进行详细的设置了:
  

  比如,如果要某一列设置为特殊格式,如要将unitprice设置为货币格式,可以在unitprice列的DataFormatString属性中设置为{0:C},程序代码如下:

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
 <form id="form1" runat="server">
 <div>
  <asp:SqlDataSource ID="productsDataSource"
    Runat="server"
    SelectCommand="SELECT [ProductID], [ProductName],
    [QuantityPerUnit], [UnitPrice], [UnitsInStock] FROM
    [Products]"
    ConnectionString="<%$ ConnectionStrings:NWConnectionString %>"
     DataSourceMode="DataReader">
  </asp:SqlDataSource>
  <asp:GridView ID="productGridView" Runat="server"
     DataSourceID="productsDataSource"
     DataKeyNames="ProductID" AutoGenerateColumns="False"
     BorderWidth="1px" BackColor="#DEBA84"
     CellPadding="3" CellSpacing="2" BorderStyle="None"
     BorderColor="#DEBA84">
  <FooterStyle ForeColor="#8C4510" BackColor="#F7DFB5"></FooterStyle>
  <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center"></PagerStyle>
  <HeaderStyle ForeColor="White" Font-Bold="True" BackColor="#A55129"></HeaderStyle>
  <Columns>
  <asp:BoundField ReadOnly="True" HeaderText="ID" InsertVisible="False" DataField="ProductID"
SortExpression="ProductID">
  <ItemStyle HorizontalAlign="Center"></ItemStyle>
 </asp:BoundField>
 <asp:BoundField HeaderText="Name" DataField="ProductName" SortExpression="ProductName">
 </asp:BoundField>
 <asp:BoundField HeaderText="Qty/Unit"
    DataField="QuantityPerUnit"
    SortExpression="QuantityPerUnit"></asp:BoundField>
 <asp:BoundField HeaderText="Price/Unit"
    DataField="UnitPrice" SortExpression="UnitPrice"
    DataFormatString="{0:c}">
   <ItemStyle HorizontalAlign="Right"></ItemStyle>
 </asp:BoundField>
 <asp:BoundField HeaderText="Units In Stock" DataField="UnitsInStock"
    SortExpression="UnitsInStock"
    DataFormatString="{0:d}">
  <ItemStyle HorizontalAlign="Right"></ItemStyle>
 </asp:BoundField>
</Columns>
<SelectedRowStyle ForeColor="White" Font-Bold="True"
  BackColor="#738A9C"></SelectedRowStyle>
  <RowStyle ForeColor="#8C4510" BackColor="#FFF7E7"></RowStyle>
  </asp:GridView>
 </div>
 </form>
</body>
</html>

  程序运行后结果如下:


  而有的时候,我们可能要根据需要,对gridview中的数据进行特殊的显示,比如当某样商品库存为0时,要求gridview中以不同颜色进行显示,这时,可以按如下的方法进行:

  首先,gridview提供了rowdatabound事件,该事件在gridview中每行被创建并且绑定到datasource控件后被触发,因此,我们可以利用该事件去检查库存是否为0,如果为0的话,将所在行的北京颜色设置为黄色,代码如下:

public void productsGridView_RowDataBound(object sender,
GridViewRowEventArgs e)
{
 if (e.Row.RowType == DataControlRowType.DataRow)
 {
  int unitsInStock = Convert.ToInt32(DataBinder.Eval(e.Row.DataItem, "UnitsInStock"));
  if (unitsInStock == 0)
   e.Row.BackColor = Color.Yellow;
 }
}

  首先,该事件首先检查,当前的行是否属于datarow类型的行,因为象gridview中的headerrow,footerrow等行,并不包含实际的数据,因此,我们不需要使用headerrow和footerrow,而为了取得库存unitesinstock的内容,通过使用databinder.eval的方法取出其内容,并转换为int类型,接着判断是否为0,如果为0的话,则设置其行的背景颜色为黄色。程序运行结果如下图所示:


  二 gridview的分页和排序

  在asp.net 1.1中,datagrid分页是很常见的。而在asp.net 2.0中,依然有两种分页方式,一种是默认的分页方式,比如,有1000条数据,每页显示10条数据,则每次页面请求都必须从数据库中将1000条数据读取出来,只不过每次显示一页时,显示10条数据,速度和性能会降低。另一种是自定义分页方式,比如1000条数据,每页显示10条数据,则程序每次在页面跳转时,只会从数据库中拿10条数据出来显示给用户,而不是每次都把1000条数据拿出来,因此性能大为提高。

  在asp.net 2.0中,使用sqldatasource控件进行分页是十分容易的事情。Sqldatasource数据源控件是用来与数据库打交道的,可以读取数据库中的数据,并可以和gridview等控件进行绑定。在下面的演示中,首先拖拉一个sqldatasource控件,并且设置其数据源为sql server 中的northwind数据库,再拖拉一个gridview控件,并且点gridview的smart tag智能标记,在弹出的菜单中,选择"enable paging"和"enable sorting",即允许分页和排序,则可以完成分页和排序的功能了,是不是很简单呢?如下图所示:


  而在分页的效果中,有时我们想让用户知道,目前正在浏览的是第几页,那么要如何实现呢?在gridview中,有一个pageindex的属性,指示页面的序号(从0开始),则只需在页面的html代码内,写下如下代码,即可实现效果:

<i>You are viewing page
<%=productsGridView.PageIndex + 1%>
of
<%=productsGridView.PageCount%>
</i>

  完整代码如下:

<form id="form1" runat="server">
<div>
<asp:SqlDataSource ID="productDataSource" Runat="server"
 SelectCommand="SELECT [ProductName], [UnitPrice],
 [UnitsInStock], [QuantityPerUnit] FROM [Products]"
 ConnectionString="<%$ ConnectionStrings:NWConnectionString %>">
  </asp:SqlDataSource>
  <asp:GridView ID=" productsGridView" Runat="server"
    DataSourceID="productDataSource" AutoGenerateColumns="False"
    AllowSorting="True" BorderWidth="2px" BackColor="White" GridLines="None" CellPadding="3"
    CellSpacing="1" BorderStyle="Ridge" BorderColor="White" AllowPaging="True">
   <FooterStyle ForeColor="Black" BackColor="#C6C3C6"></FooterStyle>
   <PagerStyle ForeColor="Black" HorizontalAlign="Right" BackColor="#C6C3C6"></PagerStyle>
   <HeaderStyle ForeColor="#E7E7FF" Font-Bold="True" BackColor="#4A3C8C"></HeaderStyle>
   <Columns>
   <asp:BoundField HeaderText="Product" DataField="ProductName" SortExpression="ProductName">
  </asp:BoundField>
  <asp:BoundField HeaderText="Unit Price" DataField="UnitPrice" SortExpression="UnitPrice"
DataFormatString="{0:c}">
   <ItemStyle HorizontalAlign="Right"></ItemStyle>
  </asp:BoundField>
  <asp:BoundField HeaderText="Units In Stock" DataField="UnitsInStock"
SortExpression="UnitsInStock" DataFormatString="{0:d}">
   <ItemStyle HorizontalAlign="Right"></ItemStyle>
  </asp:BoundField>
  <asp:BoundField HeaderText="Quantity Per Unit" DataField="QuantityPerUnit"></asp:BoundField>
 </Columns>
 <SelectedRowStyle ForeColor="White" Font-Bold="True" BackColor="#9471DE"></SelectedRowStyle>
 <RowStyle ForeColor="Black" BackColor="#DEDFDE"></RowStyle>
</asp:GridView>
<i>You are viewing page
<%=productsGridView.PageIndex + 1%>
of
<%=productsGridView.PageCount%>
</i>
</div>
</form>

  实现的效果如下图所示:


  注意的是,可以点击gridview中各字段的名称,如product,unit price,等进行排序,十分方便。如果要对分页时每页显示多少条数据进行显示,则只需要设置gridview的pagesize属性就可以了。

  三 在gridview中使用图片

  在asp.net 1.1中,如果要使用图片的话,需要设置templatecolumn模版列。而在asp.ne 2.0中,则提供了imagefield列可以显示gridview中的图片。下面,我们设计一个简单的相册列表,让大家了解如何在gridview中使用图片,其中,数据表的结果如下,并且已经假设用户已经上传了相片,因此着重讨论如何在gridview中显示图片

  · PictureID-图片的序号,自动递增.

  · Title-图片的标题

  · DateAdded-图片上传日期

  · PictureUrl-图片上传后的相对路径

  接下来,我们拖拉一个gridview到IDE环境中去,设置将其与sqldatasource绑定。由于我们要在gridview中显示的是实际的图片,因此我们首先选gridview的smart tag标记,在弹出的菜单中选择"edit columns",之后将pictureurl绑定字段移除,添加一个ImageField绑定字段,并且将ImageField字段的dataimageurlfield属性设置为PictureURL字段,用来显示图片的路径,如下图所示:


  下面是相关HTML部分的代码:

<asp:GridView ID="GridView1" Runat="server"
DataSource=’<%# GetData() %>’ AutoGenerateColumns="False"
BorderWidth="1px" BackColor="White" CellPadding="3" BorderStyle="None"
BorderColor="#CCCCCC" Font-Names="Arial">
<FooterStyle ForeColor="#000066" BackColor="White"></FooterStyle>
<PagerStyle ForeColor="#000066" HorizontalAlign="Left"
BackColor="White"></PagerStyle>
<HeaderStyle ForeColor="White" Font-Bold="True"
BackColor="#006699"></HeaderStyle>
<Columns>
<asp:BoundField HeaderText="Picutre ID" DataField="PictureID">
<ItemStyle HorizontalAlign="Center"
VerticalAlign="Middle"></ItemStyle>
</asp:BoundField>
<asp:BoundField HeaderText="Title" DataField="Title"></asp:BoundField>
<asp:BoundField HeaderText="Date Added" DataField="DateAdded"
DataFormatString="{0:d}">
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:BoundField>
<asp:ImageField DataImageUrlField="PictureURL"></asp:ImageField>
</Columns>
<SelectedRowStyle ForeColor="White" Font-Bold="True"
BackColor="#669999"></SelectedRowStyle>
<RowStyle ForeColor="#000066"></RowStyle>
</asp:GridView>

  我们并且通过手动编写代码的方式,创建数据表,如下代码所示:

DataTable GetData()
{
 // This method creates a DataTable with four rows. Each row has the
 // following schema:
 // PictureID int
 // PictureURL string
 // Title string
 // DateAdded datetime
 DataTable dt = new DataTable();
 // define the table’s schema
 dt.Columns.Add(new DataColumn("PictureID", typeof(int)));
 dt.Columns.Add(new DataColumn("PictureURL", typeof(string)));
 dt.Columns.Add(new DataColumn("Title", typeof(string)));
 dt.Columns.Add(new DataColumn("DateAdded", typeof(DateTime)));
 // Create the four records
 DataRow dr = dt.NewRow();
 dr["PictureID"] = 1;
 dr["PictureURL"] = ResolveUrl("~/DisplayingImages/Images/Blue hills.jpg");
 dr["Title"] = "Blue Hills";
 dr["DateAdded"] = new DateTime(2005, 1, 15);
 dt.Rows.Add(dr);
 dr = dt.NewRow();
 dr["PictureID"] = 2;
 dr["PictureURL"] = ResolveUrl("~/DisplayingImages/Images/Sunset.jpg");
 dr["Title"] = "Sunset";
 dr["DateAdded"] = new DateTime(2005, 1, 21);
 dt.Rows.Add(dr);
 dr = dt.NewRow();
 dr["PictureID"] = 3;
 dr["PictureURL"] =
 ResolveUrl("~/DisplayingImages/Images/Water lilies.jpg");
 dr["Title"] = "Water Lilies";
 dr["DateAdded"] = new DateTime(2005, 2, 1);
 dt.Rows.Add(dr);
 dr = dt.NewRow();
 dr["PictureID"] = 4;
 dr["PictureURL"] = ResolveUrl("~/DisplayingImages/Images/Winter.jpg");
 dr["Title"] = "Winter";
 dr["DateAdded"] = new DateTime(2005, 2, 18);
 dt.Rows.Add(dr);
 return dt;
}

  程序运行后,结果如下图所示




相关文章:
© 2006   www.java-asp.net