一、GridView操作初步
1、显示数据源中的数据
从ToolBox中选取GridView控件拖到页面上,然后点击右键,选择Show Smart Tag,在Choose Data Source中选择 New Data Source, 出现Data Source Configuration Wizard,选择连接字符串,可以选择已经存放在web.config中的ConnectionString ,然后可以选择是使用存储过程,还是从表或视图中选择数据。
在这一步,左侧的Where语句可以指定查询条件,点击Where,出现Add Where Clause ,选择要设定条件的列,操作符是等于还是like还是其它,然后选择Source,也就是说要限定的条件从哪里取值,可以是Control、Session、Form、Cookie、QueryStirng等,如果选择Control,那么需要在右侧,选中是那个控件,然后还可以设定默认值,设定完后系统自动生成Sql 表达式和值的表达式,此时点击Add按钮,完成条件的添加,Where Cluase下出现刚刚添加的条件。如果没有点击Add,很容易设定了条件,但是因为没有添加到Where子句中,所以不起作用。
在这一步,左侧的Order By,可以让我们设定排序列,就是我们取出的记录要按照什么派逊,可以设定三个列,是升序还是降序。
在这一部,左侧的Advanced,可以设定Advanced Sql Generation Options,这里可以生成这个查询的Insert、update、Delete语句,当然,前提是您选择的字段中必须包含了主键。当您想在GridView中不编写任何代码实现对表格的编辑、删除等操作时,就必须在配置数据源时,在这里生成Insert、Update、Delete这些语句。 GridView中编辑删除等操作的零代码,就是根据配置数据源时自动生成的这些语句来完成数据源的更新删除等操作的。
在最后一步,您可以测试一下您刚刚生成的查询是否正确,最后点击完成,数据已经出现在页面上了,按Ctrl+F5运行。
恭喜您!您已经会使用Asp.net来显示数据库中的数据了。
2、让GridView可以分页
GridView把数据显示出来了,但是那么多条记录罗列到一页上是不合适的,我们应该对数据进行分页。还记得在asp时代,分页是多么的麻烦,需要编写很多的代码,而且各种分页组件也应运而生。而在GridView中,您会发现,分页是如此的简单,只需要您轻点鼠标,在Show Smart Tag中,选中Enable Paging,表格的分页操作变完成了,是不是So Easy呢。
并不是什么数据源都可以让GridView实现自动分页的,比如如果DataSourceMode是DataReader,就无法实现自动分页。而且只有ObjectDataSource是界面级别的支持分页,类似我们常用的SqlDataSource都是先提取所有的记录,然后只显示本页需要显示的记录,然后抛弃其余的记录,都有点浪费资源的啦!
当GridView的AllowPaging属性设置为True的时候,我们实现了分页,我们还可以对分页进行一些个性化的设置。常用的属性包括:PageIndex――设置数据显示的当前页面,默认是0,也就是数据的首页。PageSize ――也就是一页显示多少条记录,默认为10条。在PagerSettings中,还可以对分页的导航按钮进行详细设置,在Mode属性中,可以设置:Numeric――默认的,分页用数字表示,1,2,3……。NextPrevious、NextPreviousFirstLast、NumericFirstLast均可顾名思义,显示上一页、下一页、首页、末页等。当Mode设定不是Numeric时,那么可以通过设定FirstPageText、LastPageText等属性来实现分页导航时,到首页、末页、下页、上页时显示的文字提示。
如果想实现分页界面的完全自动控制,还可以点击GridView右键,选择编辑模版-PagerTemplate来实现,在模版中加入若干个Button控件,然后将Button控件的CommandName属性设置为Page,将CommandArgument属性分别设置为First、Last、Prev、Next或者一个数字,即可实现分页操作。
3、GridView中的编辑、删除、排序
数据从数据源中提取出现,显示在网页上后,我们如果需要对其中的数据进行编辑、更新、删除等操作,还是不需要编写任何代码,利用GridView内置的功能即可实现。
在智能标记中,点击编辑列,在Avaliable Fields中,选择ComandField,然后双击Edit,update,cancel和Delete,我们就为GridView添加了编辑和删除功能。如果在配置数据源的时候,我们已经生成了Insert、update、delete这些语句,那么我们现在就可以执行程序。点击页面上的Edit,出现Update和Cancel按钮,同时当前行除了主键以外的列,数值都放在了一个文本框中,可以进行编辑,然后点击Update即可保存。点击Delete,删除当前行记录。您是不是已经被GridView强大的功能折服了呢?
在Show Smart Tag中,选择Enable Sorting,这时所有列的Header都变成了一个超链接,
其实这些都是一个LinkButton控件,运行代码,在网页生成的数据表中,
点击第一行中的列名,即可按照当前列进行排序,再次点击则反向排序。
如果您只需要对其中的几列进行排序,可以在智能标记中,选择编辑列,
选中要排序的列,然后在右侧的属性中找到SortExpression属性,
然后从下拉框中选择根据哪个字段排序,一般当然是当前字段咯,完成排序的设置。
如果您不需要这一列参与排序,那么只需要把此列的SortExpression属性后面的值删除,也
就是说设置成空字符串即可。试一试,是不是排序已经尽在掌握之中了呢?
三、GridView中的自定义列
GridView可以根据数据源自动生成列,但是如果我们需要自定义列的显示方式,
让GridView的列完完全全的由我们自己来控制,我们就需要用到一种特殊的列
――TemplateField。因为GridView生成的列都是一个字段一列,如果我们需要把两个字段合并
为一列显示呢?我们可以使用模板列。我们可以指定包含标记和控件的模版,
自定义列的布局和行为,我们可以新建一个模版列,也可以直接把已经生成的列转换为
模版列来进行个性化的设置。
在GridView上单击右键,选择编辑模版,在弹出菜单中选择要编辑的列,出现列模版的编辑画面。
其中HeaderTemplate――自定义列的标头部分显示的内容,
FooterTemplate――脚注部分显示的内容,ItemTemplate――是打开网页后此列数据显示的内容,
EditItemTemplate――此列处于编辑状态时如何显示,
AlternatingItemTemplate――交替项显示的内容,也就是说为了显示效果,可以隔行分别以不同的风格显示。
Example 1:
我们现在假设有一个表,其中有一个字段是username,我们现在产生一个自定义列,自定义列中包含此人的照片,同时我们假定照片的路径为image/username.jpg。我们首先右键点击GridView,在智能标记中,选择编辑列,添加一个模版列,然后编辑模版中的ItemTemplate,加入一个Image控件,然后右键点击Image控件,选择Edit DataBindings,在ImageUrl中设置Field Binding,首先我我要Bound to 数据源中的某列,因为所有图片的路径和格式是相同的,唯有名字不同而已,所以我们这里选中username字段,在format中,我们要自己定义其格式,输入image/{0}.jpg, {0}代表的就是上面绑定的字段,下面有一个Two Way DataBinding 的复选框,就是是否双向绑定的意思,如果单向绑定,一般采用Eval,也就是说数值只从数据源传到页面上,如果双向绑定,也就是采用Bind的话,对数据的修改可以回传到数据源之中。
在web页面执行时,不同的行因为username不同,图片的名字也会做出相应的替换。点击确定,然后执行当前网页,我们就可以看到在我们的自定义列中显示出了用户的照片。
Example 2:
在数据库中,存储性别的时候,一般采用bit数据类型,存储为True或者False,在GridView自动生成列的时候,一般使用CheckedBoxField 列来显示bit类型的数据,显示在网页上就是一个单选框,如果选中,也就是Checked了,就是男的,否则就是女的。这样看起来,很不直观,下面我们通过自定义列将性别显示为男、女。
首先在GridView的Show Smart Tag中,选择编辑列,然后双击TemplateFields ,添加了一个模版列,确定后,点击右键选择编辑模版,选中刚添加的列。在ItemTemplate中添加一个DropListDown控件,然后编辑它的数据绑定,Edit DataBinding,把SelectedValue属性绑定到性别列。
在DropListDown控件中选择 Edit Item,就是编辑其下拉列表的项,我们添加两个Item,一个的Text属性是男,Value设置为True,一个的Text属性设置为女,Value属性设置为False。到这里,你明白了么?因为DropDownList控件的显示文本和其值是可以不一样的,我们用数据绑定取到了性别这一列的值,True或者False,然后反映到DropDownList控件上,如果值为True,因为Text属性为男的Item的Value为True,所以我们现在运行网页,在新添加的列中,显示的不再是单选框或者True、false这些没有含义的东西,而是以下拉列表的方式显示出了当前用户是 男还是女。
四、自定义列中的数据更新
假设数据库中有一个"权限"字段,值为0代表未审核用户,为1代表一般用户,为9则代表管理员用户。根据前面所说的自定义列的办法,通过对DropListDown的绑定,在网页中显示权限为 "管理员",而不是显示数字9。问题产生了,如果我们调整用户权限的话,比如把一般用户更改为管理员,在编辑模版中的用户权限的下拉列表,如何把它的值返回给数据源来完成更新操作。
我们在EditItemTemplate中设置的DropListDown控件,必须选中了Two Way DataBinding,也就是数据双向帮定,这样才能返回数据。前面我们谈到,在GridView中,事件不是单个的,是两个,一个是发生前,一个是发生后,因为我们需要在数据更新前把下拉列表的权限值传送出去,所以我们需要对GridView1_RowUpdating 进行编码,编码如下:
protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
//当前编辑的是哪行?
int index = GridView1.EditIndex;
//取得当前编辑行的GridViewRow对象
GridViewRow gvr = GridView1.Rows[index];
//在当前行中,寻找DropListDown控件
DropDownList dp = (DropDownList)gvr.FindControl("editdrop");
//将DropListDown的值赋给NewValues集合中的权限字段。
e.NewValues["rights"] = dp.SelectedValue;
}
二、Gridview中的内容导出到Excel
在日常工作中,经常要将gridview中的内容导出到excel报表中去,在asp.net 2.0中,同样可以很方便地实现将整个gridview中的内容导出到excel报表中去,下面介绍其具体做法:
首先,建立基本的页面default.aspx
<form id="form1" runat="server"> <div> <asp:GridView ID="GridView1" runat="server"> </asp:GridView> </div> <asp:Button ID="BtnExport" runat="server" OnClick="BtnExport_Click" Text="Export to Excel" /> </form> |
protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { BindData(); } } private void BindData() { string query = "SELECT * FROM customers"; SqlConnection myConnection = new SqlConnection(ConnectionString); SqlDataAdapter ad = new SqlDataAdapter(query, myConnection); DataSet ds = new DataSet(); ad.Fill(ds, "customers"); GridView1.DataSource = ds; GridView1.DataBind(); } public override void VerifyRenderingInServerForm(Control control) { // Confirms that an HtmlForm control is rendered for } protected void Button1_Click(object sender, EventArgs e) { Response.Clear(); Response.AddHeader("content-disposition","attachment;filename=FileName.xls"); Response.Charset = "gb2312"; Response.ContentType = "application/vnd.xls"; System.IO.StringWriter stringWrite = new System.IO.StringWriter(); System.Web.UI.HtmlTextWriter htmlWrite =new HtmlTextWriter(stringWrite); GridView1.AllowPaging = false; BindData(); GridView1.RenderControl(htmlWrite); Response.Write(stringWrite.ToString()); Response.End(); GridView1.AllowPaging = true; BindData(); } protected void paging(object sender,GridViewPageEventArgs e) { GridView1.PageIndex = e.NewPageIndex; BindData(); } |
public DataSet PopulateDropDownList() { SqlConnection myConnection =new SqlConnection(ConfigurationManager.ConnectionStrings["MyDatabase"].ConnectionString); SqlDataAdapter ad = new SqlDataAdapter("SELECT * FROM tblPhone", myConnection); DataSet ds = new DataSet(); ad.Fill(ds, "tblPhone"); return ds; } |
<ItemTemplate> <asp:DropDownList ID="DropDownList1" runat="server" DataSource="<%# PopulateDropDownList() %>" DataTextField="Phone" DataValueField = "PhoneID"> </asp:DropDownList> </ItemTemplate> |
protected void Button2_Click(object sender, EventArgs e) { StringBuilder str = new StringBuilder(); foreach (GridViewRow gvr in GridView1.Rows) { string selectedText = ((DropDownList)gvr.FindControl("DropDownList1")).SelectedItem.Text; str.Append(selectedText); } Response.Write(str.ToString()); } |
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="PersonID" DataSourceID="mySource" Width="366px" CellPadding="4" ForeColor="#333333" GridLines="None"> <Columns> <asp:CommandField ShowSelectButton="True" /> <asp:BoundField DataField="PersonID" HeaderText="PersonID" InsertVisible="False" ReadOnly="True" SortExpression="PersonID" /> <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" /> <asp:TemplateField HeaderText="Select"> <ItemTemplate> <asp:CheckBox ID="chkSelect" runat="server" /> </ItemTemplate> <HeaderTemplate> </HeaderTemplate> </asp:TemplateField> </Columns> </asp:GridView> |
for (int i = 0; i < GridView1.Rows.Count; i++) { GridViewRow row = GridView1.Rows[i]; bool isChecked = ((CheckBox) row.FindControl("chkSelect")).Checked; if (isChecked) { str.Append(GridView1.Rows[i].Cells[2].Text); } } Response.Write(str.ToString()); |
<HeaderTemplate> <input id="chkAll" οnclick=SelectAllCheckboxes(this);" runat="server" type="checkbox" /> </HeaderTemplate> |
<script language=javascript> function SelectAllCheckboxes(spanChk){ var oItem = spanChk.children; var theBox=(spanChk.type=="checkbox")?spanChk:spanChk.children.item[0]; xState=theBox.checked; elm=theBox.form.elements; for(i=0;i<elm.length;i++) if(elm[i].type=="checkbox" && elm[i].id!=theBox.id) { if(elm[i].checked!=xState) elm[i].click(); } } </script> |
四、gridview中删除记录的处理 在gridview中,我们都希望能在删除记录时,能弹出提示框予以提示,在asp.net1.1中,都可以很容易实现,那么在asp.net 2.0中要如何实现呢?下面举例子说明,首先在HTML页面中设计好如下代码:
在上面的代码中,我们设置了一个链接linkbutton,其中指定了commandname为"Delete",commandargument为要删除的记录的ID编号,注意一旦commandname设置为delete这个名称后,gridview中的GridView_RowCommand 和 GridView_Row_Deleting 事件都会被激发接者,我们处理其rowdatabound事件中:
在这段代码中,首先检查是否是datarow,是的话则得到每个linkbutton,再为其添加客户端代码,基本和asp.net 1.1的做法差不多。 之后,当用户选择了确认删除后,我们有两种方法对其进行继续的后续删除处理,因为我们将删除按钮设置为Delete,方法一是在row_command事件中写入如下代码:
另外一种方法是使用gridview的row_deletting事件,先在页面HTML代码中,添加<asp:GridView DataKeyNames="CategoryID" ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowCommand="GridView1_RowCommand" OnRowDataBound="GridView1_RowDataBound" onRowDeleting="GridView1_RowDeleting"> 然后添加row_deleting事件:
要注意的是,这个必须将datakeynames设置为要删除记录的编号,这里是categoryid |