In this article we will see how to check whether username exists in database or not without refreshing the page using ajax updatepanel control.
Introduction
Hello,
In this
article we will see how to check whether username exists in database or not
without refreshing the page using ajax updatepanel control. When user wants to register on any site, then
it is must to get a unique username. This one is so exiting because user don’t
need to press button after filling the full form to check whether username
exists or not but it will show same just after losing focus from textbox after entering username.
Objective
Fetching username from database and matches if
it exists or not and give appropriate message to userUsing the code
How to use
code:
1. Open
Visual Studio 2010 -> Create New Website
2. Add a
Webform and drag and drop 1 updatepanel, 1 scriptmanager, 1 textbox, 1 label and
1 image control
3. Change ID
of textbox from TextBox1 to txtusername, Label1 to lblmessage and Image1 to Imagemessage
4. Once the
user presses tab key after entering username in textbox, a message will appear either "username
already exist" or "You can choose this username".
5. Add two
image file named available.gif and notavailable.jpg by just right click on the
application and choose add existing items and select the image file
Tables and
codes:
Create table logintable(username varchar(20),password varchar(20))
HTML Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtusername" runat="server"
style="z-index: 1; left: 282px; top: 135px; position: absolute; height: 21px;"
ontextchanged="TextBox1_TextChanged"
AutoPostBack="True"></asp:TextBox>
<asp:Label ID="lblmessage" runat="server"
style="z-index: 1; left: 474px; top: 138px; position: absolute; height: 19px; width: 203px"
Text="Label"></asp:Label>
<asp:Image ID="Imagemessage" runat="server" Height="17px"
style="z-index: 1; left: 445px; top: 138px; position: absolute; height: 20px; width: 24px"
Width="17px" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
C# Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Imagemessage.Visible = false;
lblmessage.Visible = false;
}
protected void TextBox1_TextChanged(object sender, EventArgs e)
{
if (Page.IsPostBack == true)
{
SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=mydatabase;Integrated Security=True");
con.Open();
SqlCommand cmd = new SqlCommand("select * from logintable where username='" + txtusername.Text + "'", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
if (ds.Tables[0].Rows.Count > 0)
{
Imagemessage.Visible = true;
lblmessage.Visible = true;
Imagemessage.ImageUrl = "NotAvailable.jpg";
lblmessage.Text = "Username already exists.";
}
else
{
Imagemessage.Visible = true;
lblmessage.Visible = true;
Imagemessage.ImageUrl = "Available.gif";
lblmessage.Text = "You can choose this username.";
}
}
}
}
Screen 1: When Username exist:
Screen 2: When Username not exists:
Conclusion
I hope this will be helpful for those who wants to stop refreshing page and save time.