Best approach to handle login popup dialog using MVC jQuery.

Jitendrasoft09
Posted by in ASP.NET MVC category on for Beginner level | Points: 250 | Views : 5778 red flag

This article helps to understand the login popup dialog implementation in MVC.

Login Popup Overview-

Let us understand first what is dialog and why dialog is required in the projects.  Most of the time developers navigate the one web page to another web page. Imagine that if we do lots of web page for each and every requirement. Do you think, is it good approach? We can definitely say it is not better. We can do something better which is called dialog or popup. Using dialog approach we can reduce the network traffic and avoids the round trip on servers.


Login popup Methods-

Let’s discuss how we can create a good looking popup login dialog in MVC. We will see the step by step approach to create and validate login popup dialog.  First of all we will create a DIV in which our controls will be available. We would mention the DIV Id which will used to design and validate the particular DIV using CSS and Jquery.


Login Popup step by step approach-

Let’s start to create Simple MVC application step by step-

Step1 : Click on File> New Project.

Step2 : Select Web and MVC application.

Step3 : Select the folder where you want to create a project.

Step4 : Type your project name.

Step5 : Select the empty template where you can add manually controller, view and model etc.

Step6 : Select view engine razor or ASPX.

Step7 :  Check if you would like to add test project.

Step8 : Click ok and you will see below project structure by default.


Step9 : Now new class is added in model folder in solution project as below given- Lets explain the below code. The class UsersLogin introduces two properties Username and Password.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Collections;
 
namespace LoginPopupDemo.Models
{
    public class UsersLogin
    {
        public string UserName { get; set; }
        public string Password { get; set; }
    }
}

Step10 : Add class in controller folder in solution project as below given- Lets explain the below code. The class login introduces the two action methods. Both of the action methods are returned to the Index and welcome views.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using LoginPopupDemo.Data;
using LoginPopupDemo.Models;
 
namespace LoginPopupDemo.Controllers
{
    public class LoginController : Controller
    {
        //
        // GET: /Login/ 
        public ActionResult Index()
        {
            UserDetailsData userDetailsData = new UserDetailsData();
            List listLogin= userDetailsData.GetUsersDetailsData();
            return View(listLogin);
        }
        public ActionResult Welcome()
        {
            return View("Welcome");
        }
    }
}

Step11 : Now two views are added in given below code. Let’s explain below code. The model is called to access the properties. We have used ViewData to store username which is displayed on view. In the below code we have created login popup using DIV.

Step12 :  Now will create data layer class as below given- The code introduces two methods. First method returns the list of user information. Second method returns the name of the user.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using LoginPopupDemo.Models;
 
namespace LoginPopupDemo.Data
{
    public class UserDetailsData
    {
        public List GetUsersDetailsData()
        {
            List listUsersLogin = new List();
            UsersLogin usersLogin = new UsersLogin();
            usersLogin.UserName="jeet";
            usersLogin.Password="pass";
            listUsersLogin.Add(usersLogin);
            return listUsersLogin;
        }
        public static string ReadUserName()
        {
            return "jeet";
        }
    }
}

Step13 : Now we will add style in solution of the project. The code which is used to design the login popup dialog. We did styling using ID, element and class level.

body {
    background-color:limegreen;
}
Div.loginPopup
{
    position:fixed;
    border-color:green;
    border-style:solid;
    background-color:violet;
   margin-left:500px;
   margin-top:200px;
    width:100px;
    height:80px;
}
Label
{
color:green;
font:bold;
width:100px;
 
}
#btnSubmit
{
    background-color:steelblue;
    color:white;
    font:bold;
}
#lblError
{
    color:red;
    font-size:x-small;
    width:100%;
}
#heading
{
    background-color:dimgray;
}

Step14 : Lets now we will add jquery in solution of the project as given below.- The below code introduces to validate the login popup dialog. Here we have used click, focus, blur and keyup events of jquery. We did coloring as well also with jquery here. We tried to show complete information how jquery is used to validate the controls of the view page.

Below are the jquery function descriptions-

submitButtonValidation Function - It fires when user click on submit button. It validates the user inputs value. It shows the error messages in label. 

loginCreadentialValidation Function - It fires when user enter values on textbox. It enables and disable the submit button based on textbox input.

txtUserNameValidationFocus Function - It fires when user focus or input on textbox. It shows the action of the user input in username textbox.

txtUserNameValidationBlur Function - It fires when user focus out on textbox. It shows the action of the user input in password textbox.

hidePopup Function - It is to hide the login popup dialog screen.

buttonClose Function - It fires when user click on close link in popup dialog screen.


Below are the jquery function code snippet-

var submitButtonValiation = (function () {
    $('#btnSubmit').click(function () {
        var username = $('#txtUserName').val();
        var password = $('#txtPassword').val();
        if (username == '') {
            $('#lblError').text('Please enter username');
        }
        else if (password == '') {
            $('#lblError').text('Please enter password');
        }
    });
});

var loginCredentialValidation = (function () {
    $('.LoginCredential').keyup(function () {
        var username = $('#txtUserName').val();
        var password = $('#txtPassword').val();
        if (username == '' && password == '') {
            $('#btnSubmit').attr('disabled', true);
            $('#lblError').text(' ');
        }
        else {
            $('#btnSubmit').attr('disabled', false);
            $('#lblError').text(' ');
        }
    });
});

var txtUserNameValidationFocus = (function () {
    $('#txtUserName').focus(function () {
        $('#txtUserName').css('background-color', 'yellow');
    });
});

var txtUserNameValidationBlur = (function () {
    $('#txtUserName').blur(function () {
        $('#txtUserName').css('background-color', 'white');
    });
});

var hidePopup = (function () {
    $('#loginPopup').hide();
});

var buttonClose = (function () {
    $('#btnClose').click(function () {
        $('#loginPopup').show();
    });
});

$(document).ready(function () {
    submitButtonValiation();
    loginCredentialValidation();
    txtUserNameValidationFocus();
    txtUserNameValidationBlur();
    txtPasswordValidationFocus();
    txtPasswordValidationBlur();  
});

Step15 : Now we have done the coding part. Let’s see below screen where login button is displayed. By default login popup dialog will disappeared. Once users click on Login button then login popup dialog is being appeared.


Step16 : Now we will see how users interact with login popup dialog. Once users click on Login button then below login popup is being appeared as below given. Once users do not enter the text error messages are displayed on login popup dialog screen. By default textbox is white color when user enters text color will changed to yellow.

Conclusion

We have learned now how login popup dialog creates and validates with MVC jQuery. We have seen the explanation using step by step process to understand better and clear. Thanks for the reading.
 


Page copy protected against web site content infringement by Copyscape

About the Author

Jitendrasoft09
Full Name: Jitendra Kumar
Member Level:
Member Status: Member,MVP
Member Since: 3/26/2013 2:40:53 AM
Country: India
Jitendra Kumar If my post helps you, plz mark as an answer.
http://www.dotnetfunda.com/
Jitendra Kumar

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)