Dropdown List

You can use a drop-down list box for soliciting input from a user where you want to give a group of options and require the user to select only one of the options. The DropDownList Web server control gives you a way to create this HTML control and work with the control programmatically.

The DropDownList Web control resides on a server form on your ASP.NET page. The DropDownList control is created with the <asp: dropdownlist > tag. You need to add an id attribute and set the runat attribute to Server for the control to work properly. To present a list of options, the drop-down list box holds each option in its own tag, <ASP:LISTITEM>. To process the DropDownList Web server control, you can use the Selecteditem.Text property to find the value of the option that was selected.

You can use the DropDownList Web server control and the Listitem controls to display a form for gathering input for suggestions. The DropDownList control is used to generate a drop-down list box on a form. When the user submits the form, the Web server reads the selected value as a property of the DropDownList control and echoes the suggestion back to the user.

REQUEST INPUT FROM A DROP-DOWN LIST

REQUEST INPUT FROM A DROP-DOWN LIST

D Open the

GenericTemplate.aspx template from the Code Templates directory.

0 Type a message to the user.

—0 Add a Label control for the message.

° Add ListItem Web server controls for each option.

D Open the

GenericTemplate.aspx template from the Code Templates directory.

0 Type a heading for the page.

0 Type a message to the user.

L-0 Add a Button Web control that calls the SubmitBtn_Click for the onClick event.

—0 Add a Label control for the message.

^0 Add a DropDownList

Web server control and set its attributes.

° Add ListItem Web server controls for each option.

WORK WITH WEB CONTROLS

As with the rest of the Web server controls, you can data-bind the control to a data source.

TYPE THIS:

<SCRIPT LANGUAGE="C#" RUNAT="Server">

void Page_Load(Object Sender, EventArgs E) { if (!IsPostBack) {

ArrayList alSuggestions = new ArrayList(); alSuggestions.Add ("Fewer Goals"); alSuggestions.Add ("More Goals"); alSuggestions.Add ("Same Number of Goals"); dropdownlistSuggestions.DataSource = alSuggestions; dropdownlistSuggestions.DataBind();

void SubmitBtn_Click(object Source, EventArgs e) { labelMessage.Text = "Your suggestion is..." + dropdownlistSuggestions.SelectedItem.Text + ".";

<FORM RUNAT="Server" ID="Form1">

<P /><ASP:DROPDOWNLIST ID="dropdownlistSuggestions" RUNAT="Server" />

<ASP:BUTTON TEXT="Submit" OnClick="SubmitBtn_Click" RUNAT="Server" ID="Button1" /><P /> <ASP:LABEL ID="labelMessage" RUNAT="Server" />

RESULT:

A drop-down list appears with the three suggested goals and a submit button.

• Create a function called SubmitBtn_Click to check the input.

, Set the label according to the input received from the

— Save the file and request it from the Web server.

Note: See pages 20 to 25 for instructions on saving a file to the Web server and then requesting the file using the IIS Admin.

—E Click the Submit button.

-■ The suggestion echoes back on screen.

user.

QUEST DATES FROM A CALENDAR

You can use the Calendar Web server control when you need a user to select a valid date. This is one of the richest Web server controls available in the ASP.NET Framework. You can have users select different ranges for dates as well, including weeks and months. The Calendar control can be generated using only HTML, so the control works with most browser types.

The Calendar Web control will reside on a server form on your ASP.NET page. The Calendar control is created with the <asp: calendar> tag. You need to add an id attribute and set the runat attribute to Server for the control to run properly. To determine which date a user selects, you can write an event handler for the SelectionChanged event. In the event handling code, you should check for the SelectedDate property to retrieve the date that the user chooses.

The Calendar control supports four date selection modes. You can select any single day with the Day mode. If you want to give the option for selecting single day or a week at a time, you can set the mode to DayWeek. You can give your users all the section options (select a day, week, or month) by setting the mode to DayWeekMonth. The last option, None, will disable selection of the calendar.

REQUEST DATES FROM A CALENDAR

REQUEST DATES FROM A CALENDAR

D Open the

GenericTemplate.aspx template from the Code Templates directory.

0 Type a message to the user.

^0 Add a Label control for the message.

0 Add a Calendar control to the page and have the control call the Date_Selected function for the onSelectionChanged event.

D Open the

GenericTemplate.aspx template from the Code Templates directory.

0 Type a message to the user.

^0 Add a Label control for the message.

0 Add a Calendar control to the page and have the control call the Date_Selected function for the onSelectionChanged event.

Was this article helpful?

0 0

Post a comment