Introduction:
Here I will explain how to show the progressbar during check the username availability using asp.net Ajax.
Now we can see how to show progressbar during check username availability in our application without postback for that First add AjaxControlToolkit reference to your application and add
Here I will explain how to show the progressbar during check the username availability using asp.net Ajax.
Description:
In Previous post I explained clearly how to check the username availability using asp.net ajax
Now I will explain how to show the progressbar during check the
username from database just like checking the username in yahoo if you
observe yahoo registration page after enter username and click on check
button at that time we will see progress image during get the data from
database after that result will display now we will implement the same
thing in our application.
Now we can see how to show progressbar during check username availability in our application without postback for that First add AjaxControlToolkit reference to your application and add
<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>
To your aspx page and design your page likes this
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Check Username availability Using Ajax</title>
<style type="text/css">
.waitingdiv {
background-color: #F5F8FA;
border: 1px solid #5A768E;
color: #333333;
font-size: 93%;
margin-bottom: 1em;
margin-top: 0.2em;
padding: 8px 12px;
width: 8.4em;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="scriptmanager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
function BeginRequestHandler(sender, args) {
var state = document.getElementById('loadingdiv').style.display;
if (state == 'block') {
document.getElementById('loadingdiv').style.display = 'none';
} else {
document.getElementById('loadingdiv').style.display = 'block';
}
args.get_postBackElement().disabled = true;
}
</script>
<div>
<asp:UpdatePanel ID="PnlUsrDetails" runat="server">
<ContentTemplate>
<table>
<tr>
<td>
UserName:
</td>
<td>
<asp:TextBox ID="txtUsername" runat="server" AutoPostBack="true" ontextchanged="txtUsername_TextChanged"/>
</td>
<td>
<div id="checkusername" runat="server" Visible="false">
<asp:Image ID="imgstatus" runat="server" Width="17px" Height="17px"/>
<asp:Label ID="lblStatus" runat="server"></asp:Label>
</div>
</td>
</tr>
</table>
<div class="waitingdiv" id="loadingdiv" style="display:none; margin-left:5.3em">
<img src="LoadingImage.gif" alt="Loading" />Please wait...
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
|
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
|
This statement Rose before processing of an asynchronous postback starts and the postback request is sent to the server.
Check this post here I explained clearly how to use this add_beginRequest handler to handle events during postback how to disable button during postback
Check this post here I explained clearly how to use this add_beginRequest handler to handle events during postback how to disable button during postback
Now add using System.Data.SqlClient; reference in codebehind and write the following code to get the username from database
protected void txtUsername_TextChanged(object sender, EventArgs e)
{
if(!string.IsNullOrEmpty(txtUsername.Text))
{
SqlConnection con = new SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB");
con.Open();
SqlCommand cmd = new SqlCommand("select * from UserInformation where UserName=@Name", con);
cmd.Parameters.AddWithValue("@Name", txtUsername.Text);
SqlDataReader dr = cmd.ExecuteReader();
if (dr.HasRows)
{
checkusername.Visible = true;
imgstatus.ImageUrl = "NotAvailable.jpg";
lblStatus.Text = "UserName Already Taken";
System.Threading.Thread.Sleep(2000);
}
else
{
checkusername.Visible = true;
imgstatus.ImageUrl = "Icon_Available.gif";
lblStatus.Text = "UserName Available";
System.Threading.Thread.Sleep(2000);
}
}
else
{
checkusername.Visible = false;
}
}
| |
Demo
 |
Download sample code attached
No comments:
Post a Comment