connectseekers.com

Tuesday, 6 January 2015

Ajax Login Form Validation Without Page Refresh Using jQuery In Asp.Net and C#.Net

1/06/2015 - By Pranav Singh 0



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.



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

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

0 comments:

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top