天天看點

asp.net學習之GridView七種字段

    asp.net中GridView綁定到資料源時,可以自動顯示資料源的各個字段。隻要設定其AutoGenerateColumns為TRUE即可。但這,自動顯示有其不好的一面,因為不能自義定控制顯示的樣式。

    解決以上的辦法就是指定需要GridView顯示的字段,GridView控件支援以下七種類型的Field:

      ● BoundField   :  将資料項顯示為文本

      ● CheckBoxField : 将資料項顯示為複選框

      ● CommandField : 使用連結來支援編輯、删除或選中行

      ● ButtonField : 将資料項顯示為按鈕(ImageButton、LinkButton、Button)

      ● HyperLinkField : 将資料項顯示為超連結

      ● ImageField : 将資料項顯示為圖檔

      ● TemplateField: 自定義資料項的外觀

   以上,各Field的父類都為DataControlFiled.是以,下面先談談DataControlField。

     DataControlField 類用作所有資料控件字段類型的基類。資料綁定控件使用資料控件字段表示資料字段。

     DataControlField定義了一些共公的屬性,其子Field都可以使用。

       ● HeaderText/HeaderImageUrl : 标題欄字段/标題欄的圖像URL

       ● FooterText : 腳注項的文本

       ● AccessibleHeaderText : 一個字元串,表示由螢幕閱讀器讀取的縮寫文本。

       ● Control: 擷取對Field内資料控件的引用

       ● InsertVisible: 插入新記錄時,此列是否可見。(不能在GridView控件中使用)

       ● HeaderStyle/FooterStyle/ItemStyle/ControlStyle : 标題項/腳注項/資料項/子WEB控件的樣式

       ● SortExpression : 為資料項指定排序表達式

     GridView在顯示狀态,BoundField總是直接把資料項顯示為文本;在編輯狀态,BoundFiled将資料項顯示為一個單行的文本框

     2.1 BoundField幾個種要屬性:

        除了其父類DataControlField的幾個屬性外,還有以下幾個屬性

        ● DataField : 顯示的字段

        ● DataFormatString : 字段格式化

      注: FormatString經常用來格式化數字、日期、字元串、自定義類型。

例1:使用GridView綁定字段

asp.net學習之GridView七種字段
asp.net學習之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時顯示的文本

    CheckBoxField會在相應的列内顯示一個複選框,在沒有進入編輯模式時,其複雜框處于禁用狀态。

     使用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: 指定和編輯按鈕相關驗證控件組的名稱

     使用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.net學習之GridView七種字段
asp.net學習之GridView七種字段

<asp:GridView id=”grdMovieCategories” DataSourceID=”srcMovieCategories” DataKeyNames=”Id,Position”

         AutoGenerateColumns=”false” OnRowCommand=”grdMovieCategories_RowCommand” Runat=”server”>

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

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

    HyperLinkField用來連結到其他頁面。當建立兩具主從表單的時候,HyperLinkField非常有用。

    HyperLinkField具有以下屬性:

       ● DataNavigateUrlFields: 在DataNavigateFormatString中使用的列名稱

       ● DataNavigateFormatString: 格式連結字元串

       ● DataTextField/DataTextFormatString: 超連結文本/超連結文本格式化

       ● NavigateUrl: 連結到其它頁面的URL

       ● Target : 連結目标,可以使用:_blank/_parent/_self/_top

       ● Text: 超連結的文本

例3:HyperLinkField使用舉例,在一個頁面中使用frames技術,可以不用整頁重新整理顯示主從表

==FrameMaster.aspx==

asp.net學習之GridView七種字段
asp.net學習之GridView七種字段

        <asp:HyperLinkField HeaderText=”Movies” DataTextField=”Title” DataNavigateUrlFields=”Id”

                DataNavigateUrlFormatString=”FrameDetails.aspx?id={0}”  Target=”FrameDetails” />

<div class=”column”>

<iframe name=”FrameDetails” id=”FrameDetails”></iframe>

</div> 

==FrameDetails.aspx==

asp.net學習之GridView七種字段
asp.net學習之GridView七種字段

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

    ImageFIeld用來顯示儲存在伺服器上的圖檔,不能用ImageField來顯示儲存在資料庫上的圖檔。

    ImageField有以下幾個屬性:

      ● AlternateText : 預備文本

      ● DataAlternateTextField : 使用指定列的值作為預備文本

      ● DataAlternateTextFormatString : 預備文本格式字元串

      ● DataImageUrlField : 存放圖檔路徑的列名

      ● DataImageUrlFormatString : 圖檔路徑格式字元串

      ● NullImageUrl : 指定預備圖檔

例4: 使用ImageField,實作一個簡單的相冊

asp.net學習之GridView七種字段
asp.net學習之GridView七種字段

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

        <asp:ImageField DataImageUrlField=”FileName” DataAlternateTextField=”AltText”

             DataImageUrlFormatString=”~/Photos/{0}” ControlStyle-Width=”200px” />

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

    使用TemplateField可以在GridView控件的資料列中添加任何内容,例如HTML、資料綁定表達式或者ASP.NET控件等。

   可以使用TemplateField定制使用者界面或者給被編輯字段添加驗證

    TempateField支援以下6種類型的模闆

       ● ALternatingItemTemplate : 間隔行模闆

       ● EditItemTemlpate : 編輯行模闆

       ● FooterTemplate : 腳注模闆

       ● HeaderTemplate : 标題模闆

       ● InsertItemTemplate: 插入行模闆(不支援GridView控件)

       ● ItemTemplate: 每個顯示行模闆

例5:TemplateField舉例,

asp.net學習之GridView七種字段
asp.net學習之GridView七種字段

<asp:GridView id=”grdMovies”   DataSourceID=”srcMovies” DataKeyNames=”Id”

       AutoGenerateColumns=”false” AutoGenerateEditButton=”true” Runat=”server”>

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

</Columns>