Introduction
This article describes how to add partial page
update support to a web page by using two mircosoft 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 feauture as
partical-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 twochild
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
submit the whole page so that is called asychronous.
![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 4 :
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 5 :
Debug the application by press (F5) to
execute Web form. After debug the
application then output would be come figure given below.
![AfterDebug]()
Step 6 :
Enter the
User Name to check it is available in database or not figure given below.
![UnExists]()
Step 7 :
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
mircosoft Ajax server controls the ScriptManager Control and the UpdatePanel
Control we can refresh only required part of the page instead of whole page.