There are three type of server controls in ASP.Net
- HTML Server Controls- Traditional HTML Tags
- Web server Controls- New ASP.Net Tags
- Validation Server Controls- for input validation
- A server control is an object that is displayed on an ASP.NET Web page.
- When a Web page is requested from a server via an HTTP request, the server processes the page request and then sends the client the resulting HTML code via an HTTP response.
- When the Web browser receives the HTTP response, it renders the page and displays it for the end user.
- In the context of an ASP.NET Web application, the term render refers to the process of creating a visual representation of the page, including all of its associated server controls, based on the HTML code received from the server in its HTTP response.
In Visual studio IDE, Toolbox contains most of the ASP.NET server controls, we will discuss six basic server control classes: the Label class, the TextBox class, the Button class, the Table class, the TableRow class, and the TableCell class.
- To open the Toolbox, click the Toolbox tab in the upper left-hand corner of the Visual Studio environment.
- We can auto hide the Toolbox by clicking the pin icon in the upper right-hand corner of the Toolbox.
- We can also close the Toolbox by clicking the Toolbox tab again.
- If we click the x icon in the upper right-hand corner of the Toolbox, which removes the Toolbox tab, we can restore it by selecting View ➤ Toolbox from the main menu.
The Label class displays text. Unlike the text displayed on a static Web page, the text displayed on an ASP.NET Web page using a Label control can change dynamically by modifying the value of the control’s Text property in the code behind.
|<asp:Label ID="Label1" runat="server" Text="Enter your Name"></asp:Label>
- As can be seen, the Label control starts with an ASP.NET server tag.
- This tag begins with <asp: and ends with />. Note that this is in stark contrast to HTML tags, which begin with < and end with />.
- Also notice that the run at property is set to server.
- This indicates that the control is to be treated as a dynamic ASP.NET server control—not a static HTML control.
- The need to specify the value of this property for every ASP.NET server control is tedious and redundant and could probably have been defaulted by Microsoft.
- Nevertheless, if we don’t set this property to true in the definition of an ASP.NET server control, a syntax error will occur.
- The TextBox class displays an input field that can be used by an end user to enter information.
- A TextBox control contains a number of properties that permit us to control the appearance of the control.
- we can set different property to Text Box such as Textmode,maxlength,Wrap etc.
- As can be seen, the Columns property of the control is set to 50. This indicates that the width of the text box will be 50 characters when it is rendered in the browser.
- Notice as well that the Rows property is set to 5. This indicates that five rows will be displayed when the text box is rendered in the browser.
- We can also see that the TextMode property is set to MultiLine, which indicates that the text box will be rendered in the browser as a multiple-line text box that can accept several lines of input from the end user. And finally, notice that the Wrap property is set to true.
- This indicates that the content of the text box will wrap to the next line if it contains more than one line of text. The result of the Aspx code is displayed at the bottom of the figure.
- As can be seen, several lines of information have been entered into the text box.
|<asp:TextBox ID="TextBox1" runat="server" OnTextChanged="TextBox1_TextChanged" style="z-index: 1; top: 79px; position: relative; left: 153px; width: 116px; height: 17px;" Columns="50" Rows="5" TextMode="MultiLine"></asp:TextBox>
BUTTON CONTROL :
The Button class displays a button that can be used by an end user to invoke an action. When a Button control is clicked, its Click and Command events are raised.
To handle one of these events, we must code the appropriate event handler method. More about that in a moment.
A Button control can behave like a Submit button (i.e., a button that posts the page back to the server where we can handle its Click event), or it can behave like a Command button (i.e., a button that posts the page back to the server where we can handle the Click events of several buttons in one event handler method by passing the event handler method a command name and [optionally] a command argument).
By default, a Button control behaves like a Submit button.
Now we are going to add a Button control to the .aspx file of a Page class, and this control has its ID property set to btnSave.
To create the control’s Click event handler method in the code behind of the Page class, all we must do is
1. Place the mouse cursor at an appropriate place in the Button control.
2. Type OnClick.
3. When the options of the OnClick method appear, select <Create New Event>. This will create a new Click event handler method for the btnSave button in the code behind of the Page class.
Notice at 01 that the ID property of the TextBox control is set to txtEmailAddress. By giving this control an ID, we can reference it in the code behind of the page. If we try to reference a control that has not been given an ID, a syntax error will occur. As can be seen, the ID property of this control begins with the three-letter prefix txt to indicate in the code behind that this ID is referring to a text box, and it ends with EmailAddress to indicate in the code behind that this control will contain an email address.
Notice at 02 that the ID property of the Button control is set to btnSave. As can be seen, the ID property of this control begins with the three-letter prefix btn to indicate in the code behind that this ID is referring to a button, and it ends with Save to indicate in the code behind that this control will perform a save function. Notice as well that the OnClick method is set to btnSave_Click. It is in this event handler method that we will write code to handle the Click event. In addition, we can see that the Text property is set to Save. This indicates the text that will be displayed in the button when the button is rendered in the browser.
Notice at 03 that the ID property of the Label control is set to lblMessage. As can be seen, the ID property of this control begins with the three-letter prefix lbl to indicate in the code behind that this ID is referring to a label, and it ends with Message to indicate in the code behind that this control will contain a message.
.ASPX Page code:
|<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="buttoncontrol.aspx.cs" Inherits="readexpertsample1.buttoncontrol" %>
<form id="form1" runat="server">
<div style="z-index: 1; left: 10px; top: 15px; position: absolute; height: 463px; width: 950px">
<asp:Label ID="lblMessage" runat="server" style="z-index: 1; left: 10px; top: 34px; position: absolute; width: 405px" Text="Email Address"></asp:Label>
<asp:TextBox ID="txtEmailAddress" runat="server" style="z-index: 1; left: 10px; top: 99px; position: absolute"></asp:TextBox>
<asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" style="position: relative; width: 269px; z-index: 2; left: 0px; height: 27px; top: -26px" Text="Save" />
protected void btnSave_Click(object sender, EventArgs e)
lblMessage.ForeColor = System.Drawing.Color.Red;
lblMessage.Text = "The email address" + txtEmailAddress.Text + "was sucessfully saved";
- The Table class displays a table that can be used to organize the layout of a Web page’s controls.
- A Table control consists of one or more table rows, and each table row consists of one or more table cells.
- These table rows and table cells, which will be discussed in a moment, are constructed from the TableRow class and the TableCell class, respectively.