Click here to download the sample source code for this lesson. 

In order to effectively build web applications rich with user interactive server controls, you have to know how to properly solicit information from the application users.  The first step in achieving that is to develop a screen design with the appropriate server controls for your business application.  Each type of server control has its purpose and I describe some common uses below to help you determine which control to use for various situations.

To solicit text from the user that should be typed (e.g. a registration form Last Name field) use the control.  If you want the user to be able to enter multiple lines of input such as a Notes field, there is a property of the TextBox called TextMode that you can set to MultiLine.

If you want the user to choose an item from a simple list you have a couple of options: the and the .  The DropDownList is better in situations where you don’t want to show all of the available options on the screen at one time; the user has to click on the control to see all of the options.  The ListBox however is sizeable and shows multiple options on the screen without requiring the user to click; if the options are more than the size of the ListBox, a scroll bar will appear.  Also the ListBox allows for multiple concurrent selections so that user can choose more than one item at a time.

If you want the user to be able choose one option versus another use the control.  A similar server control for options is the control.  Both of these controls have a property called Checked which you can reference in the source code.  We will experiment with both of these controls and the Checked property in this lesson.

The RadioButton and CheckBox controls also are available as lists: and .  These are practical in situations when you want to display several options. 

If you want the user to execute a server side action such as saving data that was typed in a form, performing a search, or navigating to another page, you should use the control.  As far as buttons go, you have a few different choices: the standard Button, the and the .  The only difference between these is how they look.  All of them have the Click event and work just like a regular ASP.NET Button.  The LinkButton looks like a traditional Internet hyperlink.  The ImageButton is a bit more fancy in that you can reference an image file that you want to be clickable.  By clicking on the image, the user can trigger the Click event.

Create a new web form called Default5.aspx and go to the Design view.  Now let’s build our first real user input form.  We are going to build a job search registration form, one that may look similar to what you would see if you were registering on a job search website.  Click here to watch an example video for what we are going to do in the next several steps of this lesson.  *You will notice that as I drag server controls onto the web form, when I want to place a control on the next line, I click to the right of the control and then press the ENTER key.

Drag a Label onto the form.  Change the Text property to “Job Registration”.  Change the Font properties to Bold and the size Large.  Add two new lines.

Drag a Label onto the form.  Change the Text property to “First Name”.  Drag a TextBox next to the Label and change the ID to txtFirstName.  Add a new line.

Drag a Label onto the form.  Change the Text property to “Last Name”.  Drag a TextBox next to the Label and change the ID to txtLastName.  Add a new line.

Drag a Label onto the form.  Change the Text property to “State”.  Drag a DropDownList next to the Label and change the ID to ddlState.  Add three items into the control: California, Texas and Virginia.  To add items put your cursor over the control and a little button with > symbol appears.  Click that button and then click Edit Items…  Add a new line.

Drag a Label onto the form.  Change the Text property to “Industry”.  Drag a ListBox next to the Label and change the ID to lstIndustry.  Add three items into the control: Healthcare, Information Technology and Financial.  Adding items into the ListBox is similar to adding items into the DropDownList as you did above.  Add a new line.

Drag a Label onto the form.  Change the Text property to “Availability”.  Drag a RadioButton next to the Label and change the ID to rbnImmediately.  Change the GroupName property to “Availability” and the Text property to “Immediately”.  Drag another RadioButton and change the ID to rbnTwoweeks.  Change the GroupName property to “Availability” and the Text property to “Two Weeks Notice”.  Add a new line.  By making the GroupName the same for both of these RadioButtons, you ensure that the user can only click on one of them at a time.

Drag a CheckBox onto the form.  Change the ID to chkOver18.  Change the Text property to “Click here to certify that you are over 18″.  Add a couple of new lines.

Drag a Button onto the form.  Change the ID to btnRegister.  Change the Text property to “Register”.  Add a couple of new lines.

Drag a Label onto the form.  Change the Text property to “Output”.  Drag a TextBox next to the Label and change the ID to txtOutput.  Change the TextMode property to MultiLine.

When you are finished adding all the controls and editing their properties, your Default5.aspx form should look like this.

Double click on the btnRegister button to create the even handler method btnRegister_Click and paste the following code:

string NEWLINE = "\r\n";
string FirstName = txtFirstName.Text;
string LastName = txtLastName.Text;
string State = ddlState.SelectedValue;
string Industry = lstIndustry.SelectedValue;

txtOutput.Text += FirstName;
txtOutput.Text += " ";
txtOutput.Text += LastName;
txtOutput.Text += NEWLINE;

txtOutput.Text += State;
txtOutput.Text += NEWLINE;

txtOutput.Text += Industry;
txtOutput.Text += NEWLINE;

if (rbnImmediately.Checked == true)
    txtOutput.Text += "Immediately";
if (rbnTwoweeks.Checked == true)
    txtOutput.Text += "In Two Weeks";
txtOutput.Text += NEWLINE;

if (chkOver18.Checked == true)
    txtOutput.Text += "User is over 18";

At the top of the code, I declared some variables to hold the values of the user input controls.  For TextBox controls you can find out what the user typed into the control by using the Text property (e.g. txtFirstName.Text).  For the list controls you can use the SelectedValue property (e.g. ddlState.SelectedValue). 

Following the variables declarations, I display all the values for the different controls in the TextBox txtOutput by using the concatenation operator += which will append text into the control.  Notice that I use the Text property of the txtOutput control to display the values.  Finally for the RadioButton and CheckBox controls, I examine the Checked property to determine if the user selected the control by clicking on it.