ASP .Net Controls

Introduction of .Net Web Form

WebForms from ASP.NET allow you to create web-based GUI applications. WebForms include web pages (also known as ASP.NET page or web Forms site) and GUI elements (sometimes known as server controls) such as text boxes, buttons, list boxes, data grids, etc.

ASP.NET Controls

1. Adding ASP.Net Controls to Web Forms:-

ASP.Net will add controls like textboxes and labels. Let's look at the other Web forms controls and see some of their common properties. We will build one form in our example that will have the following features.

1. The user's ability to enter his Name.

2. An option to select the city of residence.

3. The user's ability to enter a gender option. 

4. An option to choose a course that the user would like to learn. Choices will be available for both C # and ASP.Net

Let's look at each control in detail.

Step 1:-    The first step is to open the Demo web form to the Forms Designer. Once you do this, you will be able to drag controls from the toolbox to the Web form. To open the web form of the Designer, 

• right-click the Solution Explorer Demo.aspx file 
• Select the View Designer menu option.

Once you have completed the above stage, your Form Designer can be viewed as shown below.

.

Now let's start adding the controls one by one

1. Label Control

The control of the label is used to display on the form of a text or message to the user. The control of the label is typically used together with other controls. Common examples are the addition of a label along with the control of the textbox. The tag provides the client with an idea of what should be filled in the textbox.  Let's see how we can do this with an example below.  We will use a label called 'name.' This will be used in conjunction with the textbox controls, which will be added in the later section.

Step 1:- The first step is to drag the 'label' control on to the Web Form from the toolbox, as shown below.

Step 2:- Once the label has been added, follow the following steps.

1. Go to the properties window by right-clicking on the label control
2. Choose the Properties menu option

Step 3:- From the properties window, change the Name of the Text property to Name.

Similarly, also change the ID property value of the control to lblName. By specifying a meaningful ID to controls, it becomes easier to access them during the coding phase. This is shown below.

Once you make the above changes, you will see the following output.

2. Textbox:-

A text box is used to allow a user to insert any text in the request for the Web form. Let's see how we can use an example below to apply this. In the form in which the user must enter his Name, we must add a textbox.

Step 1:- The first step is to drag the textbox control onto the Web Form from the toolbox, as shown below.

Step 2) Once the Textbox has been added, you have to change the ID property.

• Go to the properties window by right-clicking on the Textbox control and
• Choose properties then Change the id property of the textbox to txt.

Output:-

3. ListBox

A Listbox is used to display a web form list of items. Let's see how, with an example shown below, we can implement this. To store some locations in the city, we will add a list box to the form.

Step 1:- The first step is to drag the List box control on to the Web Form from the toolbox, as shown below.

Step 2:- Once you drag the Listbox to the form, a separate side menu will appear. In this menu, choose the 'Edit Items' menu.

Step 3:- You will now be presented with a dialog box where the list items can be added to the list box.

1. To add a list item, press the Add button.

2. Give a name for the list item text meaning–Delhi in our case.

3. Click the OK button.

Step 4:- Go to the properties window and change the ID property value of the control to lstLocation.

Output:-

From the output, you can see that the Listboxes was added to the form.

Radio Button:-

A radio button is used to display a list of items that can be selected by the user. Let's see how we can use with an example  below to implement this. For a male / female option, we'll add a radio button.

Step 4:-The first step is to drag the control ' radiobutton ' from the toolbox to the web form. Make sure to add 2 radio buttons, one for ' Male ' option, and one for ' Female ' option.

Step 2:- Change the' text' property after adding the Radiobutton.

1. Go to the properties window by clicking the' Control Radio button.'

2. Change the Radio button's text property to' Male.'

3. Repeat the same move to change it to 'Female.' Change the ID properties to rbMale and rbFemale for the respective controls.

Output:-

CheckBox

A checkbox is used to provide a list of options where the user can make multiple choices. Let's see how we can use an example below to implement this. We are going to add two checkboxes to our web forms. These checkboxes will give the user the option of learning C # or ASP.Net.

Step 1:- The first step is to drag the checkbox control onto the Web Form from the toolbox, as shown below

Step 2:- After adding the checkboxes, change the property of the checkbox id to' chkASP.'

1. Go to the property window by pressing the Checkbox.

2. Change ID properties to 'chck1' and  'chck2'  for the respective controls.

Also, change the Checkbox control text property to' C#.' Do the same and change it to 'Java'  for the other checkbox control.

1.  Change the ID property of the Checkbox to 'chck1.'

Once you make the above changes, you will see the following output

Output:-

Button

Using a button, the user can click on a button to start the form processing. Let's see how, with our current example, we can implement this, as shown below. We're going to add a simple ' Submit ' button. To submit all the information on the form, this will be used.

Step 1:- The first step is to drag the button control onto the Web Form from the toolbox, as shown below.

Step 2:-Once, you have added the button, press the control button to go to the property tab. Adjust the

text property of the Submit button command. Also, adjust the Button's ID property to ' btn. '

Once you make the above changes, you will see the following output

Output:-

.

Event Handler in ASP.Net

You can add events to controls when working with a web form. An activity is something that happens when an operation is performed. The most common thing to do is to click a button on a form.

You can add code to the respective aspx.cd file in web forms. This code can be used when pressing a button on the form to perform specific actions. This is typically the most common event in WebForms. We will make this simple, by adding an event to the control button to show the user's Name. Let's follow the steps below to achieve it.

Step 1:- First, you have to double-click the button on the Web Form. This will bring up the event code for the Button in Visual Studio.

The btn_Click event is automatically added by Visual Studio when you double click the button in the web forms designer.

Step 2:- Let's now add code to the submit event to display the name textbox value and the location chosen by the user.

  protected void btn_Click(object sender,
EventArgs e)
         {
             Response.Write(txt.Text + "</br>");
             Response.Write(Lb.SelectedItem.Text + "</br>");
             lblName.Visible = false; 
             txt.Visible = false;
         {
             Response.Write(txt.Text + "</br>");
             Response.Write(Lb.SelectedItem.Text + "</br>");
             lblName.Visible = false; 
 Visible = false;
             Lb.Visible = false;
             Chck1.Visible = false;
              Chck2.Visible = false;
             rbmale.Visible = false;
             rbfmale.Visible = false;
             btn.Visible = false;
         } 

Code Explanation:-

1. The above row in the code does the simplest thing. It takes the Name textbox control value and 

sends it to the user via Response object. So if you want to insert the string "Shubham" in the 

name text box, the value of txt.

2. The next line of code takes the selected value of the listbox via property 'Lb.SelectedItem.text'. It then writes this value via the Response.Write method back to the client.

3. Finally, we make all the form controls invisible. If we don't do that, all controls will be shown together, including our response values.

Normally when a person enters all the form information like the Name, location, gender, etc., the user should only have the information that was not entered on the next page displayed. The client does not want to re-control the Name, gender location. Yet ASP.Net does not understand this, and by default, when the user clicks the Submit button, it will display all the controls again. Therefore, to ensure that all controls are invisible, we need to write code so that the user sees the desired output.

After the changes, this is the output that you will see:-

In the Output screen, we carry out the following steps

1. Give the Name of Shubham in the textbox.
2. Choose a location in the Listbox of Delhi.
3. Click on the Submit button.

Once you do this, you will see 'Shubham,' and the location 'Delhi' is displayed on the page.

Summary:-

• You can add standard controls to a form like labels, textboxes, listboxes, etc. in ASP.Net 
• An event may be associated with each control. The most popular event is the select event button. This is used when it is necessary to submit information to the webserver.