ASP.NET Core

Purpose of UpdatePanel in ASP.NET WebForms

1. What is an UpdatePanel in ASP.NET WebForms?

The UpdatePanel control is part of the ASP.NET AJAX framework.
It allows you to refresh a part of a web page (partial postback) instead of reloading the entire page every time an event (like a button click) occurs.

In simple terms:
Without UpdatePanel – Whole page reloads after every postback.
With UpdatePanel – Only a specific section updates asynchronously (via AJAX).

2. Why We Use UpdatePanel

  • Improves user experience — avoids full page flicker or refresh.

  • Faster performance — only part of the page reloads.

  • Easy to use — no JavaScript or AJAX code needed manually.

  • Seamless integration — works with normal ASP.NET controls like Button, GridView, DropDownList, etc.

3. Real-Time Example Scenario

Imagine you have an Employee Salary Calculator page.

When the user enters basic salary and clicks a button to calculate total salary,

Only the result section should update, not the entire page.

We’ll implement this using UpdatePanel.

4. Real-Time Example: Employee Salary Calculator

ASPX Page (UpdatePanelExample.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UpdatePanelExample.aspx.cs" Inherits="WebFormsDemo.UpdatePanelExample" %>

<!DOCTYPE html>
<html>
<head>
    <title>UpdatePanel Real-Time Example</title>
</head>
<body>
    <h2>Employee Salary Calculator (Using UpdatePanel)</h2>

    <!-- Add ScriptManager for AJAX support -->
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <table>
                <tr>
                    <td>Employee Name:</td>
                    <td>
                        <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>Basic Salary:</td>
                    <td>
                        <asp:TextBox ID="txtBasic" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="btnCalculate" runat="server" Text="Calculate Salary" OnClick="btnCalculate_Click" />
                    </td>
                </tr>
                <tr>
                    <td>Result:</td>
                    <td>
                        <asp:Label ID="lblResult" runat="server" ForeColor="Blue"></asp:Label>
                    </td>
                </tr>
            </table>
        </ContentTemplate>
    </asp:UpdatePanel>

    <br />
    <hr />
    <h4>Note:</h4>
    <p>This section will not refresh because it is **outside** the UpdatePanel.</p>
    <p>Current Time: <%= DateTime.Now.ToString("hh:mm:ss tt") %></p>
</body>
</html>

Code Behind (UpdatePanelExample.aspx.cs)

using System;

namespace WebFormsDemo
{
    public partial class UpdatePanelExample : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }

        protected void btnCalculate_Click(object sender, EventArgs e)
        {
            // Get values from TextBoxes
            string name = txtName.Text;
            double basicSalary = Convert.ToDouble(txtBasic.Text);

            // Example Calculation: add allowances and tax
            double hra = basicSalary * 0.20;  // 20% HRA
            double da = basicSalary * 0.10;   // 10% DA
            double tax = basicSalary * 0.05;  // 5% Tax
            double netSalary = basicSalary + hra + da - tax;

            // Display Result
            lblResult.Text = $"Employee: {name}<br/>Net Salary: ₹{netSalary:N2}";
        }
    }
}

5. Output Behavior

Without UpdatePanel

When you click “Calculate Salary”, the entire page reloads.
Even the “Current Time” section refreshes.

With UpdatePanel

When you click “Calculate Salary”, only the result label updates,
and the current time (outside the UpdatePanel) stays the same.

No full-page flicker

Faster user experience

6. How It Works

  • The ScriptManager enables AJAX features on the page.

  • The UpdatePanel wraps the controls that should refresh asynchronously.

  • When an event (like a button click) occurs inside the UpdatePanel:

    ASP.NET performs a partial postback,

    Sends only that section’s data to the server,

    Updates only that section of the HTML.

7. Example of Partial Page Update

Inside UpdatePanel:

  • Labels

  • Buttons

  • GridView

Outside UpdatePanel:

  • Will not update unless manually refreshed.

You can also define triggers to refresh panels based on specific buttons or timers.

8. Real-World Use Cases

Real-World TaskHow UpdatePanel Helps
Online Form ValidationUpdates only message area without full reload
Shopping CartUpdate item quantity dynamically
Live Stock DashboardRefresh stock price section every few seconds
Chat ApplicationLoad new messages without refreshing whole page
Search Suggestion BoxShow suggestions instantly using partial refresh

9. Conclusion

The UpdatePanel in ASP.NET WebForms is a simple but powerful way to add AJAX behavior to your web pages without writing any JavaScript.

Use it when:

  • You want a partial page update.

  • You want to avoid a full-page reload.

  • You want a smoother user experience.

However, for larger or modern projects, consider ASP.NET AJAX Toolkit or ASP.NET MVC with jQuery/Fetch API for better performance and flexibility.
Membership not found