Cheap Windows Hosting Review

UpdatePanel’s function in ASP.NET WebForms

Posted on by Pablo Francesco

1. In ASP.NET WebForms, what is an UpdatePanel?

The ASP.NET AJAX framework includes the UpdatePanel control.
Instead of reloading the complete site each time an event (such as a button click) occurs, it enables you to refresh a portion of a web page (partial postback).

To put it simply:
Without UpdatePanel, each postback causes the entire page to reload.
Only a particular piece of UpdatePanel is updated 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 Task How UpdatePanel Helps
Online Form Validation Updates only message area without full reload
Shopping Cart Update item quantity dynamically
Live Stock Dashboard Refresh stock price section every few seconds
Chat Application Load new messages without refreshing whole page
Search Suggestion Box Show 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.

Best ASP.NET Core 10.0 Hosting

The feature and reliability are the most important things when choosing a good ASP.NET Core 10.0 hosting. HostForLIFE is the leading provider of Windows hosting and affordable ASP.NET Core , their servers are optimized for PHP web applications such as the latest ASP.NET Core 10.0 version. The performance and the uptime of the ASP.NET Core  hosting service are excellent, and the features of the web hosting plan are even greater than what many hosting providers ask you to pay for. At HostForLIFE.eu, customers can also experience fast ASP.NET Core hosting. The company invested a lot of money to ensure the best and fastest performance of the datacenters, servers, network and other facilities. Its data centers are equipped with top equipment like cooling system, fire detection, high-speed Internet connection, and so on. That is why HostForLIFE.eu guarantees 99.9% uptime for ASP.NET Core . And the engineers do regular maintenance and monitoring works to assure its ASP.NET Core  hosting are security and always up.

hostforlifebanner