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绑定字段

<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，进行数据更新的例子

<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==

<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==

<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,实现一个简单的相册

<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举例,

<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>