ASP.NET 4 Unleased - p 57 pptx

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.23 Det

Trang 1

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

<title>Master</title>

</head>

<body>

<div>

<asp:GridView

id=”grdMovieCategories”

DataSourceID=”srcMovieCategories”

AutoGenerateColumns=”false”

Runat=”server”>

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

Trang 2

LISTING 11.23 Details.aspx

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

<title>Details</title>

</head>

<body>

<div>

<asp:GridView

id=”grdMovies”

DataSourceID=”srcMovies”

<asp:SqlDataSource

id=”srcMovies”

SelectCommand=”SELECT Title,Director FROM Movies

WHERE CategoryId=@CategoryId”

Runat=”server”>

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

Trang 3

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

Trang 4

LISTING 11.24 FrameMaster.aspx

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

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>

<asp:GridView

id=”grdMovies”

DataSourceID=”srcMovies”

Runat=”server”>

<asp:HyperLinkField

HeaderText=”Movies”

DataTextField=”Title”

Trang 5

DataNavigateUrlFormatString=”FrameDetails.aspx?id={0}”

Target=”FrameDetails” />

</Columns>

</asp:GridView>

<asp:SqlDataSource

id=”srcMovies”

SelectCommand=”SELECT * FROM Movies”

</div>

</div>

</div>

</form>

</body>

</html>

LISTING 11.25 FrameDetails.aspx

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<title>Frame Details</title>

</head>

<body>

<div>

<asp:DetailsView

id=”dtlMovie”

DataSourceID=”srcMovieDetails”

<asp:SqlDataSource

Trang 6

id=”srcMovieDetails”

SelectCommand=”SELECT Title, Director, InTheaters

FROM Movies WHERE Id=@MovieId”

Runat=”server”>

<asp:QueryStringParameter

Name=”MovieId”

QueryStringField=”id” />

</SelectParameters>

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

with DataNavigateUrlFormatString

create the hyperlink

label

hyperlink label

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)

Trang 7

FIGURE 11.18 Using ImageField with the GridView control

LISTING 11.26 ShowImageField.aspx

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

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>

Trang 8

<title>Show ImageField</title>

</head>

<body>

<div>

<asp:GridView

id=”grdImages”

DataSourceID=”srcImages”

ShowHeader=”false”

Runat=”server”>

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

<asp:Parameter Name=”FileName” />

</InsertParameters>

<hr />

<asp:FormView

id=”frmPhoto”

DefaultMode=”Insert”

DataSourceID=”srcImages”

OnItemInserting=”frmPhoto_ItemInserting”

Runat=”server”>

<h1>Add Photo</h1>

<asp:Label

Trang 9

id=”lblPhoto”

Text=”Photo:”

AssociatedControlID=”upPhoto”

<br />

<asp:FileUpload

id=”upPhoto”

<br />

<asp:Label

id=”lblAltText”

Text=”Alternate Text:”

AssociatedControlID=”txtAltText”

<br />

<asp:TextBox

id=”txtAltText”

Text=’<%# Bind(“AltText”) %>’

Columns=”50”

<br />

<asp:Button

id=”btnInsert”

Text=”Add New Photo”

CommandName=”Insert”

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

Trang 10

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:

text

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)

Định dạng
Số trang	10
Dung lượng	615,72 KB