Adrotator: To Create An Ad List As An XML File

You might also like

Download as pdf or txt
Download as pdf or txt
You are on page 1of 51

AdRotator

The AdRotator Web server control reads advertisement (Ad) information from a data source, which one or more add records. You can store add information in an XML file and then bind the AdRotator control to the file.All attributes of the AdRotator control are optional. The following attributes can be included in the XML files:

The AdRotator Properties


1. 2. 3. 4. 5. ImageUrl - The URL of the image to display. NavigateUrl - The URL of the page to navigate to when the AdRotator control is clicked. AlternateText - The text to display if the image is unavailable. Keyword - The category of the ad that can be used to filter for specific ads. Impressions - A numeric value that indicates the likelihood of how often the ad is displayed. The total of all impression values in the XML file may not exceed 2,048,000,000 - 1. All attributes are optional.

The AdRotator Class


Basically, the actual AdRotator class only provides a limited set of properties: <asp:AdRotator id="controlName" runat="server" AdvertisementFile="ads.xml" Target="_self"> </asp:AdRotator>

To create an ad list as an XML file


1. Create a new XML file in your Web site's App_Data folder. For extra security, give the file a file name extension other than .xml, such as .ads. 2. Create an Ad element inside the Advertisements element for each ad that you want to include in the ad list, and then save the file.

Example The following code example demonstrates how to use the AdvertisementFile property to specify the location of the XML file that contains advertisement information. <%@ Page Language="VB" AutoEventWireup="false" CodeFile="how-to-use-AdRotator.aspx.vb" Inherits="how_to_use_AdRotator" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

www.mappingminds.in

training@mappingminds.in

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>How to Use AdRotator</title> </head> <body> <form id="form1" runat="server"> <div> <asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="XML_Banner.xml" KeywordFilter="Learning"/> </div> </form> <p><a href="XML_Banner.xml" target="_blank">View XML file</a></p> </body> </html>> <Advertisements> <Ad> <ImageUrl>/banners/Installing.jpg</ImageUrl> <NavigateUrl> http://www.aspxcode.net/visual-web-developer-2008-express-tutorial.aspx </NavigateUrl> <AlternateText>aspxCode Learning</AlternateText> <Impressions>50</Impressions> <Keyword>Learning</Keyword> </Ad> <Ad> <ImageUrl>/banners/Learning.jpg</ImageUrl> <NavigateUrl> http://www.aspxcode.net/how-to-Installing-visual-web-developer-2008-expressedition.aspx </NavigateUrl>

www.mappingminds.in

training@mappingminds.in

<AlternateText>aspxCode Installing</AlternateText> <Impressions>50</Impressions> <Keyword>Learning</Keyword> </Ad> <Ad> <ImageUrl>/banners/Overview.jpg</ImageUrl> <NavigateUrl>Overview-visual-web-developer-2008.aspx</NavigateUrl> <AlternateText>aspxCode Installing</AlternateText> <Impressions>50</Impressions> <Keyword>Learning</Keyword> </Ad> </Advertisements>

Bulleted list
The Bulleted List control can display static text in a list that is either unordered (bulleted) or ordered (numbered).Use the Bulleted List control to do the following: Specify the appearance of the items and of the bullets or numbers in a list. Define the list items statically or by binding the control to data. Respond to user clicks on items.

Features
Customize the appearance of the bullets and numbers. Specify how each item in the list is rendered, such as a hyperlink, static text, or as a link button. Provide logic to perform application-specific tasks when a user clicks an item.

To add a BulletedList Web server control to a Web Forms page 1. From the Standard tab of the Toolbox, drag a BulletedList control onto the page. 2. In the Properties window, set the DisplayMode property to one of the following values to
specify how the control displays list items: o Text Items are displayed as plain text. o HyperLink Items are displayed as hyperlinks. o LinkButton Items are displayed as links that perform a postback. In the Properties window, set the BulletStyle property to specify whether the control displays items as bullets or as numbers. To create a numbered, or ordered, list, set the property to one of the following enumeration values: o Numbered o LowerAlpha o UpperAlpha

3.

www.mappingminds.in

training@mappingminds.in

o o

LowerRoman LowerRoman

To create a bulleted, or unordered, list, set the property to one of the following values: o o o Disc Circle Square

To display bullets as custom images, set the BulletStyle property to the URL of a graphic. The same graphic is displayed for each item.

Property
Text Value Selected

Description
Specifies the text displayed in the list. Specifies a value that is associated with an item but is not displayed. For example, you can set the Text property to the name of chemical element and the Value property to the symbol of the element. Indicates whether the item is selected. In a CheckBoxList control and in a multi-selection ListBox control, more than one item can be selected. In a DropDownList control, RadioButtonList control, and single-selection ListBox control, only one item can be selected at a time. If you set more than one selected item in these controls, the browser determines which item is rendered as selected. In a BulletedList control, this setting has no effect.

Calendar
The Calendar Web server control can be used to display selectable dates in a calendar and to display data associated with specific dates. You can use the Calendar Web server control to do the following: Display and select dates The control displays a calendar through which users can move to any day in any year. Setting the SelectedDate property causes a specific date to be highlighted in the control. Optionally, users can move to arbitrary dates by clicking a day or moving from month to month. The calendar can be configured to enable users to select multiple dates, either a whole week or a whole month. A representation of the Calendar control displaying the month of October

www.mappingminds.in

training@mappingminds.in

Display appointments or other information in a calendar grid The Calendar control can display specific details for individual days, such as a to-do list, a schedule of events, or similar information. This feature enables you to display day information from a database.

You can use the Calendar control to do the following:


Capture user interaction such as when a user selects a date or a range of dates. Customize the calendar's appearance. Display information from a database in the calendar.

Type of date TodaysDate VisibleDate

Description
By default, this is set to match the current date on the server. However, you can adjust it so that the date appears correctly for a different locale. This date determines which month appears in the calendar. The user can move from month to month on the calendar, which changes the visible date without affecting today's date. You can navigate between months by setting the visible date programmatically. This is the date or date range that the user chooses. In the control, the user can select a single day, week, or month, but can only select contiguous dates. You can also programmatically set the selected dates. In that case, you can set non-contiguous selected dates.

SelectedDate, SelectedDates

The Calendar control is based on the DateTime object, and therefore supports the full range of dates that is allowed by that object. Effectively, you can display any date between the years 0 and 9999 A.D. On an ASP.NET page, the Calendar control is rendered as an HTML table. Therefore, some the control's properties pertain to various aspects of table formatting. A few of these properties are not

www.mappingminds.in

training@mappingminds.in

fully supported in some older browsers. Therefore, not all the formatting features will be available in those browsers.

Member
Calendar CalendarDay CalendarSelectionMode

Description
The main class for the control. The class that represents a date in the Calendar control. An enumeration that represents the date selection modes available in the Calendar control.

Set the control's SelectedDate property to an expression of type DateTime.

C# Code:Calendar1.SelectedDate = DateTime.Today; Calendar1.SelectedDate.ToString();

Changing General Calendar Appearance Set this property


Font, ForeColor, BackColor. Height, Width CellPadding, CellSpacing BorderColor BorderStyle (set to a BorderStyle enumeration value: Dotted, Dashed, Solid, and so on). ShowGridLines (true or false)

To specify
Font, text and background color Overall control size Margins and spacing around individual days Color, size, and style (for example, dotted) of border and grid lines

Changing Day-of-Week Display


By default, the names of the days of the week are displayed in a row at the top of the calendar. You can control the format of this row.

Set properties as listed in the following table. Set this property


ShowDayHeader (true or false) DayNameFormat (use a value in the

To
Enable or disable the row that deploys days of the week Specify the format of day names (for example, full

www.mappingminds.in

training@mappingminds.in

DayNameFormat enumeration: Full, Short, FirstLetter, FirstTwoLetters). FirstDayOfWeek (use a day defined in the FirstDayOfWeek enumeration. DayHeaderStyle, which incorporates style information.

day name or abbreviation) Specify which day starts the week (default is Sunday) Set color, font, border style and width, and so on

To specify that an individual day can be selected


1. In a method for the Calendar control's DayRender event, determine what day is being rendered by getting information from the Date property of the Day object. 2. Set that day's IsSelectable property to true. The following example shows how to set the date October 1, 2005, as selectable; all other dates are made not selectable. C# code: protected void Calendar1_DayRender(object sender, DayRenderEventArgs e) { DateTime myAppointment = new DateTime(2005,10,1); if (e.Day.Date == myAppointment) { e.Day.IsSelectable = true; } else { e.Day.IsSelectable = false; } }

To enable or disable user month navigation


Set the Calendar control's ShowNextPrevMonth property to true or false. If the property is false, the control does not display the LinkButton controls in the title that allow a user to move between months.

You can change the appearance of the month-navigation hyperlinks by setting the NextMonthText, PrevMonthText, NextPrevFormat, and NextPrevStyle properties.

To navigate months programmatically

www.mappingminds.in

training@mappingminds.in

Set the control's VisibleDate property to a date in the month you want to display. The date can be any day within that month but is typically set to the first day of the month. If the VisibleDate property is empty (if it is set to DateTime.Empty), the currently visible month is derived from the value of the TodaysDate property. The following example navigates to February, 2000:

Calendar1.VisibleDate = new DateTime(2000, 2, 1); (Changing the VisibleDate property has no effect on the values of the TodaysDate, SelectedDayStyle, or SelectedDates properties.)

To respond to a month navigation event


Create a method for the control's VisibleMonthChanged event. When this event is raised, the control has already changed the VisibleMonth property by 1. The VisibleMonthChanged event takes a single argument of type MonthChangedEventArgs. You can use the following properties of this argument to determine or override what the user is doing:

Property
PreviousDate

Description
The value of the month that was displayed before the user clicked a month-navigation button. You can compare the value of this property to that of the control's VisibleMonth property to determine the direction in which the user is navigating. To cancel the effect of the user's click, set the control's VisibleDate property to this value. The value of the month that the user has navigated to. The VisibleDate property is updated to this value before the VisibleMonthChanged event is raised.

NewDate

Example:Private void Calendar1_VisibleMonthChanged (object sender, System.Web.UI.WebControls.MonthChangedEventArgs e) { // Select the 10th and 25th of each month. Calendar1.SelectedDates.Clear(); Calendar1.SelectedDates.Add(new DateTime(e.NewDate.Year,e.NewDate.Month, 10)); Calendar1.SelectedDates.Add(new DateTime(e.NewDate.Year,e.NewDate.Month, 25)); }

To determine how many dates are selected

www.mappingminds.in

training@mappingminds.in

Get the value of the Count property of the SelectedDates collection, as shown in the following example.

private void Calendar1_SelectionChanged (object sender, System.EventArgs e) { Text1.Text = String.Format("You selected {0} date(s).", Calendar1.SelectedDates.Count); }

To get the date range of a multi-date selection 1. Get the count of selected dates using the Count property of the SelectedDates property.
2. Get the first date in the collection, and then get the last date by extracting the date at the index of the count minus one. The following example displays the first and last dates in text box controls on the page. private void Calendar1_SelectionChanged (object sender,System.EventArgs e) { SelectedDatesCollection theDates = Calendar1.SelectedDates; if (theDates.Count > 1) { DateTime firstDate = theDates[0]; DateTime lastDate = theDates[theDates.Count-1]; TextBox1.Text = firstDate.ToString(); TextBox2.Text = lastDate.ToString(); } }

Button
Use the ASP.NET button Web server controls to enable users to post a page to the server. The button controls trigger an event in server code that you can handle to respond to the postback. For example, a user can indicate that they have completed a form or that they want to perform a specific command. The Button control can also raise an event in client script that you can handle before the page is posted or that can run and then cancel submission of the page.

Methods Name
AddAttributesToRender AddedControl

Description
Infrastructure. Adds the attributes of the Button control to the output stream for rendering on the client. Called after a child control is added to the Controls collection of the

www.mappingminds.in

training@mappingminds.in

ApplyStyle BuildProfileTree CreateControlCollection ClearCachedClientID DataBind() DataBind(Boolean) Dispose EnsureID Equals(Object) Finalize FindControl(String) FindControl(String, Int32)

HasControls HasEvents OnClick OnCommand OnDataBinding OnInit OnLoad OnPreRender OnUnload OpenFile RenderContents SaveControlState ToString

Control object. Copies any nonblank elements of the specified style to the Web control, overwriting any existing style elements of the control. This method is primarily used by control developers. Infrastructure. Gathers information about the server control and delivers it to the Trace property to be displayed when tracing is enabled for the page. Creates a new ControlCollection object to hold the child controls (both literal and server) of the server control. Infrastructure. Sets the cached ClientID value to null. Binds a data source to the invoked server control and all its child controls. Binds a data source to the invoked server control and all its child controls with an option to raise the DataBinding event. Enables a server control to perform final clean up before it is released from memory. Creates an identifier for controls that do not have an identifier assigned. Determines whether the specified Object is equal to the current Object. Allows an Object to attempt to free resources and perform other cleanup operations before the Object is reclaimed by garbage collection. Searches the current naming container for a server control with the specified id parameter. Infrastructure. Searches the current naming container for a server control with the specified id and an integer, specified in the pathOffset parameter, which aids in the search. You should not override this version of the FindControl method. Determines if the server control contains any child controls. Returns a value indicating whether events are registered for the control or any child controls. Raises the Click event of the Button control. Raises the Command event of the Button control. Raises the DataBinding event. Raises the Init event. Raises the Load event. Determines whether the button has been clicked prior to rendering on the client. Raises the Unload event. Gets a Stream used to read a file. Renders the contents of the control to the specified writer. Saves any server control state changes that have occurred since the time the page was posted back to the server. Returns a String that represents the current Object.

www.mappingminds.in

training@mappingminds.in

Events Name
Click Command DataBinding Disposed Init Load PreRender Unload

Description
Occurs when the Button control is clicked. Occurs when the Button control is clicked. Occurs when the server control binds to a data source. Occurs when a server control is released from memory, which is the last stage of the server control lifecycle when an ASP.NET page is requested. Occurs when the server control is initialized, which is the first step in its lifecycle. Occurs when the server control is loaded into the Page object. Occurs after the Control object is loaded but prior to rendering. Occurs when the server control is unloaded from memory.

To respond to a button event


Create an event handler for one of the following events: The page's Page_Load event. Because the button always posts the page to the server, this method will always run. Use the Page_Load event when it is not important which button was clicked, only that the form was submitted. The button's Click event. Write an event handler for this event when it is important to know which button was clicked. public void Button1_Click (object sender, System.EventArgs e) { Label1.Text="You clicked a button."; }

Checkbox
Create an event handler for the control's Checked Changed event. By default, the Checked Changed event does not immediately cause the page to be posted to the server. Instead, the event is raised in server code the next time the form is posted. To have the Checked Changed event cause an immediate posting, set the Checkbox control's AutoPostBack property to true.

Example <%@ Page Language="C#" AutoEventWireup="true" CodeFile="how-to-user-selection-checkboxc.aspx.cs" Inherits="how_to_user_selection_checkbox_c" %>

www.mappingminds.in

training@mappingminds.in

<!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 runat="server"> <title>How to Selectiona CheckBox</title> </head> <body> <form id="form1" runat="server"> <div> <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" Text="Please Choose" oncheckedchanged="CheckBox1_CheckedChanged1" /> </div> </form> </body> </html> protected void CheckBox1_CheckedChanged1(object sender, EventArgs e) { if ((CheckBox1.Checked == true)) { Response.Write("CheckBox1 Selection"); } else

www.mappingminds.in

training@mappingminds.in

{ Response.Write(""); } }

Link Button
Renders as a hyperlink in the page. However, it contains client-side script that causes the form to be posted back to the server. (You can create a true hyperlink by using the Hyperlink Web server control.) Example:<body> <form id="form1" runat="server"> <h3>LinkButton Example</h3> <asp:Button id="Button1" Text="Create and Show a LinkButton" OnClick="Button_Click" runat="server"/> </form> </body>

LinkButton Controls and Validation


By default, page validation is performed when a LinkButton control is clicked. Page validation determines whether the input controls associated with a validation control on the page all pass the validation rules specified by the validation control. To prevent page validation from occurring, set the CausesValidation property to false.

Declarative Syntax
<asp:LinkButton AccessKey="string" BackColor="color name|#dddddd" BorderColor="color name| #dddddd" BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge| Inset|Outset" BorderWidth="size" CausesValidation="True|False" CommandArgument="string" CommandName="string" CssClass="string" Enabled="True|False" EnableTheming="True|False" EnableViewState="True|False" Font-Bold="True|False" Font-Italic="True|False" Font-Names="string" Font-Overline="True|False" Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|Medium|Large|X-Large|XX-Large" Font-Strikeout="True|False" Font-Underline="True|False" ForeColor="color name|#dddddd"

www.mappingminds.in

training@mappingminds.in

Height="size" ID="string" OnClick="Click event handler" OnClientClick="string" OnCommand="Command event handler" OnDataBinding="DataBinding event handler" OnDisposed="Disposed event handler" OnInit="Init event handler" OnLoad="Load event handler" OnPreRender="PreRender event handler" OnUnload="Unload event handler" PostBackUrl="uri" runat="server" SkinID="string" Style="string" TabIndex="integer" Text="string" ToolTip="string" ValidationGroup="string" Visible="True|False" Width="size" />

ImageButton
Renders a graphic as a button. This is useful for presenting a rich button appearance. The Image Button control also provides information about the coordinates within the graphic where has clicked.

Use the ImageButton control to display an image that responds to mouse clicks.
Both the Click and Command events are raised when the ImageButton control is clicked.You can use the OnCommand event handler to make the ImageButton control behave like a Command button. A command name can be associated with the control by using the CommandName property. This allows multiple ImageButton controls to be placed on the same Web page. The value of the CommandName property can then be programmatically identified in the OnCommand event handler to determine the appropriate action to perform when each ImageButton control is clicked. The CommandArgument property can also be used to pass additional information about the command, such as specifying ascending order.Using the ImageButton control is similar to using the ASP.NET Button control. Example:<asp:ImageButton AlternateText="string" CausesValidation="True|False" DescriptionUrl="uri" Height="size" ID="string" ImageAlign="NotSet|Left|Right|Baseline|Top|Middle|Bottom| AbsBottom|AbsMiddle|TextTop" ImageUrl="uri" PostBackUrl="uri" runat="server" ToolTip="string" Width="size" />

CheckBox and CheckBoxList


You can use two types of Web server controls to add check boxes to an ASP.NET Web page: individual CheckBox controls or a CheckBoxList control. Both controls provide a way for users to specify yes/no (true/false) choices. You add individual CheckBox controls to a page and work with them singly. Alternatively, you can use the CheckBoxList control, which is a single control that acts as a parent control for a collection of check-box list items. It derives from the base ListControl class, and therefore works much like the ListBox, DropDownList, RadioButtonList, and BulletedList Web server controls. Many of the

www.mappingminds.in

training@mappingminds.in

procedures for working with the CheckBoxList control are the same as the procedures for the other list server controls. Both types of controls have advantages. By using individual CheckBox controls, you get more control over the layout of the check boxes on the page than by using the CheckBoxList control. For example, you can include non-check-box text between each check box. You can also control the font and color of individual check boxes. The CheckBoxList control is a better choice if you want to create a series of check boxes from data in a data source. (You can bind an individual CheckBox control to data.)

Features
You can use the CheckBox control and the CheckBoxList control to: Cause a page postback when a check box is selected. Capture user interaction when a user selects a check box. Bind each check box to data from a database.

AutoPostBack Property :
Gets or sets a value indicating whether the CheckBox state automatically posts back to the server when clicked. <asp:CheckBox AutoPostBack="True|False" />

Property Value
Type: System.Boolean true to automatically post the state of the CheckBox control to the server when it is clicked; otherwise, false. The default is false. Example:<asp:CheckBox id="checkbox1" runat="server" AutoPostBack="True" Text="Include 8.6% sales tax" TextAlign="Right" OnCheckedChanged="Check_Clicked"/> C# code: protected void CheckBox1_CheckedChanged(object sender,EventArgs e) { Label1.Text = "CheckBox1 selection is: " + CheckBox1.Checked.ToString(); }

Checked Property :

www.mappingminds.in

training@mappingminds.in

Gets or sets a value indicating whether the CheckBox control is checked. <asp:CheckBox Checked="True|False" />

Property Value
Type: System.Boolean true to indicate a checked state; otherwise, false. The default is false.

Properties Name
AutoPostBack Items SelectedIndex SelectedItem SelectedValue

Description
Gets or sets a value indicating whether a postback to the server automatically occurs when the user changes the list selection. Gets the collection of items in the list control. Gets or sets the lowest ordinal index of the selected items in the list. Gets the selected item with the lowest index in the list control. Gets the value of the selected item in the list control, or selects the item in the list control that contains the specified value.

Events
Name
DataBinding DataBound Disposed Init Load PreRender SelectedIndexChanged TextChanged Unload

Description
Occurs when the server control binds to a data source Occurs after the server control binds to a data source. Occurs when a server control is released from memory, which is the last stage of the server control lifecycle when an ASP.NET page is requested. Occurs when the server control is initialized, which is the first step in its lifecycle. Occurs when the server control is loaded into the Page object. Occurs after the Control object is loaded but prior to rendering. Occurs when the selection from the list control changes between posts to the server. Occurs when the Text and SelectedValue properties change. Occurs when the server control is unloaded from memory.

Specifying List Items


To specify items that you want to appear in the CheckBoxList control, place a ListItem element for each entry between the opening and closing tags of the CheckBoxList control.

www.mappingminds.in

training@mappingminds.in

The CheckBoxList control also supports data binding. To bind the control to a data source, first create a data source, such as one of the DataSourceControl objects, that contains the items to display in the control. Next, use the DataBind method to bind the data source to the CheckBoxList control. Use the DataTextField and DataValueField properties to specify which field in the data source to bind to the Text and Value properties of each list item in the control, respectively. The CheckBoxList control will now display the information from the data source. To determine the selected items in the CheckBoxList control, iterate through the Items collection and test the Selected property of each item in the collection.

Examples 1
<body> <form id="form1" runat="server"> <h3> CheckBoxList Example </h3> <!--Select items from the CheckBoxList.--> <asp:CheckBoxList id="checkboxlist1" AutoPostBack="True" CellPadding="5" CellSpacing="5" RepeatColumns="2" RepeatDirection="Vertical" RepeatLayout="Flow" TextAlign="Right" OnSelectedIndexChanged="Check_Clicked" runat="server"> <asp:ListItem>Item A </asp:ListItem> <asp:ListItem>Item B </asp:ListItem> <asp:ListItem>Item C </asp:ListItem> <asp:ListItem>Item D </asp:ListItem> <asp:ListItem>Item E </asp:ListItem> <asp:ListItem>Item F </asp:ListItem> </asp:CheckBoxList> </form> </body>

Example 2 Using foreach loop in CheckboxList Controls


protected void Button1_Clicked(object sender, System.EventArgs e) { Label1.Text = "You Selected:<br/>"; foreach (ListItem li in CheckBoxList1.Items) { if (li.Selected == true) { Label1.Text += li.Text + "<br/>"; } } }

www.mappingminds.in

training@mappingminds.in

RadioButton and RadioButtonList


The RadioButton control and the RadioButtonList control enable users to select from a small set of mutually exclusive, predefined choices. You can use two types of Web server controls to add radio buttons to an ASP.NET Web page: individual RadioButton controls or a RadioButtonList control. Both controls enable users to select from a small set of mutually exclusive, predefined choices. The controls enable you to define any number of radio buttons with labels and to arrange them horizontally or vertically. You add individual RadioButton controls to a page and work with them singly. The RadioButtonList control provides page developers with a single-selection radio button group that can be dynamically generated through data binding. It contains an Items collection with members that correspond to individual items on the list. To determine which item is selected, test the SelectedItem property of the list.

Features:
Cause a page postback when a radio button is selected. Capture user interaction when a user selects a radio button. Bind each radio button to data from a database.

The following table lists the classes that relate to the RadioButton and RadioButtonList controls. Member
RadioButton RadioButtonList ListItem Items

Description
The main class for the RadioButton control. The main class for the RadioButtonList control. The class that represents each item in RadioButtonList control. The collection of items that correspond to individual items in the list for a RadioButtonList control.

Example:<body> <h3>RadioButtonList Example</h3> <form id="form1" runat="server"> <asp:RadioButtonList id="RadioButtonList1" runat="server"> <asp:ListItem>Item 1</asp:ListItem> <asp:ListItem>Item 2</asp:ListItem>

www.mappingminds.in

training@mappingminds.in

<asp:ListItem>Item 3</asp:ListItem> <asp:ListItem>Item 4</asp:ListItem> <asp:ListItem>Item 5</asp:ListItem> <asp:ListItem>Item 6</asp:ListItem> </asp:RadioButtonList> <asp:CheckBox id="chkLayout" OnCheckedChanged="chkLayout_CheckedChanged" Text="Display Table Layout" Checked="true" AutoPostBack="true" runat="server" /> <asp:CheckBox id="chkDirection" OnCheckedChanged="chkDirection_CheckedChanged" Text="Display Horizontally" AutoPostBack="true" runat="server" /> <asp:Button id="Button1" Text="Submit" onclick="Button1_Click" runat="server"/> <asp:Label id="Label1" font-names="Verdana" font-size="8pt" runat="server"/> </form> </body>

How to set, change RadioButtonList ForeColor (font, text color) programmatically


protected void Button1_Click(object sender, System.EventArgs e) { RadioButtonList1.ForeColor = System.Drawing.Color.SteelBlue; } protected void Button2_Click(object sender, System.EventArgs e) { RadioButtonList1.ForeColor = System.Drawing.Color.DarkGreen; } <h2 style="color:Green">RadioButtonList: Change ForeColor</h2> <asp:Label ID="Label1" runat="server" Font-Bold="true" ForeColor="Crimson" Text="asp.net controls" > </asp:Label> <asp:RadioButtonList ID="RadioButtonList1" runat="server" Font-Bold="true" >

www.mappingminds.in

training@mappingminds.in

<asp:ListItem>PasswordRecovery</asp:ListItem> <asp:ListItem>BehaviorEditorPart</asp:ListItem> <asp:ListItem>ImportCatalogPart</asp:ListItem> <asp:ListItem>WebPartZone</asp:ListItem> <asp:ListItem>Login</asp:ListItem> </asp:RadioButtonList> <asp:Button ID="Button1" runat="server" Font-Bold="true" ForeColor="Crimson" Text="SteelBlue ForeColor" OnClick="Button1_Click"

/>

<asp:Button ID="Button2" runat="server" Font-Bold="true" ForeColor="Crimson" Text="DarkGreen ForeColor" OnClick="Button2_Click" />

HiddenField
The HiddenField control provides you with a way to store information in the page without displaying it. For example, you might store a user-preference setting in a HiddenField control so that it can be read in client script. To put information into a HiddenField control, you set its Value property to the value you want to store between postbacks. The information in a HiddenField control is not displayed when the browser renders the page. However, it can be read and set in client script. When the page is posted back, the contents of the HiddenField control, which includes any changes made in client script, are available in server code.

Features :
Store data in a hidden field on a page. Detect when data stored in the hidden field has changed between postbacks.

Example:
<asp:HiddenField id="HiddenField1" runat="server" value="1"/>

ValueChanged Event
The ValueChanged event is raised when the value of the HiddenField control changes between posts to the server. This allows you to provide an event-handling method that performs a custom routine whenever this event occurs. <script runat="server"> void ValueHiddenField_ValueChanged (Object sender, EventArgs e) { // Display the value of the HiddenField control. Message.Text = "The value of the HiddenField control is " + ValueHiddenField.Value + ".";

www.mappingminds.in

training@mappingminds.in

} </script> <body> <form id="Form1" runat="server"> Please enter a value and click the submit button. <asp:Textbox id="ValueTextBox" runat="server"/> <input type="submit" name="SubmitButton" value="Submit" onclick="PageLoad()" /> <asp:label id="Message" runat="server"/> <asp:hiddenfield id="ValueHiddenField onvaluechanged="ValueHiddenField_ValueChanged"" value="" runat="server"/> </form> </body>

<script type="text/javascript"> function PageLoad() { // Set the value of the HiddenField control with the // value from the TextBox. Form1.ValueHiddenField.value = Form1.ValueTextBox.value; } </script>

Value Property
Gets or sets the value of the hidden field. <asp:HiddenField Value="String" /> Type: System.String The value of the hidden field. The default is an empty string ("").

DropDownList
The DropDownList Web server control enables users to select a single item from a predefined drop-down list. The DropDownList Web server control enables users to select an item from a predefined list. It differs from the ListBox Web server control in that the list of items remains hidden until users click the drop-down button. In addition, the DropDownList control does not support multi-selection mode.

Features

www.mappingminds.in

training@mappingminds.in

You can use the DropDownList control to:


Use data-binding to specify the list of items to display. Determine which item is selected. Specify the selected item programmatically.

List Items
The DropDownList control is actually a container for the list items, which are of type ListItem. Each ListItem object is a separate object with its own properties. <asp:DropDownList id="ColorList" AutoPostBack="True" OnSelectedIndexChanged="Selection_Change runat="server"> <asp:ListItem Selected="True" Value="White"> White </asp:ListItem> <asp:ListItem Value="Silver"> Silver </asp:ListItem> <asp:ListItem Value="DarkGray">Dark Gray </asp:ListItem> <asp:ListItem Value="Khaki"> Khaki </asp:ListItem> <asp:ListItem Value="DarkKhaki">DarkKhaki</asp:ListItem> </asp:DropDownList>

HyperLink
The HyperLink Web server control creates links on a Web page that enables users to move from page to page in an application. The primary advantage of using a HyperLink control is that you can set link properties in server code. For example, you can dynamically change the link text or target page based on conditions in the page. Use the HyperLink control to create a link to another Web page. The HyperLink control is typically displayed as text specified by the Text property. It can also be displayed as an image specified by the ImageUrl property. If both the Text and ImageUrl properties are set, the ImageUrl property takes precedence. If the image is unavailable, the text in the Text property is displayed. In browsers that support ToolTip functionality, the Text property also becomes the ToolTip.

Note:If you need to create data-bound HyperLink controls, a convenient way to do so is to add them as children of these controls: Repeater, DataList, GridView, FormView, or DetailsView.

www.mappingminds.in

training@mappingminds.in

Example:
<body> <form id="Form1" runat="server"> <h3>HyperLink Example</h3> Click on the HyperLink:<br /> <asp:HyperLink id="hyperlink1" ImageUrl="images/pict.jpg" NavigateUrl="http://www.microsoft.com" Text="Microsoft Official Site Target="_new" runat="server"/> </form> </body>

The following example demonstrates how to create and initialize a new instance of the HyperLink class. void Page_Load(Object sender, EventArgs e) { HyperLink link = new HyperLink(); }

TextBox
The TextBox Web server control provides a way for users to type information into an ASP.NET Web page, including text, numbers, and dates. The TextBox server control is an input control that lets the user enter text. By default, the TextMode property of the control is set to TextBoxMode.SingleLine, which displays a singleline text box. However, you can set the TextMode property to TextBoxMode.MultiLine to display a multi-line text box (which renders as a textarea element). You can also change the TextMode property to TextBoxMode.Password to display a text box that masks user input. The text displayed in the TextBox control is available by using the Text property

TextBox Events
The TextBox control raises a TextChanged event when the user leaves the control. By default, the event is not raised immediately; instead, it is raised on the server when the page is submitted. However, you can specify that the TextBox control should submit the page to the server as soon as the user leaves the field.

You can get or set the value of a TextBox control at run time.

www.mappingminds.in

training@mappingminds.in

The following code example shows how you can read the value of one TextBox control called TextBox1 and use it to set the value of another, TextBox2. protected void Button1_Click(object sender, System.EventArgs e) { TextBox2.Text = Server.HtmlEncode(TextBox1.Text); }

To respond to changes in the TextBox control


Create an event handler for the TextBox control's TextChanged event. By default, the TextChanged event does not immediately cause the Web Forms page to be posted to the server. Instead, the event is raised in server code the next time the form is posted. To have the TextChanged event cause an immediate posting, set the TextBox control's AutoPostBack property to true. protected void TextBox1_TextChanged(object sender, EventArgs e) { Label1.Text = Server.HtmlEncode(TextBox1.Text); }

To create a password text box


1. Set the TextBox control's TextMode property to Password. In code, text modes are set using the TextBoxMode enumeration. 2. Set the size of the control by setting its Width property to a value in pixels or its Columns property to the number of characters to display. If you set both properties, Width takes precedence. Note -The Width property does not work in browsers that do not support cascading style sheet (CSS) styles. 3. Optionally, you can limit the number of characters the user is allowed to enter by setting the control's MaxLength property. If a user exceeds this number of characters, the control stops accepting more. Note -You might not want to set the MaxLength property, because it can be of use to unauthorized users who are trying to guess the password.

To create a multiline TextBox Web server control


1. Set the TextBox control's TextMode property to Multiline. In code, text modes are set using the TextMode enumeration.

www.mappingminds.in

training@mappingminds.in

2. Set the size of the control by setting the following properties: o Width to a value in pixels, or Columns to the number of characters to display. o Height to a value in pixels, or Rows to the number of rows. Note -The Height and Width properties do not work in browsers that do not support cascading style sheet (CSS) styles. 3. Setting these properties does not limit the number of characters or rows the user can enter, only how many are displayed. The control always displays a vertical scrollbar. Height and Width take precedence over Rows and Columns. <asp:TextBox id="TextBox1" style="Z-INDEX: 101; LEFT: 56px; OVERFLOW: hidden; POSITION: absolute; TOP: 72px" runat="server" TextMode="MultiLine"></asp:TextBox>

ListBox
The ListBox Web server control enables users to select one or more items from a predefined list. Use the ListBox Web server control when you want to display multiple items at once and to enable users to select one or more items from a predefined list. The ListBox control differs from a DropDownList control in that it can display multiple items at once and that it optionally enables the user to select multiple items.

Features
You can use the ListBox control to: Set the control to display a specific number of items. Set the size of the control in pixels. Use data-binding to specify the list of items to display. Determine which item or items are selected. Specify the selected item or items programmatically.

List Items
The ListBox control is a container for one or more list items. Each list item is an object of type ListItem with its own properties. To work with items programmatically, you work with the Items collection of the ListBox control. The Items collection is a standard collection, and you can add item objects to it, delete items, clear the collection, and so on.

www.mappingminds.in

training@mappingminds.in

The currently selected item is available in the ListBox control's SelectedItem property. If the control is set to single-selection mode, this property returns the one selected item. If the control is set to multi-selection mode, you get the selected items by looping through the entire Items collection and examining the Selected property of each item.

Constructors Name
ListItem() ListItem(String) ListItem(String, String) ListItem(String, String, Boolean)

Description
Initializes a new instance of the ListItem class. Initializes a new instance of the ListItem class with the specified text data. Initializes a new instance of the ListItem class with the specified text and value data. Initializes a new instance of the ListItem class with the specified text, value, and enabled data.

Single versus Multiple Selection


Users can normally select a single item in the list by clicking it. If you set the ListBox control to enable multiple selections, users can hold down the CTRL or SHIFT key while clicking to select multiple items.

Binding Data to the Control


You can use a ListBox Web server control to list options that are made available to the page using a data source control. Each item in the ListBox control corresponds to an item in the data source, typically an individual data record.

ListBox Events
The ListBox control raises the SelectedIndexChanged event when users select an item. By default, this event does not cause the page to be posted to the server, but you can cause the control to force an immediate postback by setting the AutoPostBack property to true.

To set the selection in a list 1. In the Properties window, click the ellipsis button ( ) for the Items property to open the 2.
ListItem Collection Editor dialog box. From the Members list, choose the member to be selected, and then set its Selected property to true.

www.mappingminds.in

training@mappingminds.in

3. If the control is set to allow multiple selections, repeat step 2 for each item to select, and then
click OK to close the dialog box. Set the control's SelectedIndex property to the index value of the item to select. The index is based. To set no selection, set SelectedIndex to -1. zero-

Example:
// Selects the third item ListBox1.SelectedIndex = 2; // Selects the item whose text is Apples ListItem li = ListBox1.Items.FindByText("Apples"); if(li != null) { li.Selected = true; }

To set multiple selections in a list


Protected void Button1_Click(object sender, System.EventArgs e) { // Counter int i = 0; foreach(ListItem li in ListBox1.Items) { if( (i%2) == 0) { li.Selected = true; } i += 1; } } The information in this topic applies to these list Web server controls: ListBox, DropDownList, CheckBoxList, and RadioButtonList.

To respond directly to changes in a list


Create an event handler for the control's SelectedIndexChanged event. By default, the SelectedIndexChanged event does not immediately cause the page to be posted to the server. Instead, the event is raised in server code the next time the form is posted. To have the SelectedIndexChanged event cause an immediate posting, set the control's AutoPostBack property to true.

Example:

www.mappingminds.in

training@mappingminds.in

Protected void DropDownList1_SelectedIndexChanged(object sender, System.EventArgs e) { Label1.Text = "You selected " + DropDownList1.SelectedItem.Text; }

Image
You can specify the graphics file for an Image control at design time or at run time programmatically. You can also bind the control's ImageUrl property to a data source to display graphics based on database information. Unlike most other Web server controls, the Image control does not support any events. For example, the Image control does not respond to mouse clicks. Instead, you can create an interactive image by using the ImageMap or the ImageButton Web server controls.

Specifying Text Elements


In addition to displaying a graphic, the Image control enables you to specify various types of text for the image, such as the following: ToolTip The text that is displayed in a tooltip in some browsers. AlternateText The text that is displayed if the graphics file cannot be found. If no ToolTip property is specified, some browsers will use the AlternateText value as a tooltip. If the GenerateEmptyAlternateText property is set to true, the alt attribute of the rendered image element will be set to an empty string.

The following table lists the classes that relate to the Image control. Member
Image ImageAlign

Description
The main class for the control. An enumeration that represents the alignment options for an image relative to the text of a Web page.

Examples : <%@ 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> <title>Image Example</title> <script language="C#" runat="server"> void Page_Load(Object sender, EventArgs e)

www.mappingminds.in

training@mappingminds.in

{ Image myImage = new Image(); myImage.AlternateText = "Image Text"; myImage.ImageUrl = "image1.jpg"; myImage.ImageAlign = ImageAlign.Left; Page.Controls.Add(myImage); } </script> </head> <body> <form id="form1" runat="server"> <h3>Image Example</h3> </form> </body> </html>

Properties Name
AlternateText

Description
Gets or sets the alternate text displayed in the Image control when the image is unavailable. Browsers that support the ToolTips feature display this text as a ToolTip. Gets or sets the location to a detailed description for the image. Gets or sets the height of the Web server control. Gets or sets the alignment of the Image control in relation to other elements on the Web page. Gets or sets the URL that provides the path to an image to display in the Image control. Gets or sets the width of the Web server control.

DescriptionUrl Height ImageAlign ImageUrl Width

The following example demonstrates how to use the ImageUrl property to specify the location of the image to display in the Image control. <body> <form id="form1" runat="server"> <h3>Image Example</h3> <asp:Image id="Image1" runat="server" AlternateText="Image text" ImageAlign="left" ImageUrl="images/image1.jpg"/> </form> </body>

www.mappingminds.in

training@mappingminds.in

ImageMap
The ASP.NET ImageMap control enables you to create an image that has individual regions that users can click, which are called hot spots. Each of these hot spots can be a separate hyperlink or postback event. The ImageMap control consists of two pieces. The first is an image, which can be a graphic in any standard Web graphic format, such as a .gif, .jpg, or .png file. The second element is a collection of HotSpot controls. Each hot-spot control is a different item that is of type CircleHotSpot, RectangleHotSpot, or PolygonHotSpot. For each hot-spot control, you define the coordinates that specify the location and size of the hot spot.

Class Reference Member


ImageMap CircleHotSpot RectangleHotSpot PolygonHotSpot

Description
The main class for the control. Represents an individual hotspot that is a circle. Represents an individual hotspot that is a rectangle. Represents an individual hotspot that is a polygon.

If the ImageMap control or an individual hot spot has been configured to go to a specific URL, you do not have an opportunity to respond directly to the click. However, if the control or hot spot is configured to perform a postback, you can write a handler for the event and determine which hot spot was clicked.

To respond to a user click in an ImageMap control


1. Add a Click event handler for the ImageMap control. The second argument of the handler must be of type ImageMapEventArgs. 2. In the event handler, read the PostBackValue property of the ImageMapEventArgs object to determine which hot spot was clicked.

Example :
<% @Page Language="C#" %> <script runat="server"> protected void ImageMap1_Click(object sender, ImageMapEventArgs e) { String region = ""; switch(e.PostBackValue) {

www.mappingminds.in

training@mappingminds.in

case "NW": region = "Northwest"; break; case "NE": region = "Northeast"; break; case "SE": region = "Southeast"; break; case "SW": region = "Southwest"; break; } Label1.Text = "You clicked the " + region + " region."; } </script> <html> <body> <form id="form1" runat="server"> <div> <asp:Label runat="server" ID="Label1" /> <asp:ImageMap ID="ImageMap1" ImageUrl="~/Images/MapTest.PNG" runat="server" HotSpotMode="PostBack" OnClick="ImageMap1_Click"> <asp:RectangleHotSpot Bottom="100" Right="100" HotSpotMode="PostBack" PostBackValue="NW" /> <asp:RectangleHotSpot Bottom="100" Left="100" Right="200" HotSpotMode="PostBack" PostBackValue="NE" /> <asp:RectangleHotSpot Bottom="200" Right="100" Top="100" PostBackValue="SW" /> <asp:RectangleHotSpot Bottom="200" Left="100" Right="200" Top="100" PostBackValue="SE" /> </asp:ImageMap> </div> </form> </body> </html>

To add an ImageMap control 1. From the Standard tab of the Toolbox, drag an ImageMap control onto the page. 2. In the Properties window, set the control's ImageUrl property to the URL of the graphic that
you want to display.

www.mappingminds.in

training@mappingminds.in

Note -Click the button in the property box to display the Select Image dialog box. 3. Optionally, set the control's HotSpotMode property to specify whether clicking the hotspot results in navigation to another page or in a postback.

Note -You can override the control-wide setting for each hotspot.

To define hotspots 1. In the Properties window, click the HotSpots property box to display the HotSpot Collection
Editor dialog box.

2. Click the arrow button next to the Add button to select the type of hotspot that you want to
create (CircleHotSpot, RectangleHotSpot, PolygonHotSpot). 3. For each hotspot, use the properties grid to specify the coordinates for the hotspot, as listed in the following table.

Hotspot Type
CircleHotSpot

Coordinates
Radius X Y

RectangleHotSpot

Top Bottom Left Right

PolygonHotSpot

Coordinates You specify coordinates as x/y pairs. For example, a triangle would consists of three pairs of x/y coordinates, as in 0,0;100,100;200,0.

If you want to override the control's HotSpotMode setting, set the HotSpotMode property for each hotspot to specify whether clicking the hotspot results in navigation to another page or in a postback. If a hotspot is set to navigate, specify its NavigateUrl property.

www.mappingminds.in

training@mappingminds.in

Examples :

If a hotspot is set to perform a postback, set the PostBackValue for the hotspot to provide information about which hotspot is clicked. You can read the value in the Click event handler. When you have finished defining hotspots, click OK.

The following code example demonstrates how to programmatically create an ImageMap control and add it to a page. <%@ page language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> void Page_Load (Object sender, EventArgs e) { // Programmatically create an ImageMap control. ImageMap Shop = new ImageMap(); // Set properties on the ImageMap control. Shop.ImageUrl = "Images/ShopChoice.jpg"; Shop.AlternateText = "Shopping choices"; // Add the ImageMap control to the // Controls collection of the page. Page.Controls.Add(Shop); // Programmatically create a CircleHotSpot object. CircleHotSpot Circle1 = new CircleHotSpot(); Circle1.HotSpotMode = HotSpotMode.Navigate; Circle1.NavigateUrl = "http://www.tailspintoys.com"; Circle1.X = 145; Circle1.Y = 120; Circle1.Radius = 75; Circle1.AlternateText = "Shop for toys"; // Add Circle1 to the ImageMap's HotSpotCollection. Shop.HotSpots.Add(Circle1); // Programmatically create a second CircleHotSpot object. CircleHotSpot Circle2 = new CircleHotSpot(); Circle2.HotSpotMode = HotSpotMode.Navigate; Circle2.NavigateUrl = "http://www.cohowinery.com"; Circle2.X = 145; Circle2.Y = 290; Circle2.Radius = 75; Circle2.AlternateText = "Shop for wine";

www.mappingminds.in

training@mappingminds.in

// Add Circle2 to the ImageMap's HotSpotCollection. Shop.HotSpots.Add(Circle2); } </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="head1" runat="server"> <title>ImageMap Class C# Constructor Example</title> </head> <body> <form id="form1" runat="server"> <h3>ImageMap Class C# Constructor Example</h3> <h4>Shopping Choices:</h4> </form> </body> </html>

Label
You can use the Label control to act as an active caption in front of a TextBox control or other control. Users can then press an access key to move to the control for which the Label control is the caption. For details, see How to: Use Label Web Server Controls as Captions.

The Label control provides one way to display text in an ASP.NET Web page. Other options include the following:
HTML markup If you want to display static text, you can present it using HTML; you do not need a Label control. Use a Label control only if you need to change the contents or other characteristics of the text in server code. TheLiteral control Like the Label control, the Literal control lets you programmatically display text in the page. However, the Literal control does not support style properties and does not support themes or skins.

Features
You can set the text of the Label control at design time or at run time in a program. You can also bind the Label control's Text property to a data source to display database information on a page.

Using Labels in List Controls

www.mappingminds.in

training@mappingminds.in

The Label control is often used in list Web server controls (such as the Repeater, DataList, GridView, DetailsView, and FormView controls) to display read-only information from a database. The usual strategy is to add a Label control to a template for one of these controls. You then bind the Label control to a data source. For details about templates, see ASP.NET Web Server Controls Templates.

To add a Label control to a Web Forms page 1. From the Standard tab of the Toolbox, drag a Label control onto the page. 2. In the Appearance category of the Properties window, set the control's Text property to the
text to display. You can include HTML formatting in the property; for example, you can format an individual word in the text as bold by placing a <b> tag around it in the Text property.

To use a Label control as a caption


1. Set the Label control's AssociatedControlID property to the ID of the control for which you want the Label control to be the caption. 2. Set the Label control's AccessKey property to a single letter or number to define an access key Note- If you associate the Label control with a button, when users simultaneously press the ALT key with the access key for the Label control, the button is clicked. 3. Optionally, set the Text property of the Label control to display an underlined character that indicates the access key. The following example shows how to use a Label control as a caption for a TextBox control. When the page renders, users will be able to press ALT+N to navigate to the text box. The letter N in the Label is underlined. <asp:Label AccessKey="N" AssociatedControlID="TextBox1" ID="Label1" runat="server" Text="<u>N</u>ame:"> </asp:Label>&nbsp; <asp:TextBox ID="TextBox1" runat="server" /> The following example shows how to create and initialize a new instance of the Label control. <%@ Page Language="C#" AutoEventWireup="True" %> <!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> <title>Label Example</title>

www.mappingminds.in

training@mappingminds.in

<script language="C#" runat="server"> void Button1_Click(Object Sender, EventArgs e) { Label myLabel = new Label(); myLabel.Text = "This is a new Label"; Page.Controls.Add(myLabel); } </script> </head> <body> <form id="form1" runat="server"> <h3>Label Example</h3> <asp:Button id="Button1" Text="Create and Show a Label" OnClick="Button1_Click" runat="server"/> </form> </body> </html>

Literal
The Literal control represents one of several options for adding content to a page. For static content, you can add markup directly to a page as HTML, without using a container. However, if you want to add content dynamically, you must add the content to a container. Typical containers are the Label control, the Literal control, the Panel control, and the PlaceHolder control. The Literal control differs from the Label control in that the Literal control does not add any HTML elements to the text. (The Label control renders a span element.) As a consequence, the Literal control does not support any style attributes, including position attributes. However, the Literal control enables you to specify whether content is encoded. The Panel and PlaceHolder controls render as div elements, which create discrete blocks in the page, unlike rendering in-line the way the Label and Literal controls do.

Encoding Content in the Literal Control


The Literal control supports the Mode property, which specifies how the control handles markup that you add to it. You can set the Mode property to these values:

www.mappingminds.in

training@mappingminds.in

Transform. Any markup that you add to the control is transformed to accommodate the protocol of the requesting browser. This setting is useful if you are rendering content to mobile devices that use protocol other than HTML. PassThrough. Any markup that you add to the control is rendered as-is to the browser. Encode. Any markup that you add to the control is encoded using the HtmlEncode method, which converts HTML encoding into its text representation. For example, a <b> tag is rendered as &lt;b&gt;. Encoding is useful when you want the browser to display markup rather than interpret it. Encoding is also useful for security, to help prevent malicious markup from being executed in the browser. It recommended if you are displaying strings from an untrusted source. For more information, see How to: Protect Against Script Exploits in a Web Application by Applying HTML Encoding to Strings.

To add a Literal Web server control to a Web Forms page 1. From the Standard tab of the Toolbox, drag a Literal control onto the page. 2. Optionally, in the Behavior category of the Properties window, set the Mode property to
Transform, PassThrough, or Encode. The Mode property specifies how the control handles any markup that is added to it. For details, see Literal Web Server Control Overview. The following example shows a simple Web page that displays a headline at run time. The body of the page, including the Literal control, might look like this. <body> <form runat="server"> <h1><asp:Literal id="Headline" runat=server mode="PassThrough"/></h1> </form> </body> 3. Add code to your page to set the control's Text property at run time.

Example:
<%@ Page Language="C#" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { Literal1.Text = "This <b>text</b> is inserted dynamically."; if (radioEncode.Checked == true) { Literal1.Mode = LiteralMode.Encode; } if(radioPassthrough.Checked == true) {

www.mappingminds.in

training@mappingminds.in

Literal1.Mode = LiteralMode.PassThrough; } } </script> <html> <head runat="server"></head> <body> <form id="form1" runat="server"> <div> <asp:RadioButton ID="radioEncode" runat="server" GroupName="LiteralMode" Checked="True" Text="Encode" AutoPostBack="True" /> <asp:RadioButton ID="radioPassthrough" runat="server" GroupName="LiteralMode" Text="PassThrough" AutoPostBack="True" /> <asp:Literal ID="Literal1"runat="server"> </asp:Literal> </div> </form> </body> </html>

FileUpload
The FileUpload control enables users to upload pictures, text files, or other files. The FileUpload control displays a text box where users can type the name of a file that they want to upload to the server. The control also displays a Browse button that displays a filenavigation dialog box. (The dialog box that is displayed depends on the operating system of the user's computer.) For security reasons, you cannot pre-load the name of a file into the FileUpload control.

Handling Uploaded Files


When users have selected a file to upload and then submitted the page, the file is uploaded as part of the request. The file is cached in its entirety in server memory. When the file has finished uploading, your page code runs. You can access the uploaded file in the following ways: As a byte array exposed in the FileUpload controls FileBytes property. As a stream exposed in the FileContent property.

www.mappingminds.in

training@mappingminds.in

As an object of type HttpPostedFile in the PostedFile property. The PostedFile object exposes properties, such as the ContentType and ContentLength properties, that provide you with information about the uploaded file. When your code runs, you can examine the characteristics of the file, such as its name, size, and MIME type, and you can then save it. You can work with the file as a byte array or stream. Alternatively, both the FileUpload control and the HttpPostedFile object support a SaveAs method that writes the file to disk. There is no inherent limitation on where you can save uploaded files. However, to save the file, the ASP.NET process must have permission to create files in the location that you specify. In addition, your application might be configured to require an absolute path (not a relative path) for saving the file, which is a security measure. If the requireRootedSaveAsPath attribute of the httpRuntime configuration element is set to true (which is the default), you must provide an absolute path when saving the uploaded file.

To upload a file with the FileUpload Web server control


1. Add a FileUpload control to the page.

Note -For security reasons, you cannot pre-load the name of a file into the FileUpload control. 2. In a handler for an event, such as the page's Load event, do the following: Check that the FileUpload control has an uploaded file by testing its HasFile property. Check the file name or MIME type of the file to make sure that users have uploaded a file that you want to accept. To check the MIME type, get the HttpPostedFile object exposed as the FileUpload control's PostedFile property. You can then get the MIME type by checking the posted file's ContentType property.

Remarks :
Use the FileUpload constructor to initialize a new instance of the FileUpload class. The FileUpload control does not automatically save a file to the server after the user selects the file to upload. You must explicitly provide a control or mechanism to allow the user to submit the specified file. For example, you can provide a button that the user clicks to upload the file.

MultiView and View


The MultiView control acts as an outer container for one or more View controls. The View controls, in turn, can contain any combination of markup and controls.

www.mappingminds.in

training@mappingminds.in

The MultiView control displays one View control at a time, exposing the markup and controls within that View control. By setting the MultiView control's ActiveViewIndex property, you can specify which View control is currently visible.

To add a MultiView Web server control to a Web Forms page 1. From the Standard tab of the Toolbox, drag a MultiView control onto the page. 2. From the Standard tab of the Toolbox, drag a View control into the MultiView control.
3. Type any static text that you want to add into the View control. To add controls to the View control, drag them from the Toolbox into the View control to create the layout you want. 4. Repeat step 2 and step 3 for each View control you want to create. 5. Set the MultiView control's ActiveViewIndex property to the index value of the View control to display. If you do not want to display any View controls, set the property to -1. 6. Add code to programmatically set the ActiveViewIndex property to set which View control is displayed. The following example shows how to work with a MultiView control. The page contains two View controls. The user clicks a RadioButton control, and in the CheckedChanged event handler for the button, code displays the appropriate View control by setting the ActiveViewIndex property. When the user clicks the Search button, code gets the value of the TextBox control in the appropriate View control.

Rendering View Control Content


If a View control is not selected, it is not rendered to the page. However, instances of all Web server controls in all the View controls are created each time the page is rendered, and their values are stored as part of the page's view state. Neither the MultiView control nor individual View controls render any markup to the page other than the contents of the current View control. For example, the controls do not render a div element in the same way that a Panel control does. They also do not support appearance properties that can be applied as a whole to the current View control. But you can assign a theme to the MultiView or View controls, which applies the theme to all child controls of the current View control.

Navigating Between Views


You can move between views by setting the MultiView control's ActiveViewIndex property to the index value of the View control to display. The MultiView control also includes support for navigation buttons that you can add to each View control.

www.mappingminds.in

training@mappingminds.in

To create navigation buttons, you can add a button control (Button, LinkButton, or ImageButton) to each View control. You can then set the CommandName and CommandArgument properties of each button to reserved values to cause the MultiView control to move to another view. The following table lists the reserved CommandName values and the corresponding CommandArgument values.

CommandName value
NextView PrevView SwitchViewByID SwitchViewByIndex

CommandArgument value
(no value) (no value) ID of the View control to switch to. Index number of the View control to switch to.

Example :
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0"> <asp:View ID="View1" runat="server"> <asp:Button ID="Button1" runat="server" CommandArgument="View2" CommandName="SwitchViewByID" Text="Go to View2" /> </asp:View> <asp:View ID="View2" runat="server"> <asp:Button ID="Button2" runat="server" CommandArgument="View3" CommandName="SwitchViewByID" Text="Go to View 3" /> </asp:View> <asp:View ID="View3" runat="server"> View 3<br /> <asp:Button ID="Button3" runat="server" CommandArgument="View1" CommandName="SwitchViewByID" Text="Go to View 1" /> </asp:View> </asp:MultiView>

The following table lists the classes that relate to the MultiView and View controls.

Member
MultiView ViewCollection View MultiViewControlBuilder

Description
The main class for the MultiView control. Represents a collection that enables a MultiView control to maintain a list of its child controls. The main class for the View control. Interacts with the parser to build a MultiView control. To create a custom control builder for a MultiView derived control, you need to

www.mappingminds.in

training@mappingminds.in

inherit from this class.

Example :
<%@ Page Language="C#" %> <script runat="server"> public enum SearchType { NotSet = -1, Products = 0, Category = 1 } protected void Button1_Click(Object sender, System.EventArgs e) { if(MultiView1.ActiveViewIndex > -1) { String searchTerm = ""; SearchType mSearchType = (SearchType) MultiView1.ActiveViewIndex; switch(mSearchType) { case SearchType.Products: DoSearch(textProductName.Text, mSearchType); break; case SearchType.Category: DoSearch(textCategory.Text, mSearchType); break; case SearchType.NotSet: break; } } } protected void DoSearch(String searchTerm, SearchType type) { // Code here to perform a search. } protected void radioButton_CheckedChanged(Object sender, System.EventArgs e) { if(radioProduct.Checked) { MultiView1.ActiveViewIndex = (int) SearchType.Products; }

www.mappingminds.in

training@mappingminds.in

else if(radioCategory.Checked) { MultiView1.ActiveViewIndex = (int) SearchType.Category; } } </script> <html> <head id="Head1" runat="server"></head> <body> <form id="form1" runat="server"> <div> Search by product or by category? <asp:RadioButton ID="radioProduct" runat="server" autopostback="true" GroupName="SearchType" Text="Product" OnCheckedChanged="radioButton_CheckedChanged" /> <asp:RadioButton ID="radioCategory" runat="server" autopostback="true" GroupName="SearchType" Text="Category" OnCheckedChanged="radioButton_CheckedChanged" /> <asp:MultiView ID="MultiView1" runat="server"> <asp:View ID="viewProductSearch" runat="server"> Enter product name: <asp:TextBox ID="textProductName" runat="server"> </asp:TextBox> </asp:View> <asp:View ID="viewCategorySearch" runat="server"> Enter category: <asp:TextBox ID="textCategory" runat="server"> </asp:TextBox> </asp:View> </asp:MultiView> <asp:Button ID="btnSearch" OnClick="Button1_Click" runat="server" Text="Search" /> </div> </form> </body> </html>

www.mappingminds.in

training@mappingminds.in

Localize
The Localize control is identical to the Literal Web server control and similar to the Label Web server control. Although the Label control lets you apply a style to the displayed text, the Localize control does not. You can programmatically control the text that is displayed in the Localize control by setting the Text property, which is inherited from the Literal control.

Encoding Content
The Localize control supports the Mode property, which specifies how the control handles markup that you add to it. You can set the Mode property to the following values: Transform Any markup that you add to the control is transformed to accommodate the protocol of the requesting browser. This setting is useful if you are rendering content to mobile devices that use a protocol other than HTML. PassThrough Any markup that you add to the control is rendered as-is to the browser. Encode Any markup that you add to the control is encoded using the HtmlEncode method, which converts HTML encoding into its text representation. For example, a <b> tag is rendered as &lt;b&gt;. Encoding is useful when you want the browser to display markup rather than interpret it. Encoding is also useful for security and to help prevent malicious markup from being executed in the browser. It is recommended if you are displaying strings from an untrusted source. For more information, see How to: Protect Against Script Exploits in a Web Application by Applying HTML Encoding to Strings.

To add a Localize Web server control to an ASP.NET Web page 1. From the Standard tab of the Toolbox, drag a Localize control onto the page.
2. Optionally, set the Mode property to Transform, PassThrough, or Encode. The Mode property specifies how the control handles markup that you add to it. For details, see Localize Web Server Control Overview. 3. Add code to your page to set the control's Text property at run time. The following code example shows how to programmatically set the text and encoding of the Localize control. The page contains radio buttons that allow the user to choose between encoded and pass-through text. For a code example that uses resource strings, see Localize Web Server Control Declarative Syntax. <%@ Page Language="C#" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { Localize1.Text = "This <b>text</b> is inserted dynamically.";

www.mappingminds.in

training@mappingminds.in

if (radioEncode.Checked == true) { Localize1.Mode = LiteralMode.Encode; } if(radioPassthrough.Checked == true) { Localize1.Mode = LiteralMode.PassThrough; } } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:RadioButton ID="radioEncode" runat="server" GroupName="LocalizeMode" Checked="True" Text="Encode" AutoPostBack="True" /> <asp:RadioButton ID="radioPassthrough" runat="server" GroupName="LocalizeMode" Text="PassThrough" AutoPostBack="True" /> <asp:Localize ID="Localize1" runat="server"></asp:Localize> </div> </form> </body> </html>

Panel
You can use the Panel control as a container for other controls. This is particularly useful when you are creating content programmatically and you need a way to insert the content into the page. The following sections describe additional ways that you can use the Panel control.

Custom Areas on the Page


You can use the Panel control to create areas on the page that have custom appearance and behavior, such as the following:

www.mappingminds.in

training@mappingminds.in

Creating a grouping box with title You can set the GroupingText property to display a title. When the page renders, the Panel control is displayed with a box around it that contains a title with the text you specify. Note- You cannot specify both scrollbars and grouping text in the Panel control. If you set grouping text, it takes precedence over scrollbars. Creating areas on the page with a custom color or other appearance The Panel control supports appearance properties such as BackColor and BorderWidth that you can set to create a unique look for a region on a page. Setting the GroupingText property automatically renders a border around the Panel control.

To add a Panel control to a Web Forms page 1. In Design view, from the Standard tab of the Toolbox, drag a Panel control onto the page.
2. To create static text, click inside the control and type. To add controls, drag them from the Toolbox into the Panel control. Note -To add static text to the Panel control at run time, you create a Literal control and set its Text property. You then programmatically add the Literal object to the panel the way you would any control. For details about adding controls. 3. Optionally, drag the panel's borders to resize the control. Note -The control automatically resizes itself to display all of its child controls, even if they exceed the height that you have set. 4. Optionally, set the properties of the Panel control, which are described in the following table, to specify how the pane interacts with its child controls.

Property
HorizontalAlign Wrap Direction ScrollBars GroupingText

Description
Specifies how the child controls are aligned within the panel (left, right, centered, or justified). Specifies whether content that is too wide for the panel is wrapped to the next line or truncated at the panel's edge. Specifies whether the content of the control renders left-to-right or right-to-left. This can be useful for creating areas on the page that have a different direction than the page as a whole. If you have set the Height and Width properties to constrain the Panel control to a specific size, you can add scrollbars by setting the ScrollBars property. Renders a border and title around the Panel control.

BackImageUrl Property
<asp:Panel BackImageUrl="String" />

www.mappingminds.in

training@mappingminds.in

<body> <h3>Panel Example</h3> <form id="form1" runat="server"> <asp:Panel id="Panel1" Height="200" Width="200" BackColor="Gainsboro" Wrap="True" HorizontalAlign="Right" runat="server"/> </form> </body>

PlaceHolder
The PlaceHolder Web server control lets you place an empty container control within the page and then dynamically add, remove, or loop through child elements at run time. The control renders only its child elements; it renders no markup of its own. For example, you might want to have a variable number of buttons appear on a Web page, depending on options selected by users. That way, users are not confronted with potentially confusing choices that are either unavailable or not relevant to their individual needs. You can create the buttons dynamically and then add them as children of a PlaceHolder control.

Class Reference Member


PlaceHolder PlaceHolderControlBuilder

Description
The main class for the control. The class that works with the parser to build a PlaceHolder control. To create a custom control builder for a PlaceHolderderived control, you to inherit from this class.

To add a PlaceHolder Web server control to a Web Forms page


From the Standard tab of the Toolbox, drag a PlaceHolder control onto the page.

To add child controls to a PlaceHolder control at run time


1. Create an instance of the control that you want to add to the PlaceHolder control.

www.mappingminds.in

training@mappingminds.in

2. Call the Add method of the PlaceHolder control's Controls property, passing it the instance
that you created in the previous step. The following example shows how to add two Button controls as children of a PlaceHolder control. The code also adds a Literal control in order to add a <br> tag between the buttons. void Page_Load(object sender, EventArgs e) { Button Button1 = new Button(); Button1.Text = "Button 1"; PlaceHolder1.Controls.Add(Button1); Literal Literal1 = new Literal(); Literal1.Text = "<br>"; PlaceHolder1.Controls.Add(Literal1); Button Button2 = new Button(); Button2.Text = "Button 2"; PlaceHolder1.Controls.Add(Button2); }

Substitution
When an ASP.NET page is cached, by default the entire output of the page is cached. On the first request, the page runs and caches its output. On subsequent requests, the request is fulfilled from the cache and code on the page does not run. In some circumstances, you might want to cache an ASP.NET page but update selected portions of the page on every request. For example, you might want to cache the majority of a page but be able to dynamically update time-sensitive information on the page. You can use the Substitution control to insert dynamic content into the cached page. The Substitution control does not render any markup. Instead, you bind the control to a method on the page or on a parent user control. You create a static method that returns the information that you want to insert into the page. The method called by the Substitution control must meet the following criteria: It must be a static method (shared in Visual Basic). It must accept a parameter of type HttpContext. It must return a value of type String.

www.mappingminds.in

training@mappingminds.in

Other controls on the page are not accessible to the Substitution controlthat is, you cannot examine or change the value of other controls. However, the code does have access to the current page context by using the parameter passed to it. When the page runs, the Substitution control calls the method and then substitutes the return value from the method for the Substitution control on the page.

Code Examples :
The following example shows how to use the Substitution control to create dynamically updated content on a cached page. Code in the page's Load event updates a Label control with the current time. Because the page's cache duration is set to 60 seconds, the text of the Label control does not change even if the page is requested multiple times during the 60second period. A Substitution control on the page calls the static method GetTime, which returns the current time as a string. Every time that the page is refreshed, the value represented by the Substitution control is updated. <%@ Page Language="C#" %> <%@ OutputCache Duration=60 VaryByParam="None" %> <script runat="server"> void Page_Load() { Label1.Text = DateTime.Now.ToString(); } public static String GetTime(HttpContext context) { return DateTime.Now.ToString(); } </script> <html> <head runat="server"></head> <body> <form id="form1" runat="server"> <div> <p> <asp:Label runat="server" ID="Label1" /> </p> <p> <asp:Substitution runat="server" ID="Substitution1" MethodName="GetTime" /> </p> <p> <asp:Button runat="server" ID="Button1" Text="Submit"/> </p>

www.mappingminds.in

training@mappingminds.in

</div> </form> </body> </html>

Substitution Control
The ASP.NET Substitution control specifies a section of a cached page that is created dynamically rather than cached. You place a Substitution control at the location on the page where you want the dynamic content to appear. At run time, the Substitution control calls a method that you specify with the MethodName property. The method must return a string, which then replaces the content of the Substitution control. The method must be a static method on the containing Page or UserControl control. Using the substitution control causes client-side cacheability to be changed to server cacheability, so that the page will not be cached on the client. This ensures that future requests to the page call the method again to generate dynamic content.

Substitution API
To create dynamic content for a cached page programmatically, you can call the WriteSubstitution method in your page code, passing it the name of a method as a parameter. The method that handles the creation of the dynamic content takes a single HttpContext parameter and returns a string. The return string is the content that will be substituted at the given location. An advantage of calling the WriteSubstitution method instead of using the Substitution control declaratively is that you can call a method of any arbitrary object, rather than calling a static method of the Page or the UserControl object. Calling the WriteSubstitution method causes client-side cacheability to be changed to server cacheability, so that the page will not be cached on the client. This ensures that future requests to the page call the method again to generate dynamic content.

Thanks

www.mappingminds.in

training@mappingminds.in

www.mappingminds.in

training@mappingminds.in

You might also like