Adding a Server-Side Control to the Web Form In Asp.net | Trickcode

Adding a Server-Side  Control to the Web Form 

The Designer also serves as a canvas for HTML and server controls. We will study HTML and server controls in another lesson but for now, these control servers as parts or components of the page that provide certain functionality to the user. They are pretty similar to Windows Controls of Windows Forms. To have access to these controls, we need to open up the Toolbox. It is typically located to the left of Visual Web Developer. If you can't see it, then go to View > Toolbox.

By hovering your mouse on the Toolbox tab, it will reveal the actual Toolbox. Find the Label control and drag it inside the <div> tag of the Designer. You can also just double click it and the control will be placed to where the cursor is in the Designer.



We have now placed a Label server control inside a div tag. Like windows controls, server controls also have properties we can modify to our liking. Right now, we can change the ID property of the Label into something else. Select the Label in the designer and go to the Properties Window. Find the ID property from the list. You can make the searching easier by clicking the Alphabetize button. The ID property will be the second entry in the list. Change its value to LabelDate.


Now that we have contents in the Designer, let's try to go to the Code Editor by clicking the Source tab. You will see that HTML and ASP markup was added which reflects the content we added in the Designer. Don't worry about the syntax of the asp tag right now as we will discuss them in another lesson.

Handling a Page Event

Like Windows Forms, Web Forms also uses event-driven programming. You can handle different events of web forms and controls. In this section, we will demonstrate the Web Form's Page_Load event. The Page_Load event is triggered when the page is loaded to the browser. This is typically the place to add codes for initialization and things that the user should initially see. To add codes for the Page_Load event, simply double click on any blank surface of the web form in the designer. This will bring you to the corresponding code-behind file of the web form. A Page_Load event handler is automatically generated for you. Inside the Page_Load event handler, type the following code:

LabelDate.Text = DateTime.Now.ToShortDateString();

You might notice that when are typing the code, the IntelliSense gives you suggestions which makes it easier for you to see what is trying to type. You will see in the list the Id of the label that we dragged into the form. The code simply assigns the current date to the Text property of the label and formats it as a short date string. Now every time the page is loaded, this line of code will be executed.

If you are wondering where this code behind is located, you can see it in the Solution Explorer by clicking the arrow to the left of the web form's .aspx file. Remember that we left the checkbox checked for creating a separate code-behind file for the web form. Therefore, a separate code file was created with the same name as the webform itself only with a .cs extension.

Run the website using F5 or by clicking the play button in the toolbar. You will encounter a window telling whether you want to enable debugging for the site. Leave the first option selected and then click OK. You will now see the output of the page showing the current date.

                                        Share this article with your friends