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綁定字段
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuUWYxYmZhR2MiNjY3QGMjFGZlNTOzUWZjJGO2YzM1MWMfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.gif)
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,進行資料更新的例子
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuUWYxYmZhR2MiNjY3QGMjFGZlNTOzUWZjJGO2YzM1MWMfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.gif)
<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==
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuUWYxYmZhR2MiNjY3QGMjFGZlNTOzUWZjJGO2YzM1MWMfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.gif)
<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==
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuUWYxYmZhR2MiNjY3QGMjFGZlNTOzUWZjJGO2YzM1MWMfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.gif)
<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,實作一個簡單的相冊
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuUWYxYmZhR2MiNjY3QGMjFGZlNTOzUWZjJGO2YzM1MWMfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.gif)
<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舉例,
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuUWYxYmZhR2MiNjY3QGMjFGZlNTOzUWZjJGO2YzM1MWMfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.gif)
<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>