Some ASP.Net Controls

The Calendar control displays a calendar through which users can navigate to any day in any year. When the ASP.NET page runs, the Calendar control is rendered as an HTML table. Therefore, a number of the control's properties pertain to various aspects of table formatting. A few of these properties are not fully supported in some older browsers, so not all of the formatting features will be available in those browsers.

The Calendar control is a fairly complex control and has a lot of programming and formatting options.

To add a Calendar control to a page

· Drag the Calendar control from the Toolbox task pane to your page.

To apply basic formatting schemes to the Calendar control

· In Design view, right-click the Calendar control, and then click Show Common Control Tasks.

Tip:

You can also click the Calendar control in Design view, click the arrow in the upper-right corner to show the Common Calendar Tasks menu. Click the arrow again to hide the menu.

1. On the Common Calendar Tasks menu, click AutoFormat.

2. In the AutoFormat dialog box, select one of the schemes in the Select a scheme list. The effect of the scheme on your Calendar control is displayed in the

Preview area.

3. Click OK to apply the formatting scheme and close the dialog, or Apply to apply the formatting scheme without closing the dialog.

To set other properties that determine the Calendar's appearance and behavior, use the Tag Properties task pane.

To use the Tag Properties task pane to set Calendar properties

1. Right-click the Calendar control in Design view and click Properties in the shortcut menu.

2. Type property values, or select them from dropdown lists where they are available.

Calendar Functionality

You can set properties to specify the way users can interact with the Calendar.

Common Calendar functionality properties

Properties	Description
SelectedDate	Causes a specific date to be highlighted in the control.
ShowNextPrevMonth	Enables or disables user month navigation. By default, the calendar displays the month containing today's date. Users can move from month to month in the Calendar control by clicking month navigation links in the title bar of the calendar. If the property is false, the control does not display the controls in the title that allow a user to move between months.
SelectionMode	Set this property to one of the values defined in the SelectionMode enumeration: Day, DayWeek, or DayWeekMonth to specify what a user can select. To disable all date selection, set the property to None. To allow the user to select a date, the calendar is displayed with links. Individual days contain a link with the date number. If you set the calendar to allow users to select a week or the whole month, an extra column with selection links is added to the left of the calendar.
VisibleDate	This date determines which month appears in the calendar. The user can move from month to month on the calendar, thereby changing the visible date without affecting today's date. You can navigate between months by setting the visible date programmatically.

Changing General Calendar Appearance

Because the Calendar control is a complex control made up of many individual elements, it offers you a wide variety of options for customizing its appearance.

The Calendar control establishes a default look for the calendar on the page, but you can change the calendar's overall appearance. If you set appearance properties for individual calendar elements, such as today's date, the selected date, and so on, the individual settings are based on the default settings you make for the calendar as a whole.

Common Calendar Appearance Properties

Properties	Description
Font, ForeColor, BackColor	Change the font, text and background color.
Height, Width	Change overall control size.
NextMonthText, PrevMonthText, NextPrevFormat, NextPrevStyle	Changes the appearance of the month-navigation hyperlinks.
CellPadding, CellSpacing	Change margins and spacing around individual days.
FirstDayOfWeek	Specify which day starts the week (default is Sunday).
DayStyle	Set the style for days of the current month. Weekends, today, and the selected day can have different styles.
DayHeaderStyle	Set the style for the row above the calendar where the names of the days appear.
NextPrevStyle	Set the style for the sections at the left and right ends of the title bar where the month-navigation LinkButtons are.
OtherMonthDayStyle	Set the style for the days from the previous and next month that appear on the current month view.
SelectedDayStyle	Set the style for the day selected by the user.
SelectorStyle	Set the style for the column to the left containing links for selecting a week or the whole month.
TitleStyle	Set the style for the title bar at the top of the calendar containing the month name and month navigation links. If NextPrevStyle is set, it overrides the extreme ends of the title bar.
TodayDayStyle	Set the style for today's date.
WeekendDayStyle	Set the style for weekend days.

Menu Control

The Menu control allows you to develop both statically and dynamically displayed menus for your ASP.NET web pages. You can configure the contents of the Menu control directly in the control, or you can specify the contents by binding the control to a data source.

To add a Menu control to a page

· Drag the Menu control from the Toolbox task pane to your page.

Defining menu content

You can define content for the Menu control in two ways: by interactively (or programmatically) adding individual menu items or by data binding the control to a Site Map or XML data source.

To define items for the Menu control

1. In Design view, right-click the Menu control, and then click Show Common Control Tasks.

2. On the Common DropDownList Tasks menu, click Edit Menu Items.

3. In the Menu Item Editor dialog box, click Add a root item to add an item.

4. In the Properties area, set the Text and NavigateUrl properties — and any other properties you want to set for the menu item.

5. Add additional root items or add child items to the selected item by clicking Add a child item .

6. When you have added several menu items, you can adjust their order and indention by selecting an item and clicking

Move the item up amongst its siblings ,

Move an item down amongst its siblings ,

Make the selected item a sibling of its parent ,

Make the selected item the child of its preceding sibling , or

Remove an item .

Binding to an XML file allows you to control the menu's content through edits to the file, rather than by using the designer. This allows you to update the navigational aspect of your site without revisiting the Menu control or editing any code. If you have a site with changing content, an XML file can be used to organize the content, and fed to the Menu control to make sure the content is accessible to users of the website.

To bind the Menu control to a data source

1. In Design view, right-click the Menu control, and then click Show Common Control Tasks.

2. On the Common DropDownList Tasks menu, select an existing data source or <New data source> in the Choose Data Source dropdown.

Note:

Existing data sources can be edited in the Data Source Library task pane.

1. If you choose <New data source>, the Data Source Configuration Wizard opens. Click Site Map or XML File in the Where will the application get data

from? box and give the data source an ID in the Specify an ID for the data source box.

2. If you choose XML File, in the Configure Data Source dialog box, specify the XML file in the Data file box, and, optionally an XSL transform file or XPath

expression for the XML data source.

3. Click OK in the dialog box and wizard to get back to the control in Design view.

4. Right-click the control and click Edit MenuItem Databindings on the shortcut menu.

5. In the Available data bindings list, select an XML field to which you want to bind the menu and click Add.

6. Select the field in the Selected data bindings list and set property values in the Data binding properties area. For example, to specify what text is displayed

in the menu, choose #InnerText in the TextField property dropdown to display the text between the XML element start and end tags.

Appearance and behavior

You can adjust the behavior of the Menu control through its properties. Additionally, you can control the behavior of dynamic display, including the amount of time a menu node remains visible once it is displayed. For example, to change the Menu orientation from horizontal to vertical, you can set the Orientation property to Vertical.

To apply basic formatting schemes to the Menu control

1. In Design view, right-click the Menu control, and then click Show Common Control Tasks.

2. On the Common Menu Tasks menu, click AutoFormat.

3. In the AutoFormat dialog box, select one of the schemes in the Select a scheme list. The effect of the scheme on your Menu control is displayed in the

Preview area.

4. Click OK to apply the formatting scheme and close the dialog, or Apply to apply the formatting scheme without closing the dialog.

The Menu is composed of various template regions. You can also interactively design these.

To interactively design a template

1. In Design view, right-click the Menu control, and then click Show Common Control Tasks.

2. On the Common Menu Tasks menu, click Edit Templates. This switches the Menu into Template Editing Mode.

3. In the Display dropdown, select the template you would like to edit.

4. Add text or controls or make changes to the Template.

5. When you are finished designing your templates, on the Common Menu Tasks menu, click End Template Editing to return to the standard Menu design mode.

As is the case with all ASP.NET controls, you can designate appearance and behavior by setting properties in the Tag Properties task pane.

Static display and dynamic display

The Menu control has two modes of display: static and dynamic. Static display means that the Menu control is fully expanded all the time. The entire structure is visible, and a user can click on any part. In a dynamically displayed menu, only the portions you specify are static, while their child menu items are displayed when the user holds the mouse pointer over the parent node.

You can choose whether your Menu control in Design view displays as a dynamic or static menu.

To design dynamic or static menus

1. In Design view, right-click the Menu control, and then click Show Common Control Tasks.

2. On the Common Menu Tasks menu, choose Dynamic or Static in the Views dropdown. The template changes to the view you choose.

Static Display Behavior

You can control static display behavior by using the StaticDisplayLevels property of the Menu control. The StaticDisplayLevels property indicates how many levels to display statically from the root of the menu. For example, if StaticDisplayLevels is set to 3, your menu will be expanded to statically display its first three levels. The minimum static display level is 1, and the control will throw an exception if the value is set to 0 or a negative number.

Dynamic Display Behavior

The MaximumDynamicDisplayLevels property specifies how many levels of dynamically appearing menu nodes should be displayed after the static display level.

For example, if your menu has a static level of 3 and a dynamic level of 2, the first three levels of your menu would be statically displayed, while the next two levels would be dynamic.

If MaximumDynamicDisplayLevels is set to 0, no menu nodes will be dynamically displayed. If the MaximumDynamicDisplayLevels is set to a negative number, an exception is thrown.

One aspect of a dynamic menu is the amount of time it takes for the dynamically appearing portion of a menu to disappear. This value is configurable in milliseconds by adjusting the DisappearAfter property, for example, setting it to 1000 for one second.

The default value is 500 milliseconds, or half a second. If the value of DisappearAfter is set to 0, pausing outside of the Menu control causes it to disappear immediately. Setting the value to -1 indicates that the pause time should be infinite, and only by clicking outside of the Menu control will the dynamic portion vanish.

ListBox Control

The ListBox control allows users to select one or more items from a predefined list. It differs from a DropDownList control in that it can display multiple items at once and it optionally allows the user to select multiple items.

To add a ListBox control to a page

1. Drag the ListBox control from the Toolbox task pane to your page.

2. Set properties for the control in the Tag Properties task pane.

Common ListBox Properties

Property	Description
SelectionMode	Set to Single or Multiple to specify how many items users can select.
Rows	Specifies the number of rows displayed. You can set the control to display a specific number of items. If the control contains more items than that, it displays a vertical scroll bar.
Height and Width	Specifies the size of the control using pixels. When you specify a Height and Width, the control ignores the number of rows you have set and displays as many as will fit into the height of the control. Some browsers do not support setting the height and width in pixels and will use the row count setting.

Adding items to the ListBox control

Before a ListBox can present a user with items to choose, you need to populate the ListBox control with the items. You can do this by binding the control to a data source or by individually defining items for the ListBox.

To bind the ListBox control to a data source

1. In Design view, right-click the ListBox control, and then click Show Common Control Tasks.

2. On the Common DropDownList Tasks menu, click Choose Data Source.

3. In the Data Source Configuration Wizard, choose a source for the ListBox control in the Select a data source dropdown. In the Select a data field to

display in the ListBox dropdown, select the field for the text that the user will see. In the Select a data field for the value of the ListBox dropdown,

select the field for the data that can be programmatically accessed when the user chooses an item in the list.

To define items for the ListBox control

1. In Design view, right-click the ListBox control, and then click Show Common Control Tasks.

2. On the Common DropDownList Tasks menu, click Edit Items.

3. In the ListItem Collection Editor dialog box, click Add to add an item.

4. In the ListItem properties area, set the Text and Value properties.

5. Repeat steps 3 and 4 until you have added all the items you want.

CheckBoxList

You can use two types of ASP.NET controls to add check boxes to a Web Forms page: individual CheckBox controls or a CheckBoxList control. Both controls provide a way for users to input Boolean data: true or false, yes or no. For a comparison of the two types of controls, see CheckBox control.

To add a CheckBoxList

Drag the CheckBoxList control from the Toolbox task pane to your page.

When you use a CheckBoxList control, you add a single control to the page. Adding items to the control is a separate process that depends on whether you will display a static list in the control or display a list that is generated dynamically from a data source.

To defiine static items for the control

In Design view, right-click the CheckBoxList control, and then click Show Common Control Tasks.
On the Common CheckBoxList Tasks menu, click Edit Items.
In the ListItem Collection Editor dialog box, click Add to add an item.
In the ListItem properties area, set the Text and Value properties.
Repeat steps 3 and 4 until you have added all the items you want.

To bind to a data source

In Design view, right-click the CheckBoxList control, and then click Show Common Control Tasks.
On the Common CheckBoxList Tasks menu, click Choose Data Source.
In the Data Source Configuration Wizard, choose a source for the CheckBoxList control in the Select a data source dropdown. In the Select a data field to display in the CheckBoxList dropdown, select the field for the text that the user will see. In the Select a data field for the value of the CheckBoxList dropdown, select the field for the data that can be programmatically accessed when the user chooses an item in the list.

CheckBox

CheckBox control versus CheckBoxList control

You add individual CheckBox controls to a page and work with them singly. Alternatively, the CheckBoxList control is a single control that acts as a parent control for a collection of check-box list items. It derives from a base ListControl class, and therefore works much like the ListBox control, DripDownList control, RadioButtonList control. For that reason, many of the procedures for working with the CheckBoxList control are the same as the procedures for the other list web server controls.

Each type of control has 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 text (that is, 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 database. (You can still bind an individual CheckBox control to data.)

To add a CheckBox control to a page

Drag the CheckBox control from the Toolbox task pane to your page.
Specify a caption by setting the Text property.
Optionally, change the orientation of the caption by setting the TextAlign property.

When the CheckBox control renders to the browser, it does so in two parts: an input element representing the check box, and a separate label element representing the caption for the check box. The combination of the two elements is in turn wrapped in a span element.

When you apply style or attribute settings to a CheckBox control, the settings are applied to the outer span element. For example, if you set the control's BackColor property, the setting is applied to the span element, and therefore it affects

DropDownList

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 differs from the ListBox control because it does not support multi-selection mode.

To add a DropDownList control to a page

Drag the DropDownList control from the Toolbox task pane to your page

To bind to a data source

In Design view, right-click the DropDownList control, and then click Show Common Control Tasks.
On the Common DropDownList Tasks menu, click Choose Data Source.
In the Data Source Configuration Wizard, choose a source for the DropDownList control in the Select a data source drop-down box. In the Select a data field to display in the DropDownList drop-down box, select the field for the text that the user will see. In the Select a data field for the value of the DropDownList drop-down box, select the field for the data that can be programmatically accessed when the user chooses an item in the list.

To define items for the control

In Design view, right-click the DropDownList control, and then click Show Common Control Tasks.
On the Common DropDownList Tasks menu, click Edit Items.
In the ListItem Collection Editor dialog box, click Add to add an item.
In the ListItem properties list, set the Text and Value properties.

Repeat steps 3 and 4 until you have added all the items that you want.

You can control the look of the DropDownList control by setting its height and width in pixels. Some browsers do not support setting the height and width in pixels and will use the row-count setting instead.

Note:
You cannot specify the number of items that are displayed in the list before a scroll bar appears when users click the drop-down button. The length of the displayed list is determined by the browser.

Panel

The Panel control provides a container control within an ASP.NET page that you can use as a parent for static text and for other controls.

To add a panel control to a page

Drag the Panel control from the Toolbox task pane to your page.
Set properties for the control in the Tag Properties task pane.

Common Panel Properties

Property	Description
HorizontalAlign	Specifies how the child controls are aligned within the panel (left, right, centered, or justified).
Wrap	Specifies whether content that is too wide for the panel is wrapped to the next line or truncated at the panel's edge.
ScrollBars	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.
GroupingText	Renders a border and title around the Panel control. Setting GroupingText causes scrollbars not to appear, if you have specified them.

RadioButtonList

The RadioButtonList control represents a list control that encapsulates a group of radio button controls.

You can use two types of ASP.NET controls to add radio buttons to a page: individual RadioButton controls or a RadioButtonList control. Both controls allow users to select from a small set of mutually exclusive, predefined choices. The controls allow you to define any number of radio buttons with labels and to arrange them horizontally or vertically.

To add a RadioButtonList control to a page

· Drag the RadioButtonList control from the Toolbox task pane to your page.

To bind the RadioButtonList control to a data source

1. In Design view, right-click the RadioButtonList control, and then click Show Common Control Tasks.

2. On the Common RadioButtonList Tasks menu, click Choose Data Source.

3. In the Data Source Configuration Wizard, choose a source for the RadioButtonList control in the Select a data source dropdown.

In the Select a data field to display in the RadioButtonList dropdown, select the field for the text that the user will see. In the Select a data field for the

value of the RadioButtonList dropdown, select the field for the data that can be programmatically accessed when the user chooses an item in the list.

To define items for the RadioButtonList control

1. In Design view, right-click the RadioButtonList control, and then click Show Common Control Tasks.

2. On the Common RadioButtonList Tasks menu, click Edit Items.

3. In the ListItem Collection Editor dialog box, click Add to add an item.

4. In the ListItem properties area, set the Text and Value properties.

5. Repeat steps 3 and 4 until you have added all the items you want.

RadioButton Control vs. RadioButtonList Control

You add individual RadioButton controls to a page and work with them singly. Typically, you group two or more individual buttons together.

In contrast, the RadioButtonList control is a single control that acts as a parent control for a collection of radio button list items.

Radio Button

You can use two types of ASP.NET controls to add radio buttons to a page: individual RadioButton controls or a RadioButtonList control. Both controls allow users to select from a small set of mutually exclusive, predefined choices. The controls allow you to define any number of radio buttons with labels and to arrange them horizontally or vertically.

To add a RadioButton control to a page

1. Drag the RadioButton control from the Toolbox task pane to your page.

2. Set properties for the control