Login Using jQuery and Ajax Popup Window

Message

First of all, greetings to my second article. I am a newbie in ASP.NET but trying to regularly write code in the famous CodeProject site and I am also a huge fan of the famous c-sharpcorner site.

Getting to my point, this article is very big for me because I have no deep knowledge about the lovely and smart jQuery concept or JavaScript. When I login on this site I came to realize that can I provide this type of login facility in any one of my sites. So I decided to make this type of login function and share with other guys.

Why we need combination of jQuery and Ajax

jQuery is lovely library that helps us to send the data on the server side and get results back using powerfull Ajax tools. Ajax is a tool used to send data to the server without the page fully reloading and without a post-back. See the following screen shot, here when we press the submit button it sends the data on the server without a page post-back. When our page does a full post-back it is often consumed by a rendering into a HTML control. So why is there a need to do a complete rendering of the page if we have Ajax and jQuery tools, which means write less and do more.

Requirements

The following are the requirements for running this code (project):

jQuery library file
If you have greater version of jQuery no need this version.
jQuery-1.6.4.js version
jQuery-1.8.0.min.js.

Add a jQuery Reference in aspx page

Here is a jQuery reference to be added to the test page.

<script src="jquery-1.6.4.js" type="text/javascript"></script>
<script src="jquery-1.8.0.min.js" type="text/javascript"></script>

Note: If you don't have this library then you can't run this project properly. You can download this version of jQuery from the official website; try this link: http://jQuery.com/download/

How jQuery and Ajax Work

$.ajax is a main function that contains various sub-functions like type. Type is divided into two parts, one is Post and the other is Get. When I make a request to the server it's either of the two types, Post or Get. Get is a fresh Request and post is re-request.

Jquery snippet here

$.ajax({

type: "post",
data: "{'id': '" + job_id + "'}",
url: "user-notification-message.aspx/deletejob",
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (revert) {
if (revert.d == 'Onsuccess') {
test();
return false;
}
else {
alert("☻");
return false;
}

}

URL: Url is a path of a function. Test.aspx is a page name; this page contains a forgotpass function.
Note: We can't use the master page or any type Handler.
Data: Data is a way of sending the data on the server side. Data picks the information client-side and drops the server-side like a bus.
contentType: is header sent to the server, specify the specific format like JSON.
Datatype: what type of data jqeury is expected, like a JSON, txt, html, table and so on.
Success: function (msg) to get a value from the server and show on the client side. (msg is an object type).

Code behind function

url: "test.aspx/login_user", //client side url.
[System.Web.Services.WebMethod]
public static string login_user(string _username, string _userpassword)
{
Page tt = new Page();
tt.Session["loging"] = _username;
//stuff your code here
return "OnSuccess";
}

url: "test.aspx/forgotpass", clint side Url…
[System.Web.Services.WebMethod]
public static string forgotpass(string _emailid)
{
//stuff your code here
return "Have a nice day";
}

Note: Don't forget this line [system.web.Service.WebMethod].

Advantage

No waiting to use a forgotten password or login.
Less network overload.
Amazing working speed.

Disadvantage

If your browser does not support ajax then it does not work.
If client-side JavaScript is disabled then it does not work properly.
No error message provided.

The following are some screen shots.