ASP.NET web controls

This article gives an introduction to ASP.NET web controls


ASP.NET web controls are the controls provided by the ASP.NET team to help you develop complex web pages.

Some of the web controls are:

* Label
* Textbox
* Button
* Listbox
* Datagrid


Let us try the most simple web control - the Label control. Label controls are used to display text in the web page.

VS.NET allows you to drag and drop any web controls to the web page. Open your default aspx page and select the 'Design' mode. Now click on the 'Toolbox' on the top left corner of the VS.NET. The toolbox will be available only when you have the aspx file opened in design mode.

From the toolbox, drag and drop a Label control to the web form. Now switch to the 'HTML' mode. You can see the difference. What happened when you dropped a Label control to the web form is, VS.NET just added a line of code to the aspx page. The code looks like this:

<asp:Label id="Label1" style="Z-INDEX: 101; LEFT: 232px; POSITION: absolute; TOP: 56px" runat="server">Label</asp:Label>


In fact, you can manually type this line of code instead of doing the drag and drop. After typing this code, if you switch to the design mode, you can see the Label control.

Note the id="Label1" in the above code. It says the id of the control is "Label1". You can use this id in the code behind file to manipulate the Label control.

Switch to design mode and double click on the Form. This will create a Page_Load event handler. Write the following code in the Page_Load event handler:

Label1.Text = "Welcome to my First ASP.NET Page. Current Server time is " & DateTime.Now.ToString()


Ok, now compile and run the page by pressing Ctrl + F5. You can see the above text and the server time displayed in the web page.


Changing Properties of a Web Control



VS.NET allows you to set various properties of the web controls in design mode, saving you lot of typing. Switch to design mode in your aspx page. Select the label control you just created and press "F4". Or, you can click on the "Properties" window title on the right edge to open it.

This will slide and open the Properties window on the right side of the VS.NET editor. You can change various properties of the label control.

(Sometimes, old versions of VS.NET will fail to open the Properties window. It will simply freeze up. In that case, click on the menu Tools > Options and press the button "Reset Windows Layout".)

For our simple testing, change the Font Size property to "XX-Large". ("Size" property is located under the property "Font". You must click the "Font" to view the sub properties.). Also, change the property "Forecolor" to "Red".

When you change any property in the design mode, VS.NET actually puts appropriate tags in the aspx page. You can switch to the HTML mode and see the changes.

Alternatively, you can type the tags in the aspx page in HTML mode and switch to design mode to view your changes. Be carefull when you type the properties manually. If you make any mistakes, it will be difficult to identify and solve the error.

Now run the application and see how the text appears in the web page. Play around with other properties of the Label control and get familiar.

Some of the commonly used properties are:

* ID
* Font
* Text
* Width


Since this is a simple control used to display text to users, the events associated with this control are not commonly used. But the events are important for other controls like Textbox, Button etc. You will learn more about these controls in the coming chapters.

Thanks for contributing the tutorial.

Hope that you read the rules. If not, read the rules carefully before making articles or tutorials.

It is always better if you give the reference link with your tutorials.

Hi voidname,

Well,Thanks for posting the Asp.Net web controls and their functions.I am searching for it since 15 days that what are the functionality to use the controls in Asp.I am happy that at end you solve my problem.I am waiting for such another controls.


Thanks