ASP.NET 4 Unleased - p 33 potx

For example, the page in Listing 6.20 enables a user to select a favorite skin for a GridView control.. Summary A web User control enables you to build a new control from existing contro

Trang 1

For example, the page in Listing 6.20 enables a user to select a favorite skin for a GridView

control The GridView control displays a list of movies (see Figure 6.9)

FIGURE 6.9 Applying a Skin programmatically

LISTING 6.20 ShowDynamicSkin.aspx

<%@ Page Language=”C#” Theme=”DynamicSkin” %>

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

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

protected void Page_PreInit(object sender, EventArgs e)

{

if (Request[“skin”] != null)

{

switch (Request[“skin”])

{

case “professional”:

grdMovies.SkinID = “Professional”;

break;

case “colorful”:

Trang 2

break;

}

</script>

<title>Show Dynamic Skin</title>

</head>

<body>

<div>

<asp:GridView

id=”grdMovies”

DataSourceID=”srcMovies”

Runat=”server” />

<asp:SqlDataSource

id=”srcMovies”

ConnectionString=”<%$ ConnectionStrings:Movies %>”

SelectCommand=”SELECT Id,Title,Director FROM Movies”

<hr />

<a href=”showdynamicskin.aspx?skin=professional”>Professional</a>

 | 

<a href=”showdynamicskin.aspx?skin=colorful”>Colorful</a>

</div>

</form>

</body>

</html>

A hyperlink is used to select a particular Skin The Skin is applied to the GridView in the

PreInit event when a particular value is assigned to the GridView control’s SkinID

property

Of course, I don’t recommend doing this It makes more sense to use a CSS and modify a

control’s CssClass property This alternative approach is demonstrated by the page in

Listing 6.21

Trang 3

LISTING 6.21 ShowDynamicCSS.aspx

<%@ Page Language=”C#” Theme=”DynamicSkin” %>

protected void btnSubmit_Click(object sender, EventArgs e)

{

grdMovies.CssClass = ddlCssClass.SelectedItem.Text;

}

</script>

<title>Show Dynamic CSS</title>

</head>

<body>

<div>

<asp:GridView

id=”grdMovies”

DataSourceID=”srcMovies”

HeaderStyle-CssClass=”Header”

AlternatingRowStyle-CssClass=”Alternating”

GridLines=”none”

<asp:SqlDataSource

id=”srcMovies”

ConnectionString=”<%$ ConnectionStrings:Movies %>”

SelectCommand=”SELECT Id,Title,Director FROM Movies”

<hr />

<asp:Label

id=”lblCssClass”

Text=”Select Style:”

AssociatedControlID=”ddlCssClass”

<asp:DropDownList

id=”ddlCssClass”

Trang 4

<asp:ListItem Text=”Professional” />

<asp:ListItem Text=”Colorful” />

</asp:DropDownList>

<asp:Button

id=”btnSubmit”

Text=”Select”

Runat=”server” OnClick=”btnSubmit_Click” />

</div>

</form>

</body>

</html>

Note that in this code sample, unlike the previous one, you can use a DropDownList and

Button control to change the appearance of the GridView control when modifying the

CssClass property Because you can modify the CssClass property during any event

before the page is rendered, you can handle the Button Click event to modify the value

of the CssClass property (see Figure 6.10)

FIGURE 6.10 Modifying a CssClass programmatically

Trang 5

Summary

In this chapter, you learned how to create a consistent look for your website by taking

advantage of ASP.NET Themes In the first section, you learned how to modify the

appear-ance of controls in a page with Skins You learned how to create both Default and Named

Skins You also learned how to apply a Theme by using the Theme attribute and

StyleSheetTheme attribute

Next, you learned how to add Cascading Style Sheets to Themes I recommended that you

take advantage of Cascading Style Sheets and avoid Skins whenever possible

We also discussed how you can create Global Themes You learned how to create a Theme

that you can apply to every application executing on a web server

Finally, you learned how to dynamically apply Themes You learned how to use the

PreInit event to dynamically apply either an entire Theme or a particular Skin at runtime

Trang 6

Creating Custom Controls with User

Controls

Creating User Controls AJAX and User Controls Dynamically Loading User Controls

Summary

A web User control enables you to build a new control

from existing controls By taking advantage of User

controls, you can easily extend ASP.NET Framework with

your own custom controls

Imagine, for example, that you need to display the same

address form in multiple pages in a web application The

address form consists of several TextBox and Validation

controls for entering address information If you want to

avoid declaring all the TextBox and Validation controls in

multiple pages, you can wrap these controls inside a web

User control

Anytime you discover that you need to display the same

user interface elements in multiple pages, you should

consider wrapping the elements inside a User control By

taking advantage of User controls, you make your website

easier to maintain and extend

In this chapter, you learn how to build custom controls

with User controls by starting with the basics You learn

how to create a simple User control and expose properties

and events from the User control

You then examine how you can use AJAX with a User

control You learn how to modify the content displayed by

a User control without posting the page that contains the

User control back to the web server

Finally, you learn how you can load User controls

dynami-cally You learn how to load a User control at runtime and

inject the User control into a page In the final section of

this chapter, dynamically loaded User controls are used to

build a multipage wizard

Trang 7

Creating User Controls

Let’s start by building a simple User control that randomly displays one image from a

folder of images (see Figure 7.1) The code for the User control is contained in Listing 7.1

LISTING 7.1 RandomImage.ascx

<%@ Control Language=”C#” ClassName=”RandomImage” %>

<%@ Import Namespace=”System.IO” %>

void Page_Load()

{

string imageToDisplay = GetRandomImage();

imgRandom.ImageUrl = Path.Combine(“~/Images”, imageToDisplay);

lblRandom.Text = imageToDisplay;

}

FIGURE 7.1 Displaying an image with the RandomImage User control

Trang 8

string[] images = Directory.GetFiles(MapPath(“~/Images”), “*.jpg”);

string imageToDisplay = images[rnd.Next(images.Length)];

return Path.GetFileName(imageToDisplay);

}

</script>

<asp:Image

id=”imgRandom”

Width=”300px”

<br />

<asp:Label

id=”lblRandom”

VISUAL WEB DEVELOPER NOTE

You create a new User control in Visual Web Developer by selecting website, Add New

Item, and the Web User control item

The file in Listing 7.1 closely resembles a standard ASP.NET page Like a standard ASP.NET

page, the User control contains a Page_Load() event handler Also, the User control

contains standard controls such as ASP.NET Image and Label controls

User controls are closely related to ASP.NET pages Both the UserControl class and the

Page class derive from the base TemplateControl class Because they derive from the same

base class, they share many of the same methods, properties, and events

The important difference between an ASP.NET page and a User control is that a User

control is something you can declare in an ASP.NET page When you build a User control,

you build a custom control

The file in Listing 7.1 ends with the ascx extension You cannot request this file directly

from a web browser To use the RandomImage User control, you must declare the control in

an ASP.NET page

The page in Listing 7.2 contains the RandomImage User control When you open the page,

a random image displays

LISTING 7.2 ShowRandomImage.aspx

<%@ Page Language=”C#” %>

<%@ Register TagPrefix=”user” TagName=”RandomImage” Src=”~/RandomImage.ascx” %>

Trang 9

<title>Show RandomImage</title>

</head>

<body>

<div>

<user:RandomImage

ID=”RandomImage1”

</div>

</form>

</body>

</html>

Before you can use a web User control in a page, you must register it The page in Listing

7.2 includes a <%@ Register %> directive that contains the following three attributes:

TagPrefix—Indicates the namespace that you want to associate with the User

control for the current page You can use any string that you want

TagName—Indicates the name that you want to associate with the User control for

the current page You can use any string that you want

Src—Indicates the virtual path to the User control (the path to the ascx file)

The RandomImage User control is declared in the body of the page It looks like this:

<user:RandomImage ID=”RandomImage1” Runat=”Server” />

The declaration of the User control uses the TagPrefix and TagName specified in the <%@

Register %> directive Furthermore, you provide a User control with both an ID and a

Runat attribute, just as you would for any standard ASP.NET control

VISUAL WEB DEVELOPER NOTE

You can add a User control to a page in Visual Web Developer simply by dragging the

User control from the Solution Explorer window onto the Design surface The

<%@ Register %> directive is automatically added to the source of the page

Trang 10

Registering User Controls in the Web Configuration File

As an alternative to registering a User control in each page in which you need to use it by

using the <%@ Register %> directive, you can register a User control once for an entire

application You can register a User control in an application’s web configuration file

For example, the web configuration file in Listing 7.3 registers the RandomImage control for

the application

LISTING 7.3 Web.Config

<?xml version=”1.0”?>

<system.web>

<pages>

<add

tagPrefix=”user”

tagName=”RandomImage”

src=”~/UserControls/RandomImage.ascx”/>

</controls>

</pages>

</system.web>

</configuration>

After you register a User control in the web configuration file, you can simply declare the

User control in any page For example, the page in Listing 7.4 contains an instance of the

RandomImage User control, but it does not include the <%@ Register %> directive

LISTING 7.4 ShowAppRegister.aspx

<%@ Page Language=”C#” %>

<title>Show Application Register</title>

</head>

<body>

<div>

<user:RandomImage

ID=”RandomImage1”

Runat=”Server” />

Tiêu đề	Designing Websites with Themes
Trường học	University of Technology
Chuyên ngành	Computer Science
Thể loại	Essay
Năm xuất bản	2025
Thành phố	New York

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