ptg 534 CHAPTER 11 Using the GridView Control Using HyperLink Fields You use HyperLinkField to create a link to another page; HyperLinkField is particularly useful when you need to build two page Master/Detail forms. For example, the page in Listing 11.22 displays a list of movie categories, and the page in Listing 11.23 displays a list of movies that match the selected category. LISTING 11.22 Master.aspx <%@ Page Language=”C#” %> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Master</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:GridView id=”grdMovieCategories” DataSourceID=”srcMovieCategories” AutoGenerateColumns=”false” Runat=”server”> <Columns> <asp:HyperLinkField HeaderText=”Movie Categories” DataTextField=”Name” DataNavigateUrlFields=”Id” DataNavigateUrlFormatString=”Details.aspx?id={0}” /> </Columns> </asp:GridView> <asp:SqlDataSource id=”srcMovieCategories” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT Id, Name FROM MovieCategories” Runat=”server” /> </div> </form> </body> </html> From the Library of Wow! eBook ptg 535 Using Fields with the GridView Control 11 LISTING 11.23 Details.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Details</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:GridView id=”grdMovies” DataSourceID=”srcMovies” Runat=”server” /> <asp:SqlDataSource id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT Title,Director FROM Movies WHERE CategoryId=@CategoryId” Runat=”server”> <SelectParameters> <asp:QueryStringParameter Name=”CategoryId” QueryStringField=”id” /> </SelectParameters> </asp:SqlDataSource> </div> </form> </body> </html> The page in Listing 11.22 includes a GridView control that contains HyperLinkField, which creates a link to the Details.aspx page and passes the movie category ID as a query string parameter. The HyperLinkField looks like this: <asp:HyperLinkField HeaderText=”Movie Categories” DataTextField=”Name” From the Library of Wow! eBook ptg 536 CHAPTER 11 Using the GridView Control DataNavigateUrlFields=”Id” DataNavigateUrlFormatString=”Details.aspx?id={0}” /> The DataNavigateUrlFields property represents the fields used with the DataNavigateFormatString, which plugs the value of the ID column from the DataNavigateUrlFields into the {0} placeholder. NOTE The DataNavigateUrlFields property accepts a comma-separated list of column names. You can use multiple placeholders in DataNavigateUrlFormatString. When you link to the page in Listing 11.23, the list of matching movies displays. The SqlDataSource control includes a QueryStringParameter that represents the movie cate- gory ID query string parameter. You also can use HyperLinkFields when working with frames. For example, the page in Listing 11.24 employs GridView to display a list of movies. The page also includes iframe (inline frame), which displays details for a particular movie; iframe displays the page contained in Listing 11.25 (see Figure 11.17). FIGURE 11.17 Displaying a single-page Master/Detail form. From the Library of Wow! eBook ptg 537 Using Fields with the GridView Control 11 LISTING 11.24 FrameMaster.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <style type=”text/css”> html { background-color:silver; } .content { width:500px; margin:auto; background-color:white; } .column { padding:10px; float:left; } #FrameDetails { width:100%; height:400px; } </style> <title>Frame Master</title> </head> <body> <form id=”form1” runat=”server”> <div class=”content”> <div class=”column”> <asp:GridView id=”grdMovies” DataSourceID=”srcMovies” AutoGenerateColumns=”false” Runat=”server”> <Columns> <asp:HyperLinkField HeaderText=”Movies” DataTextField=”Title” From the Library of Wow! eBook ptg 538 CHAPTER 11 Using the GridView Control DataNavigateUrlFields=”Id” DataNavigateUrlFormatString=”FrameDetails.aspx?id={0}” Target=”FrameDetails” /> </Columns> </asp:GridView> <asp:SqlDataSource id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT * FROM Movies” Runat=”server” /> </div> <div class=”column”> <iframe name=”FrameDetails” id=”FrameDetails”></iframe> </div> <br style=”clear:both” /> </div> </form> </body> </html> LISTING 11.25 FrameDetails.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Frame Details</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:DetailsView id=”dtlMovie” DataSourceID=”srcMovieDetails” Runat=”server” /> <asp:SqlDataSource From the Library of Wow! eBook ptg 539 Using Fields with the GridView Control 11 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> </div> </form> </body> </html> The HyperLinkField contained in Listing 11.24 includes a Target property, which contains the name of the iframe. When you click a movie link, the FrameDetails.aspx page opens in the named iframe. HyperLinkField supports the following properties: . DataNavigateUrlFields—Represents the field or fields from the data source to use with DataNavigateUrlFormatString. . DataNavigateUrlFormatString—Represents a format string that can be used to create the hyperlink. . DataTextField—Represents a field from the data source to use for the hyperlink label. . DataTextFormatString—Represents a format string that can be used to format the hyperlink label. . NavigateUrl—Represents a fixed link to another page. . Target—Represents the target of a link. Possible values include blank, parent, self, and top. You can also supply the name of a frame or iframe. . Text—Represents fixed text to display as the label for the hyperlink. Using ImageFields You use ImageField to display an image stored on the server’s hard drive. You can’t use ImageField to display images stored in a database table. The page in Listing 11.26 illustrates how you can use ImageField when creating a simple photo gallery (see Figure 11.18). From the Library of Wow! eBook ptg 540 CHAPTER 11 Using the GridView Control FIGURE 11.18 Using ImageField with the GridView control. LISTING 11.26 ShowImageField.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <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> From the Library of Wow! eBook ptg 541 Using Fields with the GridView Control 11 <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Show ImageField</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:GridView id=”grdImages” DataSourceID=”srcImages” AutoGenerateColumns=”false” ShowHeader=”false” Runat=”server”> <Columns> <asp:ImageField DataImageUrlField=”FileName” DataImageUrlFormatString=”~/Photos/{0}” DataAlternateTextField=”AltText” 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> <hr /> <asp:FormView id=”frmPhoto” DefaultMode=”Insert” DataSourceID=”srcImages” OnItemInserting=”frmPhoto_ItemInserting” Runat=”server”> <InsertItemTemplate> <h1>Add Photo</h1> <asp:Label From the Library of Wow! eBook ptg 542 CHAPTER 11 Using the GridView Control id=”lblPhoto” Text=”Photo:” AssociatedControlID=”upPhoto” Runat=”server” /> <br /> <asp:FileUpload id=”upPhoto” Runat=”server” /> <br /> <asp:Label id=”lblAltText” Text=”Alternate Text:” AssociatedControlID=”txtAltText” Runat=”server” /> <br /> <asp:TextBox id=”txtAltText” Text=’<%# Bind(“AltText”) %>’ Columns=”50” Runat=”server” /> <br /> <asp:Button id=”btnInsert” Text=”Add New Photo” CommandName=”Insert” Runat=”server” /> </InsertItemTemplate> </asp:FormView> </div> </form> </body> </html> The GridView in Listing 11.26 contains ImageField that looks like this: <asp:ImageField DataImageUrlField=”FileName” DataImageUrlFormatString=”~/Photos/{0}” DataAlternateTextField=”AltText” ControlStyle-Width=”200px” /> From the Library of Wow! eBook ptg 543 Using Fields with the GridView Control 11 The DataImageUrlField property contains the name of a field from the data source that represents the path to an image on the server hard drive. The DataImageUrlFormatString enables you to format this path. Finally, the DataAlternateTextField enables you to specify the value of the alt attribute used by the <img> tag. WEB STANDARDS NOTE Always supply an alt attribute for your <img> tags so that blind users of your web application can interpret an image’s meaning. In the case of purely decorative images, create an empty alt attribute (alt=””). An ImageField supports the following properties: . AlternateText—Enables you to specify fixed alternate text. . DataAlternateTextField—Enables you to specify a field that represents the alternate text. . DataAlternateTextFormatString—Enables you to format the alternate text. . DataImageUrlField—Enables you to specify a field that represents the image path. . DataImageUrlFormatString—Enables you to format the image path. . NullImageUrl—Enables you to specify an alternate image when the DataImageUrlField is Nothing (null). Using TemplateFields A TemplateField enables you to add any content to a GridView column that you need, which can contain HTML, DataBinding expressions, or ASP.NET controls. TemplateFields are particularly useful when you use GridView to edit database records. You can use TemplateField to customize the user interface and add validation to the fields being edited. For example, the page in Listing 11.27 contains a GridView that enables you to edit the records contained in the Movies database table. TemplateFields render the user interface for editing the movie title and category columns (see Figure 11.19). From the Library of Wow! eBook . = upPhoto.FileName; string savePath = MapPath(“~/Photos/” + upPhoto.FileName); // Save contents to file system upPhoto.SaveAs(savePath); } </script> From the Library of Wow! eBook ptg 541 Using. Control id=”lblPhoto” Text=”Photo:” AssociatedControlID=”upPhoto” Runat=”server” /> <br /> < ;asp: FileUpload id=”upPhoto” Runat=”server” /> <br /> < ;asp: Label id=”lblAltText” Text=”Alternate. void frmPhoto_ItemInserting(object sender, FormViewInsertEventArgs e) { // Get the FileUpload control FileUpload upPhoto = (FileUpload)frmPhoto.FindControl(“upPhoto”); srcImages.InsertParameters[“FileName”].DefaultValue