UpdatePanel Control in ASP.Net

Introduction

This article describes how to add partial page update support to a web page by using two Microsoft Ajax server controls the ScriptManager Control and the UpdatePanel Control. Using UpdatePanel control we can refresh only required part of the page instead of whole page.

ScriptManager Control

The ScripManager Control manages the partial page updates for UpdatPanel controls that are on the ASP.NET web page or inside a user control on the web page. This control manages the client script for AJAX-enabled ASP.NET web page and ScripManager control support the feature as partial-page rendering and web-service calls.

ScriptManager

UpdatePanel Control

You can refresh the selected part of the web page by using UpdatePanel control, Ajax updatepanel control contains a two child tags that is ContentTemplate and Triggers. In a ContenTemplate tag we used to place the user controls and the Trigger tag allows you to define certain triggers which will make the panel update its content.

<asp:UpdatePanel ID="updatepnl" runat="server">
<ContentTemplate>

All the contents that must be updated asynchronously (only contenttemplate parts are updated and rest of the web page part is untouched) are placed here. It allows us to send request Or post data to server without submitting the whole page so that is called asynchronous.

UpdatePanel

Now I am going to show you how to check the availability of user name in database let's follow the following steps:

Create DataBase and Table in Sql-Server

Create Database Employee
use Employee
create table UserDetails
(
UserName nvarchar(max)
)

Write the following procedure to insert the values in tables columns :

insert into UserDetails values('Pankaj')
insert into UserDetails values('Nimit')

Write the following query to execute the table schema:

select * from UserDetails

TableSchema

Step 1

Open Visual Studio-->Create New Website-->ASP.NET Web Site

CreateNewWebsite

Step 2

Now go the solution explorer on to the right side of the application and do the following steps figure given below.

AddNewItem

Step 3

Add new Web form in the empty web application figure given below.

AddNewForm

Write the following code in a CheckAvailability.aspx page :

Step 4

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckAvailability.aspx.cs" Inherits="CheckAvailability" %>
<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="scriptmanager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="updatepnl" runat="server">
<ContentTemplate>
<table>
<tr>
<td>Enter UserName </td>
<td>:</td>
<td><asp:TextBox ID="txtun" runat="server" AutoPostBack="true" OnTextChanged="CheckUserNameAvailability"/></td>
<td>
<div id="checkun" runat="server" Visible="false">
<asp:Image ID="shwimg" runat="server" Width="17px" Height="17px"/>
<asp:Label ID="lblmsg" runat="server"></asp:Label>
</div>
</td>
</tr>
<tr>
<td>Enter Password </td>
<td>:</td>
<td><asp:TextBox ID="txpwd" runat="server" TextMode="Password"></asp:TextBox></td>
</tr>
<tr>
<td>Enter Confirm Password </td>
<td>:</td>
<td><asp:TextBox ID="txtconpwd" runat="server" TextMode="Password"></asp:TextBox></td>
</tr>
<tr>
<td colspan="3"><asp:Button ID="txtbtn" Text="SUBMIT" runat="server" align="center" /></td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>

Now Write the following code in CheckAvailability.aspx.cs :

Step 5

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class CheckAvailability : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void CheckUserNameAvailability(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(txtun.Text))
{
SqlConnection con = new SqlConnection("Data Source=MCNDESKTOP34;Initial Catalog=Employee;User ID=;Password=****");
con.Open();
SqlCommand cmd = new SqlCommand("select * from UserDetails where UserName=@un", con);
cmd.Parameters.AddWithValue("@un", txtun.Text);
SqlDataReader dr = cmd.ExecuteReader();
if (dr.HasRows)
{
checkun.Visible = true;
shwimg.ImageUrl = "Cancel.png";
lblmsg.Text = "UserName Already Exist..!!";
}
else
{
checkun.Visible = true;
shwimg.ImageUrl = "Accepted.png";
lblmsg.Text = "Congratulation created Successfully..!!";
}
}
else
{
checkun.Visible = false;
}
}
}

Step 6

Debug the application by press (F5) to execute Web form. After debugging the application then the output would be as shown below.

AfterDebug

Step 7

Enter the User Name to check it is available in database or not, figure given below.

UnExists

Step 8

Enter the User Name to check it is available in database or not, figure given below.

UnNotExist

Summary

In this article you saw by using two Microsoft Ajax server controls the ScriptManager Control and the UpdatePanel Control we can refresh only required part of the page instead of whole page.