ASP.NET Web Server Control Objects in the Insertion Bar

[ LiB ]

ASP.NET has a tremendous set of controls to use as objects in forms that provide a lot more control than regular form elements. When you use the Dreamweaver server behaviors to create forms in insertion pages or update pages, Dreamweaver uses these web server controls. Having access to the controls separately allows you to customize forms or create your own without having to use the built-in behaviors.

asp:Button

The asp:Button object displays a clickable pushbutton on the form, like the regular HTML button object, but with much more interaction with the application server.

asp:Button has the following attributes:

General:
- ID Sets the object's ID so that it can be referred to by name in scripts. This has to be an alphanumeric value. If you use a number alone, you get an error from the server.
- Text Sets the control's label.
- Command Name Specifies the command associated with the control. A regular HTML button object can have only one submit. The asp:Button object can have multiple buttons that have different functions when clicked.
- Command Argument Sets a parameter to pass to the command specified in the Command Name.
Layout:
- Height Sets the height of the control on the page.
- Width Sets the width of the control on the page.
- Border Width Sets the width of the control's border.
- Background Color Sets the control's background color.
- Border Color Sets the control's border color, creating a beveled look around the control. Borders are always beveled.
- Foreground Color Sets the control's foreground color.
Style Information:
- CSS Class Allows you to assign a CSS class to the control's appearance. Like HTML and CSS inheritance, the properties directly defined in the control override properties set in the definition for the class.
- Border Style The style of the border set with the Border Width and Border Color attributes in the Layout section. The choices are notset, none, dotted , dashed, solid, double, groove, ridge, inset , and outset .
- Font Name Sets the font name for the display of the text.
- Font Names Sets a font list that the browser iterates through until it finds a corresponding font it can display.
- Font Size Sets the size of the text label.
- Bold Sets the font to bold.
- Italic Sets the font to italic.
- Overline Produces an overline over the text.
- Strkeout Sets the font to strikeout.
- Underline Produces an underline under the text.
- Enabled Sets the control's view status to enabled. Disabled controls are visible but not selectable. You can change this in ASP.NET by scripting the control to make it enabled or disabled based on other choices made in the form.
- Enable Viewstate View state is maintained automatically in ASP.NET. This attribute allows you to explicitly disable automatic view maintenance.
- Visible Sets the control to view or be invisible. Normally, you would use this attribute only in combination with scripting to make a control visible or invisible based on some other choice made dynamically.
Accessibility:
- Tool Tip Sets a ToolTip for accessibility. This ToolTip should be short, descriptive, and unique for each control.
- Tab Index Sets the control's order so that you can control the order in which the controls are selected when the user tabs through the page.
- Access Key Sets a single key to access the control so that the user can access the control from the keyboard. For example, specifying k makes the control accessible by pressing Alt+K.
Events:
- OnClick Presents an event when the control is clicked.
- OnDataBinding Presents an event when the control binds data to a data source.
- OnDisposed Presents an event when the control is released from memory.
- OnInit Presents an event when the control is initialized .
- OnLoad Presents an event when the control is loaded.
- OnPreRender Presents an event that allows you to script any updates before the output is rendered.
- OnUnload Presents an event when the control is unloaded from memory.

The asp:Button object inserts the following code (with only the general attributes set):

 <asp:Button CommandName="GetEmployees" ID="submitid" runat="server" Text="Submit" />

asp:CheckBox

The asp:CheckBox object inserts an asp:CheckBox element into a form. Check boxes represent choices that are either true or false. The asp:CheckBox has attributes that allow for much more control than the standard check box in HTML.

asp:CheckBox has the following attributes:

General:
- ID Sets the object's ID so that it can be referred to by name in scripts. This has to be an alphanumeric value. If you use a number alone, you get an error from the server.
- Text Sets the control's label.
- Text Alignment Specifies whether the text is displayed to the right or left of the check box.
- Auto Postback Specifies whether the control posts the form back to the server.
- Checked Indicates whether the control is selected.
- Group Name Sets the name of the group of check boxes that the check box is assigned to.
Layout:
- Height Sets the height of the control on the page.
- Width Sets the width of the control on the page.
- Border Width Sets the width of the control's border.
- Background Color Sets the control's background color.
- Border Color Sets the control's border color, creating a beveled look around the control. Borders are always beveled.
- Foreground Color Sets the control's foreground color.
Style Information:
- CSS Class Allows you to assign a CSS class to the control's appearance. Like HTML and CSS inheritance, the properties defined in the control directly override properties set in the definition for the class.
- Border Style The style of the border set with the Border Width and Border Color attributes in the Layout section. The choices are notset , none , dotted , dashed , solid , double , groove , ridge , inset , and outset .
- Font Name Sets the font name for the display of the text.
- Font Names Sets a font list that the browser iterates through until it finds a corresponding font it can display.
- Font Size Sets the size of the text label.
- Bold Sets the font to bold.
- Italic Sets the font to italic.
- Overline Produces an overline over the text.
- Strkeout Sets the font to strikeout.
- Underline Produces an underline under the text.
- Enabled Sets the control's view status to enabled. Disabled controls are visible but not selectable. You can change this in ASP.NET by scripting the control to make it enabled or disabled based on other choices made in the form.
- Enable Viewstate View state is maintained automatically in ASP.NET. This attribute allows you to explicitly disable automatic view maintenance.
- Visible Sets the control to view or be invisible. Normally you would use this attribute only in combination with scripting to make a control visible or invisible based on some other choice made dynamically.
Accessibility:
- Tool Tip Sets a ToolTip for accessibility. This ToolTip should be short, descriptive, and unique for each control.
- Tab Index Sets the control's order so that you can control the order in which the controls are selected when the user tabs through the page.
- Access Key Sets a single key to access the control so that the user can access the control from the keyboard. For example, specifying k makes the control accessible by pressing Alt+K.
Events:
- OnCheckedChanged Presents an event when the control is changed. If you want the function to fire on the event as the event happens, you need to set AutoPostBack to true in the General tab of the dialog box.
- OnDataBinding Presents an event when the control binds data to a data source.
- OnDisposed Presents an event when the control is released from memory.
- OnInit Presents an event when the control is initialized.
- OnLoad Presents an event when the control is loaded.
- OnPreRender Presents an event that allows you to script any updates before the output is rendered.
- OnUnload Presents an event when the control is unloaded from memory.

The asp:CheckBox object inserts the following code (with most of the attributes set):

 <asp:CheckBox BackColor="#999999" BorderColor="#CCCCCC" BorderWidth="6" ForeColor="#000000" Height="40" ID="checkbox1" runat="server" Text="Male" TextAlign="left" Width="40" />

This code produces the control in the browser shown in Figure 26.1.

Figure 26.1. The asp:CheckBox with the TextAlign, Width, Height, BackColor, BorderColor, BorderWidth, and ForeColor attributes set.

asp:CheckBoxList

The asp:CheckBoxList object inserts a set of check boxes from which the user can select multiple items. The list can contain any number of items that are pulled from a data source.

Note that if you have a form that allows users to pick multiple items from the same database field, your processor needs to loop through the results, or it will take only the first choice that has that name. For instance, if your form allows people to pick several toppings for pizza via check boxes, you need to loop through the result for as many times as there are toppings chosen, or only the first topping chosen will be processed .

asp:CheckBoxList has the following attributes:

General:
- ID Sets the object's ID so that it can be referred to by name in scripts. This has to be an alphanumeric value. If you use a number alone, you get an error from the server.
- Text Alignment Sets the text's alignment in the check box list.
- Auto Postback Specifies whether the control posts the form back to the server.
Layout:
- Height Sets the control's height on the page.
- Width Sets the control's width on the page.
- Border Width Sets the width of the control's border.
- Cell Padding Sets the HTML Cell Padding attribute to the <FORM> tag that is generated by the server.
- Cell Spacing Sets the HTML Cell Spacing attribute to the <FORM> tag that is generated by the server.
- Background Color Sets the control's background color.
- Border Color Sets the control's border color, creating a beveled look around the control. Borders are always beveled.
- Foreground Color Sets the control's foreground color.
Data:
- Data Member Retrieves the specified table in the data source.
- Data Source Retrieves the data source to use to populate the drop-down list. The data source has to be an object that uses the IEnumerable interface, such as the DataView, ArrayList, Hashtable, or DataSet defined on the page from the Server Behavior panel.
- Data Text Field Sets the field in the data source to use as the text label for each itemthat is, the text that appears on the menu.
- Data Text Format String Sets the formatting string used to set the format of the data displayed in the list control.
- Data Value Field Sets the field in the data source to use as the value for each item that appears on the menu.
- Repeat Columns Sets the number of columns to display in the control.
- Repeat Direction Sets the control to display the check boxes either vertically or horizontally.
- Repeat Layout Sets the output to be in a table or in regular HTML flow.
Style Information:
- CSS Class Allows you to assign a CSS class to the control's appearance. Like HTML and CSS inheritance, the properties defined in the control directly override properties set in the definition for the class.
- Font Name Sets the font name for the display of the text.
- Font Names Sets a font list that the browser iterates through until it finds a corresponding font it can display.
- Font Size Sets the size of the text label.
- Bold Sets the font to bold.
- Italic Sets the font to italic.
- Overline Produces an overline over the text.
- Strkeout Sets the font to strikeout.
- Underline Produces an underline under the text.
- Enabled Sets the control's view status to enabled. Disabled controls are visible but not selectable. You can change this in ASP.NET by scripting the control to make it enabled or disabled based on other choices made in the form.
- Enable Viewstate View state is maintained automatically in ASP.NET. This attribute allows you to explicitly disable automatic view maintenance.
- Visible Sets the control to view or be invisible. Normally you would use this attribute only in combination with scripting to make a control visible or invisible based on some other choice made dynamically.
Accessibility:
- Tab Index Sets the control's order so that you can control the order in which the controls are selected when the user tabs through the page.
- Access Key Sets a single key to access the control so that the user can access the control from the keyboard. For example, specifying k makes the control accessible by pressing Alt+K.
Events:
- OnSelectedIndexChange Presents an event when the list changes and is posted back to the server. This is usually used with Auto Postback turned on, which posts the form back to the server when an item on the list is selected.
- OnDataBinding Presents an event when the control binds data to a data source.
- OnDisposed Presents an event when the control is released from memory.
- OnInit Presents an event when the control is initialized.
- OnLoad Presents an event when the control is loaded.
- OnPreRender Presents an event that allows you to script any updates before the output is rendered.
- OnUnload Presents an event when the control is unloaded from memory.

The asp:CheckBoxList object inserts the following code (with some of the attributes set and a data set previously defined as GetProducts):

 <asp:CheckBoxList ID="SelectProducts" runat="server" TextAlign="left" DataSource="<%# GetProducts.DefaultView %>" DataTextField="productname" DataValueField="productsid"> </asp:CheckBoxList>

This code sets the data source to the data set called SelectProducts that I created with the DataSet server behavior. It then binds the productname field in the database to the DataTextField and the productsid to the DataValueField. The result looks like Figure 26.2.

Figure 26.2. The asp:CheckBoxList with the TextAlign attribute set.

 <asp:CheckBoxList BorderColor="#000000" BorderWidth="1" CellPadding="2" DataSource="<%# GetProducts.DefaultView %>" DataTextField="productname" DataValueField="productsid" ID="SelectProducts" RepeatDirection="horizontal" RepeatLayout="table" runat="server" TextAlign="left"> </asp:CheckBoxList>

This code sets the data source to the data set called GetProducts that I created with the DataSet server behavior. It then binds the productname field in the database to the DataTextField and the productsid to the DataValueField. The RepeatDirection is set to horizontal, and the RepeatLayout is set to put the check boxes in a table. The table is set to have a BorderWidth of 1 and a CellPadding of 2. Note that the border is set as a CSS style in the <TABLE> tag and not with the HTML attribute of BORDER . The result looks like Figure 26.3.

Figure 26.3. The asp:CheckBoxList with the TextAlign,BorderWidth, CellPadding, RepeatDirection, RepeatLayout, and TextAlign attributes set.

asp:DropDownList

The asp:DropDownList object inserts drop-down menu from which the user can select a single item. The list can contain any number of items that are pulled from a data source.

asp:DropDownList has the following attributes:

General:
- ID Sets the object's ID so that it can be referred to by name in scripts. This has to be an alphanumeric value. If you use a number alone, you get an error from the server.
- Auto Postback Specifies whether the control posts the form back to the server.
Layout:
- Height Sets the control's height on the page.
- Width Sets the control's width on the page.
- Background Color Sets the control's background color.
- Foreground Color Sets the control's foreground color.
Data:
- Data Member Retrieves the specified table in the data source.
- Data Source Retrieves the data source to use to populate the drop-down list. The data source has to be an object that uses the IEnumerable interface, like the DataView, ArrayList, Hashtable, or DataSet defined on the page from the Server Behavior panel.
- Data Text Field Sets the field in the data source to use as the text label for each itemthat is, the text that appears on the menu.
- Data Text Format String Sets the formatting string used to set the format of the data displayed in the list control.
- Data Value Field Sets the field in the data source to use as the value for each item that appears on the menu.
Style Information:
- CSS Class Allows you to assign a CSS class to the control's appearance. Like HTML and CSS inheritance, the properties defined in the control directly override properties set in the definition for the class.
- Font Name Sets the font name for the display of the text.
- Font Names Sets a font list that the browser iterates through until it finds a corresponding font it can display.
- Font Size Sets the size of the text label.
- Bold Sets the font to bold.
- Italic Sets the font to italic.
- Overline Produces an overline over the text.
- Strkeout Sets the font to strikeout.
- Underline Produces an underline under the text.
- Enabled Sets the control's view status to enabled. Disabled controls are visible but not selectable. You can change this in ASP.NET by scripting the control to make it enabled or disabled based on other choices made in the form.
- Enable Viewstate View state is maintained automatically in ASP.NET. This attribute allows you to explicitly disable automatic view maintenance.
- Visible Sets the control to view or be invisible. Normally, you would use this attribute only in combination with scripting to make a control visible or invisible based on some other choice made dynamically.
Accessibility:
- Tab Index Sets the control's order so that you can control the order in which the controls are selected when the user tabs through the page.
- Access Key Sets a single key to access the control so that the user can access the control from the keyboard. For example, specifying k makes the control accessible by pressing Alt+K.
Events:
- OnSelectedIndexChange Presents an event when the list changes and is posted back to the server. This is usually used with Auto Postback turned on, which posts the form back to the server when an item on the list is selected.
- OnDataBinding Presents an event when the control binds data to a data source.
- OnDisposed Presents an event when the control is released from memory.
- OnInit Presents an event when the control is initialized.
- OnLoad Presents an event when the control is loaded.
- OnPreRender Presents an event that allows you to script any updates before the output is rendered.
- OnUnload Presents an event when the control is unloaded from memory.

The asp:DropDownList object inserts the following code (with some of the attributes set and a data set previously defined as GetProducts):

 <asp:DropDownList ID="SelectProductID" runat="server" DataSource="<%# GetProducts.DefaultView %>" DataTextField="productname" DataValueField="productsid"> </asp:DropDownList>

Figure 26.4. The asp:DropDownList control in the browser.

asp:ImageButton

The asp:ImageButton object displays an image as a clickable pushbutton on the form, like the regular HTML button object but with much more interaction with the application server.

asp:ImageButton has the following attributes:

General:
- ID Sets the object's ID so that it can be referred to by name in scripts. This has to be an alphanumeric value. If you use a number alone, you get an error from the server.
- Image URL Sets the image's URL to be displayed as the button. The path should be relative to the page being created or root-relative , just as any static image on the page would be. Absolute paths are supported as well.
- Alternate Text Sets the alt attribute of the image that will be the control.
- Command Name Specifies the command associated with the control. Each asp:ImageButton object can have different functions when clicked.
- Command Argument Sets a parameter to pass to the command specified in the Command Name.
Layout:
- Height Sets the control's height on the page.
- Width Sets the control's width on the page.
- Image Alignment Sets the HTML align attribute on the image when the page is rendered in the browser. It does not use a CSS style.
- Border Width Sets the width of the control's border.
- Background Color Sets the control's background color.
- Border Color Sets the control's border color, creating a beveled look around the control. Borders are always beveled.
- Foreground Color Sets the control's foreground color.
Style Information:
- CSS Class Allows you to assign a CSS class to the control's appearance. Like HTML and CSS inheritance, the properties defined in the control directly override properties set in the definition for the class.
- Border Style The style of the border set with the Border Width and Border Color attributes in the Layout section. The choices are notset , none , dotted , dashed , solid , double , groove , ridge , inset , and outset .
- Font Name Sets the font name for the display of the text.
- Font Names Sets a font list that the browser iterates through until it finds a corresponding font it can display.
- Font Size Sets the size of the text label.
- Bold Sets the font to bold.
- Italic Sets the font to italic.
- Overline Produces an overline over the text.
- Strkeout Sets the font to strikeout.
- Underline Produces an underline under the text.
- Enabled Sets the control's view status to enabled. Disabled controls are visible but not selectable. You can change this in ASP.NET by scripting the control to make it enabled or disabled based on other choices made in the form.
- Enable Viewstate View state is maintained automatically in ASP.NET. This attribute allows you to explicitly disable automatic view maintenance.
- Visible Sets the control to view or be invisible. Normally you would use this attribute only in combination with scripting to make a control visible or invisible based on some other choice made dynamically.
Accessibility:
- Tool Tip Sets a ToolTip for accessibility. This ToolTip should be short, descriptive, and unique for each control.
- Tab Index Sets the control's order so that you can control the order in which the controls are selected when the user tabs through the page.
- Access Key Sets a single key to access the control so that the user can access the control from the keyboard. For example, specifying k makes the control accessible by pressing Alt+K.
Events:
- OnCommand Presents an event when the user clicks the ImageButton.
- OnClick Presents an event when the user clicks the ImageButton.
- OnDataBinding Presents an event when the control binds data to a data source.
- OnDisposed Presents an event when the control is released from memory.
- OnInit Presents an event when the control is initialized.
- OnLoad Presents an event when the control is loaded.
- OnPreRender Presents an event that allows you to script any updates before the output is rendered.
- OnUnload Presents an event when the control is unloaded from memory.

The asp:ImageButton object inserts the following code (with only the general attributes set):

 <asp:ImageButton AlternateText="Order Button" CommandName="orderitems" ID="ImageButtonID" ImageAlign="Middle" ImageUrl="images/button.gif" runat="server" />

asp:Label

The asp:Label object inserts an asp:Label element into a form. The asp:Label displays dynamically generated static text in a form that can be manipulated by the server.

asp:Label has the following attributes:

General:
- ID Sets the object's ID so that it can be referred to by name in scripts. This has to be an alphanumeric value. If you use a number alone, you get an error from the server.
- Text Sets the control's label.
Layout:
- Height Sets the control's height on the page.
- Width Sets the control's width on the page.
- Border Width Sets the width of the control's border.
- Background Color Sets the control's background color.
- Border Color Sets the control's border color, creating a beveled look around the control. Borders are always beveled.
- Foreground Color Sets the control's foreground color.
Style Information:
- CSS Class Allows you to assign a CSS class to the control's appearance. Like HTML and CSS inheritance, the properties defined in the control directly override properties set in the definition for the class.
- Border Style The style of the border set with the Border Width and Border Color attributes in the Layout section. The choices are notset , none , dotted , dashed , solid , double , groove , ridge , inset , and outset .
- Font Name Sets the font name for the display of the text.
- Font Names Sets a font list that the browser iterates through until it finds a corresponding font it can display.
- Font Size Sets the size of the text label.
- Bold Sets the font to bold.
- Italic Sets the font to italic.
- Overline Produces an overline over the text.
- Strkeout Sets the font to strikeout.
- Underline Produces an underline under the text.
- Enabled Sets the control's view status to enabled. Disabled controls are visible but not selectable. You can change this in ASP.NET by scripting the control to make it enabled or disabled based on other choices made in the form.
- Enable Viewstate View state is maintained automatically in ASP.NET. This attribute allows you to explicitly disable automatic view maintenance.
- Visible Sets the control to view or be invisible. Normally you would use this attribute only in combination with scripting to make a control visible or invisible based on some other choice made dynamically.
Accessibility:
- Tool Tip Sets a ToolTip for accessibility. This ToolTip should be short, descriptive, and unique for each control.
- Tab Index Sets the control's order so that you can control the order in which the controls are selected when the user tabs through the page.
- Access Key Sets a single key to access the control so that the user can access the control from the keyboard. For example, specifying k makes the control accessible by pressing Alt+K.
Events:
- OnDataBinding Presents an event when the control binds data to a data source.
- OnDisposed Presents an event when the control is released from memory.
- OnInit Presents an event when the control is initialized.
- OnLoad Presents an event when the control is loaded.
- OnPreRender Presents an event that allows you to script any updates before the output is rendered.
- OnUnload Presents an event when the control is unloaded from memory.

The asp:Label object inserts the following code (with only the general attributes set):

 <asp:Label ID="ColorChoiceID" runat="server" Text="The item is available in multiple colors, select one  here:"> </asp:Label>

asp:ListBox

The asp:ListBox object inserts a list from which a user can select a single item or multiple items. The list can contain any number of items that are pulled from a data source.

Note that if you have a form that allows users to pick multiple items from the same database field in the list box, your processor needs to loop through the results, or it will take only the first choice that has that name. For instance, if your form allows people to pick several toppings for pizza via check boxes, you need to loop through the result for as many times as there are toppings chosen, or only the first topping chosen will be processed.

asp:ListBox has the following attributes:

General:
- ID Sets the object's ID so that it can be referred to by name in scripts. This has to be an alphanumeric value. If you use a number alone, you get an error from the server.
- Rows Sets how many rows are shown in the list. If there are more choices than there is space, scrolling arrows appear in the list.
- Selection Mode Sets the selection mode to single or multiple items in the list.
- Auto Postback Specifies whether the control posts the form back to the server.
Layout:
- Height Sets the control's height on the page.
- Width Sets the control's width on the page.
- Background Color Sets the control's background color.
- Foreground Color Sets the control's foreground color.
Data:
- Data Member Retrieves the specified table in the data source.
- Data Source Retrieves the data source to use to populate the drop-down list. The data source has to be an object that uses the IEnumerable interface, like the DataView, ArrayList, Hashtable, or DataSet defined on the page from the Server Behavior panel.
- Data Text Field Sets the field in the data source to use as the text label for each itemthat is, the text that appears on the menu.
- Data Text Format String Sets the formatting string used to set the format of the data displayed in the list control.
- Data Value Field Sets the field in the data source to use as the value for each item that appears on the menu.
Style Information:
- CSS Class Allows you to assign a CSS class to the control's appearance. Like HTML and CSS inheritance, the properties defined in the control directly override properties set in the definition for the class.
- Font Name Sets the font name for the display of the text.
- Font Names Sets a font list that the browser iterates through until it finds a corresponding font it can display.
- Font Size Sets the size of the text label.
- Bold Sets the font to bold.
- Italic Sets the font to italic.
- Overline Produces an overline over the text.
- Strkeout Sets the font to strikeout.
- Underline Produces an underline under the text.
- Enabled Sets the control's view status to enabled. Disabled controls are visible but not selectable. You can change this in ASP.NET by scripting the control to make it enabled or disabled based on other choices made in the form.
- Enable Viewstate View state is maintained automatically in ASP.NET. This attribute allows you to explicitly disable automatic view maintenance.
- Visible Sets the control to view or be invisible. Normally you would use this attribute only in combination with scripting to make a control visible or invisible based on some other choice made dynamically.
Accessibility:
- Tab Index Sets the control's order so that you can control the order in which the controls are selected when the user tabs through the page.
- Access Key Sets a single key to access the control so that the user can access the control from the keyboard. For example, specifying k makes the control accessible by pressing Alt+K.
Events:
- OnSelectedIndexChange Presents an event when the list changes and is posted back to the server. This is usually used with Auto Postback turned on, which posts the form back to the server when an item on the list is selected.
- OnDataBinding Presents an event when the control binds data to a data source.
- OnDisposed Presents an event when the control is released from memory.
- OnInit Presents an event when the control is initialized.
- OnLoad Presents an event when the control is loaded.
- OnPreRender Presents an event that allows you to script any updates before the output is rendered.
- OnUnload Presents an event when the control is unloaded from memory.

Here's an example:

 <asp:ListBox BackColor="#CCCCCC" DataSource="<%# GetProducts.DefaultView %>" DataTextField="productname" DataValueField="productsid" ID="SelectListID" Rows="2" runat="server" SelectionMode="multiple"> </asp:ListBox>

This code sets the data source to the data set called GetProducts that I created with the DataSet server behavior. It then binds the productname field in the database to the DataTextField and the productsid to the DataValueField. The number of rows visible is set to 2 so that there will be scroll arrows if there are three or more results in the list. The selection mode is set to multiple so that people can select more than one item at a time in the control. The BackColor sets the list's background color to light gray. The result looks like Figure 26.5.

Figure 26.5. The asp:ListBox control with three results and rows set to 2, showing scrollers.

asp:RadioButton

The asp:RadioButton object inserts an asp:RadioButton element into a form. Radio buttons represent related choices, where only one option can be selected. The asp:RadioButton has attributes that allow for much more control than the standard radio button in HTML.

asp:RadioButton has the following attributes:

General:
- ID Sets the object's ID so that it can be referred to by name in scripts. This has to be an alphanumeric value. If you use a number alone, you get an error from the server.
- Text Sets the radio button's label.
- Text Alignment Specifies whether the text is displayed to the right or left of the check box.
- Auto Postback Specifies whether the radio box posts the form back to the server.
- Checked Indicates whether the radio button is selected.
Layout:
- Height Sets the control's height on the page.
- Width Sets the control's width on the page.
- Border Width Sets the width of the control's border.
- Background Color Sets the control's background color.
- Border Color Sets the control's border color, creating a beveled look around the control. Borders are always beveled.
- Foreground Color Sets the control's foreground color.
Style Information:
- CSS Class Allows you to assign a CSS class to the control's appearance. Like HTML and CSS inheritance, the properties defined in the control directly override properties set in the definition for the class.
- Border Style The style of the border set with the Border Width and Border Color attributes in the Layout section. The choices are notset , none , dotted , dashed , solid , double , groove , ridge , inset , and outset .
- Font Name Sets the font name for the display of the text.
- Font Names Sets a font list that the browser iterates through until it finds a corresponding font it can display.
- Font Size Sets the size of the text label.
- Bold Sets the font to bold.
- Italic Sets the font to italic.
- Overline Produces an overline over the text.
- Strkeout Sets the font to strikeout.
- Underline Produces an underline under the text.
- Enabled Sets the control's view status to enabled. Disabled controls are visible but not selectable. You can change this in ASP.NET by scripting the control to make it enabled or disabled based on other choices made in the form.
- Enable Viewstate View state is maintained automatically in ASP.NET. This attribute allows you to explicitly disable automatic view maintenance.
- Visible Sets the control to view or be invisible. Normally you would use this attribute only in combination with scripting to make a control visible or invisible based on some other choice made dynamically.
Accessibility:
- Tool Tip Sets a ToolTip for accessibility. This ToolTip should be short, descriptive, and unique for each control.
- Tab Index Sets the control's order so that you can control the order in which the controls are selected when the user tabs through the page.
- Access Key Sets a single key to access the control so that the user can access the control from the keyboard. For example, specifying k makes the control accessible by pressing Alt+K.
Events:
- OnCheckedChanged Presents an event when the control is changed. This stores the function to be executed to be submitted when the form is submitted. If you want the function to fire on the event as the event happens, you need to set the AutoPostBack to true in the dialog box's General tab.
- OnDataBinding Presents an event when the control binds data to a data source.
- OnDisposed Presents an event when the control is released from memory.
- OnInit Presents an event when the control is initialized.
- OnLoad Presents an event when the control is loaded.
- OnPreRender Presents an event that allows you to script any updates before the output is rendered.
- OnUnload Presents an event when the control is unloaded from memory.

The asp:RadioButton object inserts the following code (with most of the attributes set):

 <asp:RadioButton AccessKey="c" AutoPostBack="false" BackColor="#CCCCCC" BorderColor="#333333" BorderStyle="groove" BorderWidth="5" Checked="true" CssClass="textstyleforcontrol" Enabled="true" EnableViewState="true" Font-Bold="true" Font-Italic="false" Font-Name="Arial" Font-Names="Times" Font-Overline="false" Font-Size="12" Font-Strikeout="false" Font-Underline="true" ForeColor="#FFFFFF" Height="30" ID="radio12" runat="server" TabIndex="5" Text="Blue" TextAlign="left" ToolTip="color choice - blue" Visible="true" Width="30" />

This code produces the control in the browser shown in Figure 26.6.

Figure 26.6. The asp:RadioButton control in the browser with various formatting options applied.

asp:RadioButtonList

The asp:RadioButtonList object inserts a set of radio buttons from which a user can select a single item. The list can contain any number of items that are pulled from a data source.

asp:RadioButtonList has the following attributes:

General:
- ID Sets the object's ID so that it can be referred to by name in scripts. This has to be an alphanumeric value. If you use a number alone, you get an error from the server.
- Text Alignment Sets the text's alignment in the check box list.
- Auto Postback Specifies whether the control posts the form back to the server.
Layout:
- Height Sets the control's height on the page.
- Width Sets the control's width on the page.
- Border Width Sets the width of the control's border.
- Cell Padding Sets the HTML Cell Padding attribute to the <FORM> tag that is generated by the server.
- Cell Spacing Sets the HTML Cell Spacing attribute to the <FORM> tag that is generated by the server.
- Background Color Sets the control's background color.
- Border Color Sets the control's border color, creating a beveled look around the control. Borders are always beveled.
- Foreground Color Sets the control's foreground color.
Data:
- Data Member Retrieves the specified table in the data source.
- Data Source Retrieves the data source to use to populate the drop-down list. The data source has to be an object that uses the IEnumerable interface, like the DataView, ArrayList, Hashtable, or DataSet defined on the page from the Server Behavior panel.
- Data Text Field Sets the field in the data source to use as the text label for each itemthat is, the text that appears on the menu.
- Data Text Format String Sets the formatting string used to set the format of the data displayed in the list control.
- Data Value Field Sets the field in the data source to use as the value for each item that appears on the menu.
- Repeat Columns Sets the number of columns to display in the control.
- Repeat Direction Sets the control to display the RadioButtons either vertically or horizontally.
- Repeat Layout Sets the output to be in a table or in regular HTML flow.
Style Information:
- CSS Class Allows you to assign a CSS class to the control's appearance. Like HTML and CSS inheritance, the properties defined in the control directly override properties set in the definition for the class.
- Font Name Sets the font name for the display of the text.
- Font Names Sets a font list that the browser iterates through until it finds a corresponding font it can display.
- Font Size Sets the size of the text label.
- Bold Sets the font to bold.
- Italic Sets the font to italic.
- Overline Produces an overline over the text.
- Strkeout Sets the font to strikeout.
- Underline Produces an underline under the text.
- Enabled Sets the control's view status to enabled. Disabled controls are visible but not selectable. You can change this in ASP.NET by scripting the control to make it enabled or disabled based on other choices made in the form.
- Enable Viewstate View state is maintained automatically in ASP.NET. This attribute allows you to explicitly disable automatic view maintenance.
- Visible Sets the control to view or be invisible. Normally you would use this attribute only in combination with scripting to make a control visible or invisible based on some other choice made dynamically.
Accessibility:
- Tab Index Sets the control's order so that you can control the order in which the controls are selected when the user tabs through the page.
- Access Key Sets a single key to access the control so that the user can access the control from the keyboard. For example, specifying k makes the control accessible by pressing Alt+K.
Events:
- OnSelectedIndexChange Presents an event when the list changes and is posted back to the server. This is usually used with Auto Postback turned on, which posts the form back to the server when an item on the list is selected.
- OnDataBinding Presents an event when the control binds data to a data source.
- OnDisposed Presents an event when the control is released from memory.
- OnInit Presents an event when the control is initialized.
- OnLoad Presents an event when the control is loaded.
- OnPreRender Presents an event that allows you to script any updates before the output is rendered.
- OnUnload Presents an event when the control is unloaded from memory.

Here's an example:

 <asp:RadioButtonList BorderColor="#000000" BorderWidth="1" CellPadding="2" DataSource="<%# GetProducts.DefaultView %>" DataTextField="productname" DataValueField="productsid" ID="SelectRadioList" runat="server" RepeatColumns="2" RepeatDirection="Horizontal" RepeatLayout="table" TextAlign="left"> </asp:RadioButtonList>

This code sets the data source to the data set called GetProducts that I created with the DataSet server behavior. It then binds the productname field in the database to the DataTextField and the productsid to the DataValueField. The RepeatDirection is set to horizontal, and the RepeatLayout is set to put the radio buttons in a table. The table is set to have a BorderWidth of 1 and a CellPadding of 2 and to have two columns. Note that the border is set as a CSS style in the <TABLE> tag and not with the HTML attribute of BORDER . The result looks like Figure 26.7.

Figure 26.7. The asp:RadioButtonList control in the browser with RepeatDirection set to horizontal and RepeatLayout set to table.

asp:TextBox

The asp:TextBox object inserts an asp:TextBox element into a form. Text boxes can be single line, multiline, or password.

asp:TextBox has the following attributes:

General:
- ID Sets the object's ID so that it can be referred to by name in scripts. This has to be an alphanumeric value. If you use a number alone, you get an error from the server.
- Text Sets the control's label.
- Text Mode Allows you to set the text box to have the text be either single line, multiline, or password.
- Rows Specifies how many rows to show in the control if the Text Mode is set to multiline.
- Columns Sets the control's width in characters , as opposed to Width, which sets the control's visual width in the browser.
- Max Length The maximum number of characters allowed in the text box.
- Auto Postback Specifies whether the control posts the form back to the server.
- Read-only Specifies whether the contents of the textfield can be modified.
- Wrap Sets the element to wrap entered text. This has no effect unless the Text Mode is set to multiline.
Layout:
- Height Sets the control's height on the page.
- Width Sets the control's width on the page.
- Border Width Sets the width of the control's border.
- Background Color Sets the control's background color.
- Border Color Sets the control's border color, creating a beveled look around the control. Borders are always beveled.
- Foreground Color Sets the control's foreground color.
Style Information:
- CSS Class Allows you to assign a CSS class to the control's appearance. Like HTML and CSS inheritance, the properties defined in the control directly override properties set in the definition for the class.
- Border Style The style of the border set with the Border Width and Border Color attributes in the Layout section. The choices are notset , none , dotted , dashed , solid , double , groove , ridge , inset , and outset .
- Font Name Sets the font name for the display of the text.
- Font Names Sets a font list that the browser iterates through until it finds a corresponding font it can display.
- Font Size Sets the size of the text label.
- Bold Sets the font to bold.
- Italic Sets the font to italic.
- Overline Produces an overline over the text.
- Strkeout Sets the font to strikeout.
- Underline Produces an underline under the text.
- Enabled Sets the control's view status to enabled. Disabled controls are visible but not selectable. You can change this in ASP.NET by scripting the control to make it enabled or disabled based on other choices made in the form.
- Enable Viewstate View state is maintained automatically in ASP.NET. This attribute allows you to explicitly disable automatic view maintenance.
- Visible Sets the control to view or be invisible. Normally you would use this attribute only in combination with scripting to make a control visible or invisible based on some other choice made dynamically.
Accessibility:
- Tool Tip Sets a ToolTip for accessibility. This ToolTip should be short, descriptive, and unique for each control.
- Tab Index Sets the control's order so that you can control the order in which the controls are selected when the user tabs through the page.
- Access Key Sets a single key to access the control so that the user can access the control from the keyboard. For example, specifying k makes the control accessible by pressing Alt+K.
Events:
- OnCheckedChanged Presents an event when the control is changed. This stores the function to be executed to be submitted when the form is submitted. If you want the function to fire on the event as the event happens, you need to set the AutoPostBack to true in the dialog box's General tab.
- OnDataBinding Presents an event when the control binds data to a data source.
- OnDisposed Presents an event when the control is released from memory.
- OnInit Presents an event when the control is initialized.
- OnLoad Presents an event when the control is loaded.
- OnPreRender Presents an event that allows you to script any updates before the output is rendered.
- OnUnload Presents an event when the control is unloaded from memory.

The asp:TextBox object inserts the following code (with most of the attributes set):

 <asp:TextBox Columns="50" ID="textarea2" MaxLength="100" Rows="5" runat="server" Text="Enter your comments here." TextMode="MultiLine" />

This code produces the control in the browser shown in Figure 26.8.

Figure 26.8. The asp:TextBox control in the browser.

More Tags

The More Tags object opens the Tag Chooser dialog box, shown in Figure 26.9. Here you have access to many more ASP.NET objects to insert into the page. For complete details on these objects, check out the "Resources" section at the end of this chapter, where a number of ASP.NET resources are listed.

Figure 26.9. The Tag Chooser dialog box.

Exercise 26.1. Using the DataGrid

You need to have Microsoft IIS up and running on the machine. You need to have the ASP.NET Framework installed, and the service needs to be running. You also need to have a web browser installed and running.

Create a new folder in your web root called gardenshop , where you will build your application. Unzip the support files for this chapter (available from this book's website at www.peachpit.com) into the gardenshop folder. Browse to test.aspx in the browser. You can't use the File > Open functionality to access the page; the server wouldn't know how to serve the file. Therefore, you have to browse to it. For instance, your address line might look like this:

 http://127.0.0.1/gardenshop/test.aspx

Here are the contents of test.aspx:

 <script runat="server" language="vb"> Sub Page_Load(Src As Object, E As EventArgs)     labelText.Text = "Your ASP.NET server is up and running" End Sub </script> <html> <head> <title>test</title> </head> <body> <asp:Label ID="labelText" runat="server"></asp:Label> </body> </html>

When you browse to the file, you should see this:

 Your ASP.NET server is up and running

If you get an error saying that the server application is unavailable, you need to go into the IIS Administrator and set the gardenshop folder's Directory Properties to match Figure 26.10.

Figure 26.10. IIS Administrator showing the properties for the garden-shop website.

Setting up the Site in Dreamweaver

Now that you have the server set up and working, and the gardenshop folder set up, you are ready to set up the site in Dreamweaver and get going with the DataGrid. We assume that you know how to set up a site in Dreamweaver. In this case, you want to set up a site called "The Garden Shop." Set the Local Info to have your local site as the garden-shop folder in your web root that you set up in the last step. As shown in Figure 26.11, set the testing server to have a server model of ASP.NET VB. Set the access to Local/Network and then point that to the garden-shop folder.

Figure 26.11. The Site Definition dialog box for The Garden Shop with the testing server information filled in.

After you set up the site, there is one more thing you need to do with an ASP.NET site. You need to deploy the Macromedia custom controls that let you use all the server behaviors that are included with Dreamweaver.

Select Site > Advanced > Deploy Supporting Files.
In the Deploy Supporting Files To Testing Server dialog box, select the bin directory that will be in the root of your web server, and click Deploy. If you don't have a bin directory in your site root, you need to create that folder first.

In my case, that path is C:\Inetpub\ wwwroot \gardenshop\bin\.

If you don't put the files in the right place, you get an error when the page is served that says that the server cannot find all the components . The error kindly lists all the locations the server is looking in to find the controls. You can simply take one of these paths (it looks in several places), enter it in the Deploy dialog box, and redeploy the support files.

Inserting a DataGrid

The DataGrid is an amazing server control that is available in Dreamweaver. It is the be-all-and-end-all of displaying data to the page. What would take quite a while and thought to set up in ColdFusion or ASP takes only seconds to lay out in a DataGrid in ASP.NET.

You will create a new page in the Garden Shop site, create a connection to the sample gardenshop.mdb database, and insert a DataSet to get values for the DataGrid to display.

Select File > New, and select a new ASP.NET VB page.
Change the title of the file to View Products, and save the file as viewproducts.aspx in the gardenshop folder.
Make sure that the Server Behavior panel is showing.
Click the + button to add a server behavior, and select DataSet.
You need to have a connection to the database defined, so click the Define button.
In the Connections for Site 'The Garden Shop' dialog box, click the New button, and select OLE DB from the drop-down.
In the OLE DB Connection dialog box, name the connection GardenShopConn, and click the Build button.
Click the Provider tab of the Data Link Properties, and select Microsoft Jet 4.0 OLE DB Provider from the list of available connectors.
Click Next to go to the Connection tab, and browse to the gardenshop.mdb file in the gardenshop folder. Leave the user name blank, and test the connection. If it doesn't succeed, check that you selected the Microsoft Jet 4.0 OLE DB Provider.

Click OK to close the Data Link Properties dialog box. Your OLE DB Connection dialog box should look like Figure 26.12.

Figure 26.12. The OLE DB Connection dialog box showing the settings for the GardenShopConn.
Click OK to close the OLE DB Connection dialog box. Click Done to close the Connections dialog box.
Name the DataSet Get Products. In the Connection drop-down in the DataSet dialog box, select your new GardenShopConn connection.
Select tableProducts from the Table drop-down, and click OK. You will select everything in the table.

You should have a DataSet on the page from which the DataGrid can get values to populate itself. You are ready to insert the DataGrid.

Click in the page, and make sure you are in Design view.
Select Insert > Application Objects > Dynamic Data > DataGrid. You can also insert a DataGrid from the Dynamic Data icon of the Application section of the Insert bar.
In the DataGrid dialog box, set the ID to ViewProducts.
Select the GetProducts DataSet you just created in the DataSet drop-down.
Show three records at a time.
Set the Navigation drop-down to Links to Previous and Next Pages. Your dialog box should look like Figure 26.13.

Figure 26.13. The DataGrid dialog box.
Click OK to close the dialog box. A placeholder for the DataGrid is inserted onto the page.
Save your page.
Preview your page in the browser. You should see something like what appears in Figure 26.14.

Figure 26.14. The DataGrid being served in the browser.

You now have a formatted table displaying data from the database in rows of alternating color with page navigation, all in one action.

This is pretty nice, but you're not done yet! You will add a way to edit data in each record without creating any more forms or pages. You can do all this directly in the DataGrid.

In the Server Behavior panel, double-click DataGrid (ShowProducts) to get the DataGrid dialog box back onscreen.
Select the productsid column in the Columns area. Click the Change Column Type button, and select Edit > Update and Cancel from the drop-down menu.
In the Edit, Update, Cancel Button Column dialog box, set the following values:

Title Edit

Button Type Push Button

Update Table tableProducts

Primary Key productsid

Submit As Integer
The dialog box should look like Figure 26.15.

Figure 26.15. The Edit, Update, Cancel Button Column dialog box.
Click OK to close the Edit, Update, Cancel Button Column dialog box.
Select the productnotes column in the Columns area. Click the Change Column Type button, and click the Edit button.
In the Simple Data Field Column dialog box, uncheck the Read Only check box, and then click OK.
Repeat steps 5 and 6 for the productprice column.
Click OK to close the DataGrid, and save the page.
Preview the page in the browser. You should see something like what appears in Figure 26.16.

Figure 26.16. The DataGrid served in the browser with edit buttons added.
Test your edit button by clicking one of the edit buttons, changing the product notes or the price, and then clicking Update.

You can make right your simple edits in the DataGrid rather than having to create a separate update form. You can also insert Delete buttons to delete items from the database. If you believe, as I do, that the more pages you have in a site, the more potential you have for mistakes to occur, doing all this work in one place is easy.

You can apply many other options to the DataGrid. This information would require several chapters. Check out some of the resources listed next for more samples and exercises.