I designed a registration page in which a user enters user details like username, password etc. When the username is entered into the textbox I need to validate the username for availability. Availability depends on whether the username has been taken by another user; for that I am checking the username in the database. Here I have the problem that after the username is entered into the textbox I am getting the data from the database and showing the result on the page of whether that username is available or not but at that time the page gets a postback and loses the entered values from the textboxes; for that reason I used ajax to check username availability.
Now we can see how to check username availability in our application without postback; first add a reference for the AjaxControlToolkit to your application and also add:
<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>
To your aspx page and design your page likes this:
Now we can see how to check username availability in our application without postback; first add a reference for the AjaxControlToolkit to your application and also 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>
If you observe in the above code I placed a textbox in an update panel to allow only partial postback; based on that we can avoid the complete postaback of the page when getting the data from the database and I set the propertyAutoPostBack="true" and used the ontextchanged="txtUsername_TextChanged" event to display the result after entering the text in the textbox.
Now add a using System.Data.SqlClient; reference in the codebehind and use the attached code to get the username from the database.
}</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>
If you observe in the above code I placed a textbox in an update panel to allow only partial postback; based on that we can avoid the complete postaback of the page when getting the data from the database and I set the propertyAutoPostBack="true" and used the ontextchanged="txtUsername_TextChanged" event to display the result after entering the text in the textbox.
Now add a using System.Data.SqlClient; reference in the codebehind and use the attached code to get the username from the database.
 | Download Files: |
|
0 comments:
Post a Comment