In this article I will show you how you can create an ajax enabled
login form in asp.net using ajaxcontroltoolkit updatepanel and UpdateProgress using c#. In this
we will validate user detail demo data base.
Some of my previous articles are as follows: Simple
Login Form In Asp.Net Using C#.Net and VB.Net | How to Create Login Form in
Asp.Net Using C#, Simple
Login From in Asp.Net MVC Using C#.Net, Login
Form With LightbBox Effect in Asp.Net.
So for this article first we will create a new asp.net
application and add scriptmanager, updatepanel and UpdateProgress in your age
after that add textbox and button control for login form.
After adding all the controls your code will look as shown
below.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SimpleLogin.aspx.cs" Inherits="ProjectDemo_Asp.et.SimpleLogin"
%>
<!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 In Asp.Net Using C#.Net and VB.Net Without PostBack</title>
</head>
<body>
<form id="form1" runat="server">
<div style="width:30%;text-align:center;font-weight:bold;">
Ajax Login Form</div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table border="1" cellpadding="5" cellspacing="5"
style="border:1 solid black;border-collapse:collapse;" width="350px">
<tr>
<td colspan="2" style="background-color:Gray;color:White;">
<b>Login Form</b></td>
</tr>
<tr>
<td align="right">
User Id:</td>
<td>
<asp:TextBox ID="txtuserid"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">
Password :</td>
<td>
<asp:TextBox ID="txtpassword"
runat="server"
TextMode="Password"></asp:TextBox>
</td>
</tr>
<tr>
<td align="center" colspan="2" style="color: #FF6600">
<asp:Button ID="btnlogin"
runat="server"
onclick="btnlogin_Click"
Text="Login"
/>
<br />
<asp:Label ID="Label2"
runat="server"></asp:Label>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server"
AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<asp:Label ID="Label1" runat="server" style="color: #3333CC; font-weight: 700"
Text="Please wait...."></asp:Label>
</ProgressTemplate>
</asp:UpdateProgress>
</form>
</body>
</html>
|
In above code we have assign updatepanel id to updateprogress control.
Now use the below mention .cs code in your page.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.OleDb;
namespace ProjectDemo_Asp.et
{
public partial class SimpleLogin : System.Web.UI.Page
{
public
string connectionstring = "Provider=Microsoft.ACE.OLEDB.12.0;Data
Source=|DataDirectory|\\bookstore.mdb;Persist Security Info=False;";
protected
void Page_Load(object
sender, EventArgs e)
{
}
protected
void btnlogin_Click(object
sender, EventArgs e)
{
DataTable
objdt = new DataTable();
objdt =
ValidateUserDetail(txtuserid.Text, txtpassword.Text);
if
(objdt.Rows.Count > 0)
{
/*Invoke
session value to mantain usee login to other poages
For user
authentication in secure page
*/
Session["userlogin"] = txtuserid.Text;
Response.Redirect("Success.aspx");
}
else
{
Label2.Text = "Please provide correct user id and
password.";
}
}
/// <summary>
/// Function for binding retribing the data from database
/// </summary>
/// <returns></returns>
public
DataTable ValidateUserDetail(string userid, string
password)
{
DataTable
_objdt = new DataTable();
string
querystring = "select * from UserDetail
where userid='" + userid + "'
and pwd='" + password + "';";
OleDbConnection
_objcon = new OleDbConnection(connectionstring);
OleDbDataAdapter
_objda = new OleDbDataAdapter(querystring,
_objcon);
_objcon.Open();
_objda.Fill(_objdt);
return
_objdt;
}
}
}
|
In above code we have first check the value exist in our
data base or not if it exists on that case it will display return value and we
will assure that user have entered correct user id and password. Now run the
page for output.
0 comments:
Please let me know your view