asp.net学习之GridView七种字段

原文:asp.net学习之GridView七种字段

asp.net中GridView绑定到数据源时，可以自动显示数据源的各个字段。只要设定其AutoGenerateColumns为TRUE即可。但这，自动显示有其不好的一面，因为不能自义定控制显示的样式。
    解决以上的办法就是指定需要GridView显示的字段，GridView控件支持以下七种类型的Field：
      ● BoundField   :  将数据项显示为文本
      ● CheckBoxField : 将数据项显示为复选框
      ● CommandField : 使用链接来支持编辑、删除或选中行
      ● ButtonField : 将数据项显示为按钮(ImageButton、LinkButton、Button)
      ● HyperLinkField : 将数据项显示为超链接
      ● ImageField : 将数据项显示为图片
      ● TemplateField: 自定义数据项的外观
   以上，各Field的父类都为DataControlFiled.所以，下面先谈谈DataControlField。

1. DataControlField

DataControlField 类用作所有数据控件字段类型的基类。数据绑定控件使用数据控件字段表示数据字段。
     DataControlField定义了一些共公的属性，其子Field都可以使用。
       ● HeaderText/HeaderImageUrl : 标题栏字段/标题栏的图像URL
       ● FooterText : 脚注项的文本
       ● AccessibleHeaderText : 一个字符串，表示由屏幕阅读器读取的缩写文本。
       ● Control: 获取对Field内数据控件的引用
       ● InsertVisible: 插入新记录时，此列是否可见。(不能在GridView控件中使用)
       ● HeaderStyle/FooterStyle/ItemStyle/ControlStyle : 标题项/脚注项/数据项/子WEB控件的样式
       ● SortExpression : 为数据项指定排序表达式

2. 使用BoundField

GridView在显示状态，BoundField总是直接把数据项显示为文本；在编辑状态，BoundFiled将数据项显示为一个单行的文本框
     2.1 BoundField几个种要属性：
        除了其父类DataControlField的几个属性外，还有以下几个属性
        ● DataField : 显示的字段
        ● DataFormatString : 字段格式化
        ● HtmlEncode / HtmlEncodeFormatString: 获取或设置一个值，该值指示在 BoundField 对象中显示字段值之前，是否对这些字段值进行 HTML 编码。
      注： FormatString经常用来格式化数字、日期、字符串、自定义类型。
            关于字符格式化，参见以下MSDN：http://msdn.microsoft.com/zh-cn/library/26etazsy.aspx，
            或：http://www.cnblogs.com/tianhao960/archive/2006/06/22/433255.html
例1：使用GridView绑定字段

Code<asp:GridView id=”grdMovies” DataSourceID=”srcMovies” AutoGenerateColumns=”false” Runat=”server”>    <Columns>        <asp:BoundField DataField=”Title” HeaderText=”Movie Title” />        <asp:BoundField DataField=”Director” HeaderText=”Movie Director” />        <asp:BoundField DataField=”BoxOfficeTotals” DataFormatString=”{0:c}”                HtmlEncode=”false” HeaderText=”Box Office Totals” />    </Columns></asp:GridView> 

2.2 除了以上这些属性外，还有以下几个属性比较有用
        ● ApplyFormatInEditMode: 若要在编辑模式中将格式化字符串应用到字段值，则为 true；否则为 false。默认为 false。
        ● Readonly:  防止该数据项进入编辑模式。
        ● NullDisplayText : 当数据项为NULL时显示的文本

3. CheckBoxField

CheckBoxField会在相应的列内显示一个复选框，在没有进入编辑模式时，其复杂框处于禁用状态。
    CheckBoxField通过设置 Text 属性，可以在每一个复选框旁边显示一个标题

4. CommandField

使用CommandField可以定制GridView控件中Edit、Delete、Update、Cancel、Select等按钮的外观。
     需要使用CommonField时，不要启用GridView的AutoGenerateEditButton和AutoGenerateDeleteButton属性。因为可以直接使用CommandField
     CommandField的一些属性：
       ● ButtonType：指定Button类型、可以有Button、Image、Link类型
       ● CancelText/CancelImageUrl: Cancel按钮中的文本/图像URL
       ● DeleteText/DeleteImageUrl: Delete按钮中的文本/图像URL
       ● InsertText/InsertImageUrl: Insert按钮中的文本/图像URL
       ● EditText/EditImageUrl: Edit按钮中的文本/图像URL
       ● UpdateText/UpdateImageUrl: Update按钮中的文本/图像URL
       ● SelectText/SelectImageUrl: Select按钮中的文本/图像URL
       ● NewText/NewImageUrl: New按钮中的文本/图像URL
       ● ShowEditButton/ShowDeleteButton/ShowCancelButton/ShowSelectButton/ShowInsertButton: 是否显示相应按钮
       ● CauseValidation:点击按钮时是否启用校验
       ● ValidationGroup: 指定和编辑按钮相关验证控件组的名称

5. ButtonField

使用ButtonField可以在GridView中显示一个按钮，使用它可以完成自定义或标准的编辑命令
     点击GridView中的ButtonField字段，会触发GridView中的OnRowCommand事件。可以在这个事件中处理相关的命令事件。
     ButtonField有以下几个属性
       ● ButtonType : Button类型，可以为Button、Image、LinkButton
       ● CauseValidation : 指定按钮点击时是否引发验证
       ● CommandName : 指定ButtonField关联的标准编辑命令，可以为Delete、Edit、Update、Cancel。或者，可以自定义
       ● DataTextField/DataTextFormatString : 指定按钮文本的数据项/数据项格式
       ● Text : 按钮文本
       ● ValidationGroup : 和按钮相关验证控件组的名称
     通过CommandName属性可以使用BuffonField关联标准的编辑命令，例如给CommandName属性赋"Delete"就可以得到一个具有删除功能的按钮
例2：一个通过点击GridView中的Button，进行数据更新的例子

Code<asp:GridView id=”grdMovieCategories” DataSourceID=”srcMovieCategories” DataKeyNames=”Id,Position”         AutoGenerateColumns=”false” OnRowCommand=”grdMovieCategories_RowCommand” Runat=”server”>    <Columns>        <asp:ButtonField Text=”Move Up” CommandName=”Up” />        <asp:ButtonField Text=”Move Down” CommandName=”Down” />        <asp:BoundField DataField=”Position” HeaderText=”Position” />        <asp:BoundField DataField=”Name” HeaderText=”Category Name” />    </Columns></asp:GridView><asp:SqlDataSource id=”srcMovieCategories” ConnectionString=”<%$ ConnectionStrings:Movies %>”    SelectCommand=”SELECT Id, Name, Position FROM MovieCategories ORDER BY Position”    UpdateCommand=”UPDATE MovieCategories SET Position=@Position WHERE Id=@Id”    Runat=”server”>    <UpdateParameters>        <asp:Parameter Name=”Id” />        <asp:Parameter Name=”Position” />    </UpdateParameters></asp:SqlDataSource> 

6. 使用HyperLinkField

HyperLinkField用来链接到其他页面。当创建两具主从表单的时候，HyperLinkField非常有用。
    HyperLinkField具有以下属性：
       ● DataNavigateUrlFields： 在DataNavigateFormatString中使用的列名称
       ● DataNavigateFormatString: 格式链接字符串
       ● DataTextField/DataTextFormatString: 超链接文本/超链接文本格式化
       ● NavigateUrl: 链接到其它页面的URL
       ● Target : 链接目标，可以使用:_blank/_parent/_self/_top
       ● Text: 超链接的文本
例3：HyperLinkField使用举例,在一个页面中使用frames技术，可以不用整页刷新显示主从表
==FrameMaster.aspx==

Code<asp:GridView id=”grdMovies” DataSourceID=”srcMovies” AutoGenerateColumns=”false” Runat=”server”>    <Columns>        <asp:HyperLinkField HeaderText=”Movies” DataTextField=”Title” DataNavigateUrlFields=”Id”                DataNavigateUrlFormatString=”FrameDetails.aspx?id={0}”  Target=”FrameDetails” />    </Columns></asp:GridView><div class=”column”><iframe name=”FrameDetails” id=”FrameDetails”></iframe></div> 

==FrameDetails.aspx==

Code<asp:DetailsView id=”dtlMovie” DataSourceID=”srcMovieDetails” Runat=”server” /><asp:SqlDataSource id=”srcMovieDetails” ConnectionString=”<%$ ConnectionStrings:Movies %>”      SelectCommand=”SELECT Title, Director, InTheaters FROM Movies WHERE Id=@MovieId”  Runat=”server”>    <SelectParameters>         <asp:QueryStringParameter Name=”MovieId” QueryStringField=”id” />    </SelectParameters></asp:SqlDataSource> 

7. 使用ImageField

ImageFIeld用来显示保存在服务器上的图片，不能用ImageField来显示保存在数据库上的图片。
    ImageField有以下几个属性：
      ● AlternateText : 预备文本
      ● DataAlternateTextField : 使用指定列的值作为预备文本
      ● DataAlternateTextFormatString : 预备文本格式字符串
      ● DataImageUrlField : 存放图片路径的列名
      ● DataImageUrlFormatString : 图片路径格式字符串
      ● NullImageUrl : 指定预备图片
例4： 使用ImageField,实现一个简单的相册

Code<script runat=”server”>protected void frmPhoto_ItemInserting(object sender, FormViewInsertEventArgs e){    // Get the FileUpload control    FileUpload upPhoto = (FileUpload)frmPhoto.FindControl(“upPhoto”);    srcImages.InsertParameters[“FileName”].DefaultValue = upPhoto.FileName;    string savePath = MapPath(“~/Photos/” + upPhoto.FileName);    // Save contents to file system    upPhoto.SaveAs(savePath);}</script><asp:GridView id=”grdImages” DataSourceID=”srcImages” AutoGenerateColumns=”false”        ShowHeader=”false” Runat=”server”>    <Columns>        <asp:ImageField DataImageUrlField=”FileName” DataAlternateTextField=”AltText”             DataImageUrlFormatString=”~/Photos/{0}” ControlStyle-Width=”200px” />    </Columns></asp:GridView><asp:SqlDataSource id=”srcImages” ConnectionString=”<%$ ConnectionStrings:Photos %>”       SelectCommand=”SELECT FileName, AltText FROM Photos” InsertCommand=”INSERT Photos (FileName, AltText)                                 VALUES (@FileName, @AltText)”   Runat=”server”>    <InsertParameters>        <asp:Parameter Name=”FileName” />    </InsertParameters></asp:SqlDataSource><asp:FormView id=”frmPhoto” DefaultMode=”Insert” DataSourceID=”srcImages”         OnItemInserting=”frmPhoto_ItemInserting” Runat=”server”>    <InsertItemTemplate>        <asp:FileUpload id=”upPhoto” Runat=”server” />        <asp:TextBox id=”txtAltText” Text=’<%# Bind(“AltText”) %>’ Columns=”50” Runat=”server” />       <asp:Button id=”btnInsert” Text=”Add New Photo” CommandName=”Insert” Runat=”server” />    </InsertItemTemplate></asp:FormView> 

8.使用TemplateField

使用TemplateField可以在GridView控件的数据列中添加任何内容，例如HTML、数据绑定表达式或者ASP.NET控件等。
   可以使用TemplateField定制用户界面或者给被编辑字段添加验证
    TempateField支持以下6种类型的模板
       ● ALternatingItemTemplate : 间隔行模板
       ● EditItemTemlpate : 编辑行模板
       ● FooterTemplate : 脚注模板
       ● HeaderTemplate : 标题模板
       ● InsertItemTemplate: 插入行模板(不支持GridView控件)
       ● ItemTemplate: 每个显示行模板
例5：TemplateField举例,

Code<asp:GridView id=”grdMovies”   DataSourceID=”srcMovies” DataKeyNames=”Id”       AutoGenerateColumns=”false” AutoGenerateEditButton=”true” Runat=”server”>    <Columns>        <asp:TemplateField HeaderText=”Title”>  <!-- Title 列-->            <ItemTemplate> <%# Eval(“Title”) %> </ItemTemplate> <!-- 注意，是用Eval绑定字绑，而没有BoundField属性了 -->            <EditItemTemplate>  <!-- 编辑时显示的模板 -->                <asp:TextBox id=”txtTitle” Text='<%# Bind(“Title”) %>' Runat=”server” /> <!-- 使用Bind,双向绑定 -->                <-- 编辑时对txtTitle进行验证 -->                <asp:RequiredFieldValidator id=”valTitle” ControlToValidate=”txtTitle” Text=”(required)” Runat=”server” />            </EditItemTemplate>        </asp:TemplateField>        <asp:TemplateField HeaderText=”Category”>  <!-- Category列 -->            <ItemTemplate> <%# Eval(“Name”) %> </ItemTemplate>            <EditItemTemplate>                  <asp:DropDownList id=”ddlCategory” DataSourceID=”srcMovieCategories” DataTextField=”Name”                          DataValueField=”Id” SelectedValue='<%# Bind(“CategoryId”) %>' Runat=”server” />            </EditItemTemplate>        </asp:TemplateField></Columns></asp:GridView>