Login form using jQuery dialog and Ajax

      The jquery modal dialog can be used as a form.

      This is very lightweight and easy to implement. Any data can be captured from the dialog and passed on to server side for any kind of functionality such as a login control or a simple input forms, this in turn, can return values that can be used by the form.

I used up this jQuery widget for a login form, and used jquery ajax for the implementation. My intention is to get the user details and cover the basic authorization process using asp.net with C#.

      To begin with, please go this the jQuery dialog page on thejQueryUI site.

      To use jquery and specifically, the jQuery UI, you need to refer to the jquery plugin and the ui plugin with the css.

In the head tag, put in these references

  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

  <script src="//code.jquery.com/jquery-1.9.1.js"></script>

  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

  <style>

     Let’s start by designing the basic form that’ll contain fields for user input. For this to be contained in a dialog, the whole table needs to be in a <div> tag

<div id="dialog-form" style="display:none">

        <table>

        <tr>

        <td>Username:</td><td><asp:TextBox runat=server id=txtUserName  required=true/> </td>

        </tr>

        <tr>

        <td>Password:</td><td><asp:TextBox runat=server id=txtPassword TextMode=Password/> </td>

        </tr>

        </table>

   </div>

 

       We require another button on the form to bring up this dialog, where the user can fill the details for this create another div tag and use the jquery .button() to transform it into a button.

<div id="login">Login</div>

     Now let’s start with JavaScript code, to do this add <script> tags in the head section
To use up a <div> tag as a button, you need to refer to it and apply the button selector  

    Therefore on click of the login button, the dialog needs to be displayed. Below is the script for the dialog to show up on click.

$("#login").button().click(function () {

      $("#dialog-form").dialog({

                    modal: 'true',

                    dialogClass: "no-close",

                    closeOnEscape: "true",

                    height: '175',

                    width: '300',

                    resizable: 'false'

                });

            });

This shows the basic implementation of a dialog box.

   

      The dialog should contain buttons; this can be done if the button attribute for the dialog is used. Two buttons need to be added, one for login and another to cancel, that will close the dialog box.
Below in the complete code for the dialog.

$("#login").button().click(function () {

      $("#dialog-form").dialog({

                    modal: 'true',

                    dialogClass: "no-close",

                    closeOnEscape: "true",

                    height: '175',

                    width: '300',

                    resizable: 'false',

                    buttons: {

                        "Login": function () { alert(); },

                        "Cancel": function () { $(this).dialog("close"); }

                });

            });

 

    This displays two buttons below the form.

    You can download the complete code with added functionality here

 

Note: Other buttons can be added to the dialog form by modifying the design of the table and using them to apply the button selector.

This dialog looks like this, depending on the JqueryUI

Now to add the login functionality:

     To pass on values from client browser to the server, the controls need to referred to with their Client ID like in JavaScript, you could do a document.getElementById('txtBox.ClientID').value

, in jQuery, you can use $('#<%=txtUserName.ClientID%>')[0].value To get the value of any control.

We need to get the values of the username and password, pass them to the server, perform the login process and return appropriate result.

     The best way to do this is by using jQuery Ajax. Here we can refer to a method in the server code.

I recommend this reference link : http://www.w3schools.com/jquery/ajax_ajax.asp for a very simple demo of jQuery ajax.

    A detailed explanation is here : http://viralpatel.net/blogs/jquery-ajax-tutorial-example-ajax-jquery-development/

Now, going to our code,

    For login we need create a server side function to login that takes in the username and password as two parameters. Also note that ajax methods need to have the WebMethod attribute and need to be static.

        [System.Web.Services.WebMethod]

        public static string login(string username, string password)

        {

               return username+" logged in with password "+ password;

        }

This function needs to be called from JavaScript or jQuery Ajax

$.ajax({

                                type: 'post',

                                url: 'WebForm1.aspx/login',

    data: '{username:"' + $('#<%=txtUserName.ClientID%>')[0].value + '",password:"' + $('#<%=txtPassword.ClientID%>')[0].value + '"}',

                                contentType: "application/json; charset=utf-8",

                                dataType: "json",

                                success: function (response) {

                                    var res = response.d

                                    alert(res);

                                },

                                failure: function (response) { alert(response.d); }

                            });

 

    The above Ajax call refers to the method called login, passes the username and password parameters, and accepts a return value, and finally displays an alert box.

Please download the complete Solution here.

 

The downloaded solution has more functionality and implements a very simple architecture.