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

article/2025/9/29 10:03:06

        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的样式，内置了许多样式，如下图:

j6726eal8ox1.gif


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

9485q19reioq.gif


　　比如，如果要某一列设置为特殊格式，如要将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＞


　　程序运行后结果如下：

1126ene1b764.gif


　　而有的时候，我们可能要根据需要，对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的话，则设置其行的背景颜色为黄色。程序运行结果如下图所示：

r6hi8j6216ds.gif

 

　　二 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",即允许分页和排序，则可以完成分页和排序的功能了，是不是很简单呢？如下图所示：

k25t2925vhck.gif


　　而在分页的效果中，有时我们想让用户知道，目前正在浏览的是第几页，那么要如何实现呢？在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＞


　　实现的效果如下图所示：

g9zt42xi0s4h.jpg


　　注意的是，可以点击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字段，用来显示图片的路径，如下图所示：

5m1zbs7n3igj.gif


　　下面是相关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;
}


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

b6r0m0pao4c0.jpg

原文出处： http://www.webjx.com/htmldata/2005-08-21/1124585513.html

转载于:https://www.cnblogs.com/xiaolin/archive/2007/01/12/618555.html


http://chatgpt.dhexx.cn/article/DGtsuXYN.shtml

相关文章

C# winform中,简单实现Listview.Subitem.BackColor.ForeColor改变字体颜色,Listview.Subitem.BackColor 改变背景

C# winform中,简单实现Listview.Subitem.BackColor.ForeColor改变字体颜色,Listview.Subitem.BackColor 改变背景

做项目的时候,客户的查询结果中要在listview中亮显查询关键字.在网上找了半天,没有合适的代码.于是就自己琢磨了一下.贴出代码,希望对大家有所帮助. 注意事项： 一定要把listview的OwnerDraw属性设置为True（默认是False）。 当设置Owner…
阅读更多...
Button 设置ForeColor不生效问题

Button 设置ForeColor不生效问题

Button 设置ForeColor不生效问题 在C#设计界面的时候出现的一个问题，在将button 的属性Enable设置为False后，无论你设置的ForeColor为什么颜色，结果都只有一种颜色。 如下图： button1，属性如下： BackCo…
阅读更多...
Winform中自定义控件，BackColor，ForeColor系统选择窗口

Winform中自定义控件，BackColor，ForeColor系统选择窗口

/// <summary>/// 正常时的前景色&#xff0c;若不设置&#xff0c;以ForeColor为准/// </summary>private Color _normalForeColor Color.Empty;[Category("自定义外观"),//DispId(NativeMethods.ActiveX.DISPID_FORECOLOR),DISPID_FORECOLOR uncheck…
阅读更多...
c语言自定义color,forecolor c语言中的颜色设置语句详解

c语言自定义color,forecolor c语言中的颜色设置语句详解

backcolor与forecolor的区别 backcolor&#xff1a;用来设置图像的背景颜色&#xff0c;也用来设置文档、表格、图像等的背景颜色。 forecolor&#xff1a;用来设置图像的前景颜色&#xff0c;也用来设置文档、表格、图像等的前景颜色。 二、用法不同 backcolor&#xff1a;生成…
阅读更多...
C#界面里control.ForeColor 和 control.BackColor 属性的使用

C#界面里control.ForeColor 和 control.BackColor 属性的使用

C#界面里control.ForeColor 和 control.BackColor 属性的使用 在开发中，控件的背景颜色和前景颜色都是比较常用的。 control.ForeColor是获取或设置控件的前景色。 ForeColor 属性是一个环境属性。 环境属性是一个控件属性，如果未设置，则从父控件获取该属性。 例如，默认…
阅读更多...
C#学习笔记：控件BackColor属性与ForeColor的使用方法

C#学习笔记：控件BackColor属性与ForeColor的使用方法

1.解释 &#xff08;1&#xff09;BackColor属性 BackColor属性表示控件的背景颜色&#xff0c;各个颜色颜色分量的取值范围是0-255的整数。 &#xff08;2&#xff09;ForeColor属性 ForeColor属性表示控件的前景色&#xff0c;用于显示文本&#xff0c;也就是说&#xff…
阅读更多...
Eclipse出现Tomcat无法启动：Server Tomcat v8.5 Server at localhost failed to start问题

Eclipse出现Tomcat无法启动：Server Tomcat v8.5 Server at localhost failed to start问题

最近在做一个心理测评网站&#xff0c;在简单测试前后台交互的时候出现了Tomcat无法启动的问题 弹窗出现Tomcat无法启动问题&#xff1a; 检查错误&#xff1a; 查看console控制台发现&#xff1a; 严重: The required Server component failed to start so Tomcat is unabl…
阅读更多...
Tomcat无法启动：Server Tomcat v8.5 Server at localhost failed to start

Tomcat无法启动：Server Tomcat v8.5 Server at localhost failed to start

版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。https://blog.csdn.net/qq_42680327 Tomact无法启动 项目状态 Maven项目&#xff1a;基础环境&#xff08;依赖&#xff0c;基本配置文件&#xff09;搭建完成&#xff0c;前端页面都导入&#xf…
阅读更多...
Tomcat部署启动时发生错误报错：无法启动组件

Tomcat部署启动时发生错误报错：无法启动组件

Tomcat部署启动时发生错误&#xff1a;无法启动组件 Tomcat启动后项目地址显示404&#xff1a;源服务器未能找到目标资源的表示或者是不愿公开一个已经存在的资源表示。 或者 严重: ContainerBase.addChild: start: org.apache.catalina.LifecycleException: Failed to sta…
阅读更多...
Tomcat9无法启动

Tomcat9无法启动

1、环境变量配置不加以赘述&#xff0c;推荐使用tomcat安装目录下的service.bat进行自动安装&#xff0c;就可以明确看到已配置好的路径以及安装成功的提示&#xff0c;否则localhost:8080一直404&#xff0c;都不确定自己是否已安装。如图&#xff1a; 2、容易出现问题的部分&…
阅读更多...
tomcat无法启动，一闪而过。

tomcat无法启动，一闪而过。

1、当你的tomcat也出现一闪而过的情况&#xff0c;你可以在catalina.bat的最后面加上pause&#xff0c;如下图 2、运行start.bat,会发现catalina.bat的运行界面已经保持住了&#xff0c;此时你查看一下tomcat启动所需要的条件是否全部具备&#xff0c;如果缺少什么在catalina.b…
阅读更多...
Tomcat无法启动的常见问题

Tomcat无法启动的常见问题

文章目录 1、环境变量配置2、启动端口被占用&#xff08;&#xff1a;8080、&#xff1a;1099&#xff09;被占用的情况 1、环境变量配置 可能是环境变量JAVA_HOME没有配置好&#xff0c;此电脑---->右击 属性---->高级系统设置---->环境变量---->添加配置 点击 新…
阅读更多...
Tomcat无法启动！！！启动时只是一闪而过？？？

Tomcat无法启动！！！启动时只是一闪而过？？？

这个问题&#xff0c;咳咳~~~ 如果上网查了半天之后都没有解决的话&#xff0c;那么&#xff0c;首先恭喜你来到了我这里&#xff01; 话不多说&#xff0c;嗯&#xff0c;根据我多年Web开发经验总结得知&#xff08;其实只有一年多而已......&#xff09; 如果。。。 1、J…
阅读更多...
tomcat无法启动 报错问题和解决办法

tomcat无法启动 报错问题和解决办法

tomcat无法启动 cannot load …\System\tomcat\Tomcat_7_0_93_dubboservice_3\conf\server.xml 出现这种情况。 百度看的说是tomcat部署的问题&#xff0c;我重新部署了一下还是不行&#xff0c;之后用debug运行提示的是端口被占用&#xff0c;查看了一下端口没有占用。后来问…
阅读更多...
tomcat启动报错：无法启动组件[StandardEngine[Catalina].StandardHost[localhost].StandardContext

tomcat启动报错：无法启动组件[StandardEngine[Catalina].StandardHost[localhost].StandardContext

出现此异常的原因应该是项目中有错误 继续查看详细错误信息&#xff0c;有这样一条&#xff1a; 名为 [servlet.MusicInfoServlet]和 [servlet.UpdateMusicServlet] 的servlet不能映射为一个url模式(url-pattern) [/UpdateMusicServlet] 报错原因&#xff1a;两个servlet的映…
阅读更多...
关于Tomcat一闪而过无法启动问题

关于Tomcat一闪而过无法启动问题

2018.09.18 最终解决&#xff1a; 再次尝试为小项目搭建服务器时候&#xff0c;发现解压出来还是一闪而过。查阅资料发现&#xff0c;tomcat的环境变量并不是必须配置的。可以阅读tomcat_home/bin/starup.bat源代码&#xff0c;理解逻辑调试问题。 并可以在代码最后添加paus…
阅读更多...
tomcat启动不起来的解决方案

tomcat启动不起来的解决方案

1.先看一下当tomcat中没有项目的时候可不可以运行。 2. 如果可以运行就说明不是tomcat的缘故&#xff0c;而是代码有问题。 &#xff08;1&#xff09;先选中项目&#xff0c;然后点击eclipse菜单中的clean清空缓存。 &#xff08;2&#xff09;再次将项目放到tomcat中运行&am…
阅读更多...
Tomcat无法启动报错：严重: 子容器启动失败

Tomcat无法启动报错：严重: 子容器启动失败

问题1:重复提交Servlet java文件中 这里已经表单已经提交到Servlet了 在xml文件中 from表单又重复提交了一遍Servlet 导致tomcat无法启动 解决: 删掉其中一个,只保留一个即可
阅读更多...
Tomcat启动不了了，求救！！！

Tomcat启动不了了，求救！！！

在命令窗口输入“startup.bat”后显示这样的&#xff0c;在其他开发工具上没有启动Tomcat&#xff0c;然后尝试过重新装&#xff0c;解决不了&#xff0c;求助&#xff01;哪位大神能帮帮忙&#xff01;&#xff01;&#xff01; Using CATALINA_BASE: "E:\apache-tomc…
阅读更多...
无法启动Tomcat的原因以及解决方法

无法启动Tomcat的原因以及解决方法

在启动程序时&#xff0c;无法打开网页 看一下是否有lib这个文件夹 先点这个 查看这个目录下是否有lib&#xff0c;如果没有就创建一个 全选 &#xff0c;点OK &#xff0c;然后apple&#xff0c;在ok 然后再次启动
阅读更多...
推荐文章

Copyright @ 2022~2023