ASP.NET Web Forms Overview
ASP.NET Web Forms is a web development framework by Microsoft, used to build dynamic, data-driven web applications. Web Forms allow developers to create websites with rich user interfaces by providing a drag-and-drop environment for UI controls and a powerful event-driven programming model.
1. Web Forms Code Model
ASP.NET Web Forms follow a code-behind model, which separates the presentation layer (HTML markup) from the logic (C# or VB.NET code).
- In-page format: The server-side code is embedded directly in the
.aspx
page.
Example:
<asp:Button ID="Button1" runat="server" Text="Click Me" OnClick="Button1_Click" />
- Code-behind format: The server-side code is placed in a separate file with the
.aspx.cs
or.aspx.vb
extension.
Example:
protected void Button1_Click(object sender, EventArgs e) {
Label1.Text = "Button Clicked!";
}
2. Web Form Object Life Cycle
The life cycle of a web form includes the following stages:
- Page Request: The page request is sent to the server.
- Start: Page properties are initialized.
- Initialization: Controls on the page are initialized.
- Load: The page and controls are loaded with their data.
- Postback Event Handling: Handles postback events (e.g., button clicks).
- Rendering: The page is rendered into HTML and sent to the client.
- Unload: Cleans up resources used by the page.
3. Handling Client-Side Events on the Server
ASP.NET Web Forms allow for handling client-side events, such as button clicks, on the server. These events trigger a postback to the server, which processes the event and sends the response back to the client.
4. Web Form Event Handling
In Web Forms, events like button clicks, dropdown changes, and text input can be handled in the server-side code. The event-handling mechanism relies on delegates and event handlers.
Example:
protected void Button1_Click(object sender, EventArgs e) {
// Event handling logic
}
5. AutoPostBack Property
The AutoPostBack property allows a control to automatically post back to the server when its value changes. For example, a dropdown list can be set to post back to the server when the user selects a new item.
Example:
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Text="Item 1" Value="1"></asp:ListItem>
<asp:ListItem Text="Item 2" Value="2"></asp:ListItem>
</asp:DropDownList>
6. Automatic State Management with Web Forms
ASP.NET Web Forms provide ViewState for automatic state management. ViewState preserves the state of controls across postbacks.
- ViewState stores values in a hidden field on the page.
Example:
ViewState["Counter"] = 1; // Store value
int counter = (int)ViewState["Counter"]; // Retrieve value
HTML Server Controls
HTML server controls are standard HTML elements that are enhanced to run on the server. These controls include attributes like runat="server"
that allow them to be manipulated in the server-side code.
1. Definition
- HTML server controls are basic HTML elements that are processed by the server before being rendered to the client.
2. RunAt Server Attribute
The runat="server"
attribute tells ASP.NET to treat the HTML element as a server-side control.
Example:
<form runat="server">
<input type="text" id="TextBox1" runat="server" />
</form>
3. HTML Control Class
All HTML server controls inherit from the HtmlControl class, which provides properties and methods for managing HTML controls on the server.
4. General HTML Server Controls
- Anchor (
<a>
) – Server-side hyperlink control. - Image (
<img>
) – Displays images. - Form (
<form>
) – Encapsulates form elements. - Division (
<div>
) – Server-side division block. - Span (
<span>
) – Inline division block. - Table (
<table>
) – Defines a table structure. - Input Controls – Includes text boxes, buttons, etc.
Example:
<a href="https://www.example.com" runat="server" id="Anchor1">Visit Example</a>
Web Server Controls
ASP.NET Web Forms provide web server controls that offer a higher level of functionality compared to HTML server controls. These controls are rendered as HTML elements but provide additional features such as data binding and event handling.
1. Web Control Class
All web server controls inherit from the WebControl class, which defines common properties like ID
, CssClass
, and ToolTip
.
2. General Web Server Controls
HyperLink
- A server-side link control that allows dynamic modification of the URL.
Example:
<asp:HyperLink ID="HyperLink1" runat="server" Text="Visit Google" NavigateUrl="https://www.google.com" />
LinkButton
- A button control that appears as a hyperlink.
Example:
<asp:LinkButton ID="LinkButton1" runat="server" Text="Click Me" OnClick="LinkButton1_Click" />
Image
- Displays images dynamically, using server-side properties.
Example:
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/logo.png" />
Label
- Displays text that can be modified dynamically on the server.
Example:
<asp:Label ID="Label1" runat="server" Text="Hello World!" />
Panel
- A container control that groups other controls together.
Example:
<asp:Panel ID="Panel1" runat="server" CssClass="panel-class">
<asp:Label ID="Label2" runat="server" Text="Inside a Panel" />
</asp:Panel>
3. Form Controls
ASP.NET provides a variety of server-side form controls, including:
- TextBox: A text input control.
- Button: A clickable button that triggers server-side events.
- CheckBox: A server-side checkbox control.
Example:
<asp:TextBox ID="TextBox1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Submit" />
4. Table Controls
ASP.NET offers server-side table controls to build dynamic tables with ease.
- Table: Represents an HTML table.
- TableRow: Represents a row in a table.
- TableCell: Represents a cell in a table row.
Example:
<asp:Table ID="Table1" runat="server">
<asp:TableRow>
<asp:TableCell>Row 1, Cell 1</asp:TableCell>
<asp:TableCell>Row 1, Cell 2</asp:TableCell>
</asp:TableRow>
</asp:Table>