Professional ASP.NET 3.5 in C# and Visual Basic Part 21 pptx

For example, setting the Font-Boldattribute toTruecauses each item within the Panel control to adopt this attribute.. To see how it works, insert a PlaceHolder control into your page and

Trang 1

The advantage of using the Panel control to encapsulate a set of other elements is that you can manipulate

these elements as a single unit using one attribute set in the Panel control itself For example, setting the

Font-Boldattribute toTruecauses each item within the Panel control to adopt this attribute

The new addition to the Panel control is the capability to scroll with scrollbars that appear

automati-cally depending on the amount of information that Panel control holds You can even specify how the

scrollbars should appear

For an example of using scrollbars, look at a long version of the Lorem Ipsum text (found atwww.lipsum

com) and place that text within the Panel control, as shown in Listing 3-27

Listing 3-27: Using the new scrollbar feature with the Panel server control

<%@ Page Language="VB" %>

<html>

<head runat="server">

<title>Panel Server Control Page</title>

</head>

<body>

<form id="form1" runat="server">

<asp:Panel ID="Panel1" runat="server" Height="300" Width="300"

ScrollBars="auto">

<p>Lorem ipsum dolor sit amet </p>

</asp:Panel>

</form>

</body>

</html>

By assigning values to theHeightandWidthattributes of the Panel server control and using the

Scroll-Barsattribute (in this case, set toAuto), you can display the information it contains within the defined

area using scrollbars (see Figure 3-29)

As you can see, a single vertical scrollbar has been added to the set area of 300× 300 pixels The Panel

control wraps the text by default as required To change this behavior, use the newWrapattribute, which

takes aBooleanvalue:

<asp:Panel ID="Panel1" runat="server"

Height="300" Width="300" ScrollBars="Auto"

Wrap="False" />

Turning off wrapping may cause the horizontal scrollbar to turn on (depending on what is contained in

the panel section)

If you do not want to let the ASP.NET engine choose which scrollbars to activate, you can actually make

that decision by using theScrollBarsattribute In addition toAuto, its values includeNone,Horizontal,

Vertical, andBoth

Another interesting attribute that enables you to change the behavior of the Panel control is

Horizontal-Align It enables you to set how the content in the Panel control is horizontally aligned The possible

values of this attribute includeNotSet,Center,Justify,Left, andRight Figure 3-30 shows a collection

of Panel controls with different horizontal alignments

Trang 2

Figure 3-29

Center aligned Justified Left align Right align

Figure 3-30

It is also possible to move the vertical scrollbar to the left side of the Panel control by using theDirection attribute.Directioncan be set toNotSet,LeftToRight, andRightToLeft A setting ofRightToLeftis

ideal when you are dealing with languages that are written from right to left (some Asian languages, for example) However, that setting also moves the scrollbar to the left side of the Panel control If the scroll-bar is moved to the left side and theHorizontalAlignattribute is set toLeft, your content resembles

Figure 3-31

Trang 3

Figure 3-31

The PlaceHolder Ser ver Control

The PlaceHolder server control works just as its name implies — it is a placeholder for you to interject

objects dynamically into your page Think of it as a marker with which you can add other controls The

capability to add controls to a page at a specific point also works with the Panel control

To see how it works, insert a PlaceHolder control into your page and then add controls to it from your

server-side code in the manner shown in Listing 3-28

Listing 3-28: Using PlaceHolder to add controls to a page dynamically

VB

Dim NewLabelControl As New Label()

NewLabelControl.Text = "Hello there"

PlaceHolder1.Controls.Add(NewLabelControl)

C#

Label NewLabelControl = new Label();

NewLabelControl.Text = "Hello there";

PlaceHolder1.Controls.Add(NewLabelControl);

This example creates a new instance of a Label control and populates it with a value before it is

added to the PlaceHolder control You can add more than one control to a single instance of a

PlaceHolder control

Trang 4

BulletedList Ser ver Control

One common HTML Web page element is a collection of items in a bulleted list The BulletedList server control is meant to display a bulleted list of items easily in an ordered (using the HTML<ol>element)

or unordered (using the HTML<ul>element) fashion In addition, the control can determine the style used for displaying the list

The BulletedList control can be constructed of any number of<asp:ListItem>controls or can be

data-bound to a data source of some kind and populated based upon the contents retrieved Listing

3-29 shows a bulleted list in its simplest form

Listing 3-29: A simple BulletedList control

<html xmlns="http://www.w3.org/1999/xhtml">

<title>BulletedList Server Control</title>

</head>

<body>

<asp:BulletedList ID="Bulletedlist1" runat="server">

<asp:ListItem>United States</asp:ListItem>

<asp:ListItem>United Kingdom</asp:ListItem>

<asp:ListItem>Finland</asp:ListItem>

<asp:ListItem>Russia</asp:ListItem>

<asp:ListItem>Sweden</asp:ListItem>

<asp:ListItem>Estonia</asp:ListItem>

</asp:BulletedList>

</form>

</body>

</html>

The use of the<asp:BulletedList>element, along with<asp:ListItem>elements, produces a simple bulleted list output like the one shown in Figure 3-32

Figure 3-32

Trang 5

The BulletedList control also enables you to easily change the style of the list with just one or two

attributes TheBulletStyleattribute changes the style of the bullet that precedes each line of the list

It has possible values ofNumbered,LowerAlpha,UpperAlpha,LowerRoman,UpperRoman,Disc,Circle,

Square,NotSet, andCustomImage Figure 3-33 shows examples of these styles (minus theCustomImage

setting that enables you to use any image of your choice)

Figure 3-33

You can change the starting value of the first item in any of the numbered styles (Numbered,

LowerAl-pha,UpperAlpha,LowerRoman,UpperRoman) by using theFirstBulletNumberattribute If you set the

attribute’s value to5when you use theUpperRomansetting, for example, you get the format illustrated in

Figure 3-34

Trang 6

Figure 3-34

To employ images as bullets, use theCustomImagesetting in the BulletedList control You must also use theBulletImageUrlattribute in the following manner:

<asp:BulletedList ID="Bulletedlist1" runat="server"

BulletStyle="CustomImage" BulletImageUrl="~/myImage.gif">

Figure 3-35 shows an example of image bullets

Figure 3-35

The BulletedList control has an attribute calledDisplayMode, which has three possible values:Text,

HyperLink, andLinkButton.Textis the default and has been used so far in the examples UsingText

means that the items in the bulleted list are laid out only as text.HyperLinkmeans that each of the items

is turned into a hyperlink — any user clicking the link is redirected to another page, which is specified

by the<asp:ListItem>control’sValueattribute A value ofLinkButtonturns each bulleted list item

into a hyperlink that posts back to the same page It enables you to retrieve the selection that the end user makes, as illustrated in Listing 3-30

Trang 7

Listing 3-30: Using the LinkButton value for the DisplayMode attribute

VB

<%@ Page Language="VB"%>

<script runat="server">

Protected Sub BulletedList1_Click(ByVal sender As Object, _

ByVal e As System.Web.UI.WebControls.BulletedListEventArgs)

Label1.Text = "The index of item you selected: " & e.Index & _

"<br>The value of the item selected: " & _

BulletedList1.Items(e.Index).Text End Sub

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >

</head>

<body>

<asp:BulletedList ID="BulletedList1" runat="server"

OnClick="BulletedList1_Click" DisplayMode="LinkButton">

<asp:ListItem>United States</asp:ListItem>

<asp:ListItem>United Kingdom</asp:ListItem>

<asp:ListItem>Finland</asp:ListItem>

<asp:ListItem>Russia</asp:ListItem>

<asp:ListItem>Sweden</asp:ListItem>

<asp:ListItem>Estonia</asp:ListItem>

<asp:Label ID="Label1" runat="server">

</asp:Label>

</form>

</body>

</html>

C#

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

protected void BulletedList1_Click(object sender,

System.Web.UI.WebControls.BulletedListEventArgs e)

{

Label1.Text = "The index of item you selected: " + e.Index +

"<br>The value of the item selected: " +

BulletedList1.Items[e.Index].Text;

}

</script>

In this example, theDisplayModeattribute is set toLinkButton, and theOnClickattribute is used to point

to theBulletedList1_Clickevent.BulletedList1_Clickuses theBulletedListEventArgsobject,

which only exposes theIndexproperty Using that, you can determine the index number of the item

selected

Trang 8

You can directly access theTextvalue of a selected item by using theItemsproperty, or you can use the same property to populate an instance of theListItemobject, as shown here:

VB

Dim blSelectedValue As ListItem = BulletedList1.Items(e.Index)

C#

ListItem blSelectedValue = BulletedList1.Items[e.Index];

Now that you have seen how to create bulleted lists with items that you declaratively place in the code, look at how to create dynamic bulleted lists from items that are stored in a data store The following

example shows how to use the BulletedList control to data-bind to results coming from a data store; in it, all information is retrieved from an XML file

The first step is to create the XML in Listing 3-31

Listing 3-31: FilmChoices.xml

<?xml version="1.0" encoding="utf-8"?>

<FilmChoices>

<Film

Title="Close Encounters of the Third Kind"

Year="1977"

Director="Steven Spielberg" />

<Film

Title="Grease"

Year="1978"

Director="Randal Kleiser" />

<Film

Title="Lawrence of Arabia"

Year="1962"

Director="David Lean" />

</FilmChoices>

To populate the BulletedList server control with theTitleattribute from theFilmChoices.xmlfile, use

an XmlDataSource control to access the file, as illustrated in Listing 3-32

Listing 3-32: Dynamically populating a BulletedList server control

</head>

<body>

<asp:BulletedList ID="BulletedList1" runat="server"

DataSourceID="XmlDataSource1" DataTextField="Title">

<asp:XmlDataSource ID="XmlDataSource1" runat="server"

DataFile="~/FilmChoices.xml" XPath="FilmChoices/Film">

Trang 9

</form>

</body>

</html>

In this example, you use theDataSourceIDattribute to point to the XmlDataSource control (as you would

with any control that can be bound to one of the data source controls) After you are connected to the data

source control, you specifically point to theTitleattribute using theDataTextFieldattribute After the

two server controls are connected and the page is run, you get a bulleted list that is completely generated

from the contents of the XML file Figure 3-36 shows the result

Figure 3-36

The XmlDataSource server control has some limitations in that the binding to the BulletedList server

control worked in the previous example only because theTitlevalue was an XML attribute and not a

subelement The XmlDataSource control exposes XML attributes as properties only when databinding.

If you are going to want to work with subelements, then you are going to have to perform an XSLT

transform using the XmlDataSource control’sTransformFileattribute to turn elements into attributes.

HiddenF ield Ser ver Control

For many years now, developers have been using hidden fields in their Web pages to work with state

management The<input type="hidden">element is ideal for storing items that have no security

con-text to them These items are simply placeholders for data points that you want to store in the page itself

instead of using theSessionobject or intermingling the data with the view state of the page View state

is another great way to store information in a page, but many developers turn off this feature to avoid

corruption of the view state or possible degradation of page performance

Any time a hidden field is placed within a Web page, it is not interpreted in the browser in any fashion,

although it is completely viewable by end users if they look at the source of the HTML page

Listing 3-33 is an example of using the HiddenField server control to hold a GUID that can be used

from page to page simply by carrying over its value as the end user navigates through your

application

Trang 10

Listing 3-33: Working with the HiddenField server control

VB

<script runat="server" language="vb">

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)

HiddenField1.Value = System.Guid.NewGuid().ToString()

End Sub

</script>

<title>HiddenField Server Control</title>

</head>

<body>

<asp:HiddenField ID="HiddenField1" runat="Server" />

</form>

</body>

</html>

C#

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

protected void Page_Load(object sender, EventArgs e)

{

HiddenField1.Value = System.Guid.NewGuid().ToString();

}

</script>

In this example, thePage_Loadevent populates theHiddenField1control with a GUID You can see the hidden field and its value by looking at the source of the blank HTML page that is created You should see a result similar to the following (the GUID will have a different value, of course):

<input type="hidden" name="HiddenField1" id="HiddenField1"

value="a031e77c-379b-4b4a-887c-244ee69584d5" />

On the page postback, ASP.NET can detect whether the HiddenField server control has changed its

value since the last post This enables you to change the HiddenField value with client-side script and

then work with the changes in a page event

The HiddenField server control has an event calledValueChangedthat you can use when the value is

changed:

VB

Protected Sub HiddenField1_ValueChanged(ByVal sender As Object, _

ByVal e As System.EventArgs)

’ Handle event here

End Sub

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