In this article I will show you how you can validate user
login form without page refresh using jquery in asp.net and c#.net from sql
server Data base table.
Some of my previous articles are as follows: Validate
DropDownlist Selected Value Using jQuery In Asp.net ,C#.Net, Bind
and Validate GridView TextBox Value by jQuery In Asp.Net Using C#, Asp.net,
C#.net and jQuery articles, Add,
Remove, Validate CSS Class Applied To a HTML Control In Asp.Net Using jQuery.,
jQuery
DatePicker Calendar With Slide Effect on TextBox Click In Asp.Net.
So for this article first we will create a new asp.net
application and create a new Ajax folder into the solution as shown below and
add Ajax form in this folder.
Here is the sql table for data.
Now add the below code to validate the login for.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication1.WebForm3"
%>
<!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>Ajax
Login Form Validation Without Page Refresh Using jQuery In Asp.Net and C#.Net</title>
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script language="javascript">
function
ValidateUser() {
var
userid = $("#<%=txtuserid.ClientID %>").attr('value');
var
password = $("#<%=txtpassword.ClientID %>").attr('value');
$("#btnSubmit").attr({
'value': 'Please
wait...' });
$.ajax({
url: "AjaxPage/AjaxLoginForm.aspx?userid="
+ userid + "&password=" +
password,
type: "POST",
cache: false,
success: function (html) {
if
(html == "1") {
alert("Successfull login.");
} else {
alert("Wrong User Id and Password.");
}
$("#btnSubmit").attr({ 'value':
'Submit' });
return false;
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="100%" cellpadding="3" cellspacing="4">
<tr>
<td align="right">
User Id :
</td>
<td align="left">
<asp:TextBox ID="txtuserid" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">
Password :
</td>
<td align="left">
<asp:TextBox ID="txtpassword" runat="server" TextMode="Password"></asp:TextBox>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="button" value="Submit" onclick="javascript:return ValidateUser();" id="btnSubmit"/>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<asp:Label ID="lblmessage" runat="server" Style="color: #FF3300; font-weight: 700"
Text=""></asp:Label>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
|
In above jquery code I have given the path of the ajax file
in jquery ajax function.
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script language="javascript">
function
ValidateUser() {
var
userid = $("#<%=txtuserid.ClientID %>").attr('value');
var
password = $("#<%=txtpassword.ClientID %>").attr('value');
$("#btnSubmit").attr({
'value': 'Please
wait...' });
$.ajax({
url: "AjaxPage/AjaxLoginForm.aspx?userid="
+ userid + "&password=" +
password,
type: "POST",
cache: false,
success: function (html) {
if
(html == "1") {
alert("Successfull login.");
} else {
alert("Wrong User Id and Password.");
}
$("#btnSubmit").attr({ 'value':
'Submit' });
return false;
}
});
}
</script>
|
In url I have passed the user id and password as request query
string. Now check the ajax form 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;
namespace WebApplication1.AjaxPage
{
public partial class AjaxLoginForm : System.Web.UI.Page
{
protected
void Page_Load(object
sender, EventArgs e)
{
SqlConnection
con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["con"].ToString());
try
{
DataTable
objdt = new DataTable();
string
query = "select * from UserLogin where
UserId='" + Request.QueryString["userid"]
+ "' and Password='" +
Request.QueryString["password"]
+ "';";
SqlDataAdapter
da = new SqlDataAdapter(query,
con);
con.Open();
da.Fill(objdt);
con.Close();
if
(objdt.Rows.Count > 0)
{
Response.Write("1");
}
else
{
Response.Write("0");
}
}
catch
{
con.Close();
}
}
}
}
|
Now remove the complete html tag from ajax form by keeping
page tag.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxLoginForm.aspx.cs" Inherits="WebApplication1.AjaxPage.AjaxLoginForm"
%>
|
Connection string in web.config file
<connectionStrings>
<add name="con" connectionString="Data Source=DELL-PC;Initial Catalog=Demo;Integrated
Security=True"
providerName="System.Data.SqlClient" />
</connectionStrings>
|
Now we have done run the application and check the output.
About the Author
0 comments:
Please let me know your view