Professional ASP.NET 3.5 in C# and Visual Basic Part 126 ppsx

Attribute Descriptiondesign time in the Property Browser under in the Property Browser that describes the purpose of the property shown in the Property Browser Property Browser DesignerS

Trang 1

Attribute Description

design time in the Property Browser

under in the Property Browser

that describes the purpose of the property

shown in the Property Browser

Property Browser

DesignerSerializationVisibility Specifies the visibility a property has to the design-time

serializer

NotifyParentProperty Indicates that the parent property is notified when the

value of the property is modified

PersistChildren Indicates whether, at design-time, the child controls of a

server control should be persisted as nested inner controls

PersistanceMode Specifies how a property or an event is persisted to the

ASP.NET page

TemplateContainer Specifies the type of INamingContainer that will contain the

template once it is created

edit its value

localized

to it

The Page Event Lifecycle

Before we talk about rendering HTML, you must understand the lifecycle of a Web page As the control developer, you are responsible for overriding methods that execute during the lifecycle and implement-ing your own custom renderimplement-ing logic

Remember that when a Web browser makes a request to the server, it is using HTTP, a stateless

protocol ASP.NET provides a page-execution framework that helps create the illusion of state in a Web application This framework is basically a series of methods and events that execute every time an

Trang 2

ASP.NET page is processed You may have seen diagrams showing this lifecycle for ASP.NET 1.0 Since

ASP.NET 2.0, a variety of additional events have been available to give you more power over the behavior

of the control Figure 26-6 shows the events and methods called during the control’s lifecycle

Many events and members are executed during the control’s lifecycle, but you should concentrate on the

more important among them

Rendering Services

The main job of a server control is to render some type of markup language to the HTTP output stream,

which is returned to and displayed by the client If your client is a standard browser, the control should

emit HTML; if the client is something like a mobile device, the control may need to emit a different type

of markup, such as WAP, or WML As I stated earlier, it is your responsibility as the control developer

to tell the server control what markup to render The overriddenRenderContentsmethod, called during

the control’s lifecycle, is the primary location where you tell the control what you want to emit to the

client In Listing 26-12, notice that theRenderContentsmethod is used to tell the control to print the

value of theTextproperty

Listing 26-12: Overriding the Render method

VB

Protected Overrides Sub RenderContents(ByVal output As HtmlTextWriter)

output.Write(Text)

End Sub

C#

protected override void RenderContents(HtmlTextWriter output)

{

output.Write(Text);

}

Also notice that theRenderContentsmethod has one method parameter calledoutput This parameter

is anHtmlTextWriterclass, which is what the control uses to render HTML to the client This special

writer class is specifically designed to emit HTML 4.0–compliant HTML to the browser The

HtmlTex-twriterclass has a number of methods you can use to emit your HTML, includingRenderBeginTagand

WriteBeginTag Listing 26-13 shows how you can modify the control’sRendermethod to emit an HTML

<input>tag

Listing 26-13: Using the HtmlTextWriter to render an HTML tag

VB

output.RenderBeginTag(HtmlTextWriterTag.Input)

output.RenderEndTag()

End Sub

C#

{

output.RenderBeginTag(HtmlTextWriterTag.Input);

output.RenderEndTag();

}

Trang 3

FrameworkInitialize AddParsedSubObject CreateControlCollection AddedControl Loop to add all

controls resident

on the page AddParsedSubObject

DeterminePostBakMode

PreInit Init TrackViewState InitComplete LoadPageFromPersistanceMedium

PreLoad Load RaisePostbackEvent LoadComplete PreRenderComplete PreRender SaveViewState SavePageToPersistanceMedium SaveStateComplete RenderControl VerifyRenderingServerForm

Unload

Figure 26-6

First, notice that theRenderBeginTagmethod is used to emit the HTML The advantage of using this

method to emit HTML is that it requires you to select a tag from theHtmlTextWriterTag

enumera-tion Using theRenderBeginTagmethod and theHtmlTextWriterTagenumeration enables you to have your control automatically support downlevel browsers that cannot understand HTML 4.0 syntax If a

downlevel browser is detected by ASP.NET, the control automatically emits HTML 3.2 syntax instead of HTML 4.0

Trang 4

Second, notice that theRenderEndTagmethod is also used As the name suggests, this method renders the

closing tag Notice, however, that you do not have to specify in this method which tag you want to close

TheRenderEndTagautomatically closes the last begin tag rendered by theRenderBeginTagmethod,

which in this case is the<input>tag If you want to emit multiple HTML tags, make sure you order

yourBeginandEndrender methods properly In Listing 26-14, for example, you add a<div>tag to the

control The<div>tag surrounds the<input>tag when rendered to the page

Listing 26-14: Using the HtmlTextWriter to render multiple HTML tags

VB

output.RenderBeginTag(HtmlTextWriterTag.Div)

End Sub

C#

{

output.RenderBeginTag(HtmlTextWriterTag.Div);

}

Now that you have a basic understanding of how to emit simple HTML, look at the output of your

control You can do this by viewing the test HTML page containing the control in a browser and choosing

View ➪ Source Figure 26-7 shows the source for the page

You can see that the control emitted some pretty simple HTML markup Also notice (in the highlighted

area) that the control was smart enough to realize that the input control did not contain any child controls

and, therefore, the control did not need to render a full closing tag Instead, it automatically rendered the

shorthand/>, rather than</input>

Adding Tag Attributes

Emitting HTML tags is a good start to building the control, but perhaps this is a bit simplistic Normally,

when rendering HTML you would emit some tag attributes (such asIDorName) to the client in addition

to the tag Listing 26-15 shows how you can easily add tag attributes

Listing 26-15: Rendering HTML tag attributes

VB

output.AddAttribute(HtmlTextWriterAttribute.Type, "text")

output.AddAttribute(HtmlTextWriterAttribute.Id, Me.ClientID & "_i")

output.AddAttribute(HtmlTextWriterAttribute.Name, Me.ClientID & "_i")

output.AddAttribute(HtmlTextWriterAttribute.Value, Me.Text)

Trang 5

End Sub

C#

{

output.AddAttribute(HtmlTextWriterAttribute.Type, "text");

output.AddAttribute(HtmlTextWriterAttribute.Id, this.ClientID + "_i");

output.AddAttribute(HtmlTextWriterAttribute.Name, this.ClientID + "_i");

output.AddAttribute(HtmlTextWriterAttribute.Value, this.Text);

}

Figure 26-7

Trang 6

You can see that by using theAddAttributemethod, you have added three attributes to the<input>

tag Also notice that, once again, you are using an enumeration,HtmlTextWriterAttribute, to select

the attribute you want to add to the tag This serves the same purpose as using theHtmlTextWriterTag

enumeration, allowing the control to degrade its output to downlevel browsers

As with theRendermethods, the order in which you place theAddAttributesmethods is important

You place theAddAttributesmethods directly before theRenderBeginTagmethod in the code The

AddAttributesmethod associates the attributes with the next HTML tag that is rendered by the

Render-BeginTagmethod — in this case the<input>tag

Now browse to the test page and check out the HTML source with the added tag attributes Figure 26-8

shows the HTML source rendered by the control

Figure 26-8

You can see that the tag attributes you added in the server control are now included as part of the HTML

tag rendered by the control

Trang 7

A Word about Control IDs

Notice that in Listing 26-11 it’s important to use the control’sClientIDproperty as

the value of both theIdandNameattributes Controls that derive from theWebControl

class automatically expose three different types of ID properties:ID,UniqueID, and

ClientID Each of these properties exposes a slightly altered version of the control’s ID

for use in a specific scenario

TheIDproperty is the most obvious Developers use it to get and set the control’s ID It

must be unique to the page at design time

TheUniqueIDproperty is a read-only property generated at runtime that returns an

ID that has been prepended with the containing control’s ID This is essential so that

ASP.NET can uniquely identify each control in the page’s control tree, even if the

con-trol is used multiple times by a container concon-trol such as a Repeater or GridView For

example, if you add this custom control to a repeater, theUniqueIDfor each custom

control rendered by the Repeater is modified to include the Repeater’s ID when the

page executed:

MyRepeater:Ctrl0:MyCustomControl

TheClientIDproperty is essentially identical to theUniqueIDproperty with one

important exception TheClientIDproperty always uses an underscore ( ) to

sep-arate the ID values, rather than using the value of theIdSeparatorproperty This is

because the ECMAScript standard disallows the use of colons in ID attribute values,

which is the default value of theIdSeparatorproperty Using the underscore ensures

that a control can be used by client-side JavaScript

Additionally, in order to ensure that controls can generate a unique ID, they should

implement the INamingContainer interface This is a marker interface only, meaning

that it does not require any additional methods to be implemented; it does, however,

ensure that the ASP.NET runtime guarantees the control always has a unique name

within the page’s tree hierarchy, regardless of its container

Styling HTML

So far, you have seen how easy it is to build a simple HTML control and emit the proper HTML,

including attributes In this section, we discuss how you can have your control render style

informa-tion As mentioned at the very beginning of this section, you are creating controls that inherit from

theWebControlclass Because of this, these controls already have the basic infrastructure for emitting

most of the standard CSS-style attributes In the Property Browser for this control, you should see a num-ber of style properties already listed, such as background color, border width, and font You can also

launch the style builder to create complex CSS styles These basic properties are provided by the WebCon-trolclass, but it is up to you to tell your control to render the values set at design time To do this, you simply execute theAddAttributesToRendermethod Listing 26-16 shows you how to do this

Trang 8

Listing 26-16: Rendering style properties

VB

Me.AddAttributesToRender(output)

End Sub

C#

{

this.AddAttributesToRender(output);

}

Executing this method tells the control to render any style information that has been set

Note that executing this method not only causes the style-related properties to be rendered, but also

several other attributes, includingID,tabindex, andtooltip If you are manually rendering these

attributes earlier in your control, then you may end up with duplicate attributes being rendered

Addi-tionally, be careful about where you use theAddAttributesToRendermethod In Listing 26-26, it is

executed immediately before theInputtag is rendered, which means that the attributes will be rendered

both on theInputelement and on theSpanelement surrounding the Input element

Try placing the method call before the beginning DIV tag is rendered, or after the DIV’s end tag is

rendered You will see that in the case of the former, the attributes are now applied to the DIV and

its surrounding span and in the case of the latter, only the SPAN has the attribute applied

Using the Property Browser, you can set the background color of the control toRedand the font toBold

When you set these properties, they are automatically added to the control tag in the ASP.NET page

After you have added the styles, the control tag looks like this:

<cc1:ServerControl1 BackColor="Red" Font-Bold=true

ID="ServerControl11" runat="server" />

Trang 9

The style changes have been persisted to the control as attributes When you execute this page in the

browser, the style information should be rendered to the HTML, making the background of the text box red and its font bold Figure 26-9 shows the page in the browser

Figure 26-9

Once again, look at the source for this page The style information has been rendered to the HTML as a style tag Figure 26-10 shows the HTML emitted by the control

Figure 26-10

Trang 10

If you want more control over the rendering of styles in your control you can use the HtmlTextWriters

AddStyleAttributemethod Similar to theAddAttributemethod, theAddStyleAttributemethod

enables you to specify CSS attributes to add to a control using theHtmlTextWriterStyleenumeration

However, unlike theAddAttributemethod, attributes added usingAddStyleAttributeare defined

inside of a style attribute on the control Listing 26-17 demonstrates the use of theAddStyleAttribute

method

Listing 26-17: Adding control styes using AddStyleAttribute

VB

output.AddStyleAttribute(HtmlTextWriterStyle.BackgroundColor, "Red")

End Sub

C#

{

output.AddStyleAttribute(HtmlTextWriterStyle.BackgroundColor, "Red");

}

Running this sample will result in the same red background color being applied to the control

Themes and Skins

A great feature added in ASP.NET 2.0, and introduced to you in Chapter 6, is themes and skins This

feature allows you to create visual styles for your Web applications In this section, you learn what you

need to know about themes and skins when creating a server control

As you saw in Chapter 6, skins are essentially a way to set default values for the UI elements of controls

in your Web application You simply define the control and its properties in a.skinfile and the values

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