Custom User Login form using ASP.Net MVC LINQ Jquery JSON | Angular | ASP.NET Tutorials

For Consultation : +91 9887575540

Stay Connected :

Custom User Login form using ASP.Net MVC LINQ Jquery JSON

In this blog tutorial we will see that how we can create custom login form using MVC, LINQ, jquery and json.Here I am using $.getJSON method of jquery.

Step1. Create new Empty MVC Project

Open Visual Studio->New Project->Visual C#->Web->ASP.NET Web application->Give Project Name->Select Empty Template->Check MVC Checkbox->Click OK

Step 2. Now to we will add LINQ to sql classes(dbml) in Models folder .

Right click on Model folder =>select new Item->Select Data tab at left side in opened window->Select LINQ to sql classes in middle.->Give the name of your dbml file(here DataClasses1.dbml)

Step 3. Connect with sql database .We have to create sql database in sql server management studio.I supposed you  already created it so I am not telling way to create it.

Open server explorer(Ctrl+alt+s)->Right click on data connection and select add connection->Enter your sql server name->Select Database(my Database name is Ganesha).

(In this process DataClasses1DataContext will be created in models folder)

Demo Database Table


Sql query to generate database table


CREATE TABLE [dbo].[login](
	[id] [int] IDENTITY(1,1) NOT NULL,
	[username] [varchar](50) NULL,
	[password] [varchar](50) NULL,
	[name] [varchar](50) NULL


Step 4. In server explorer window expand newly added(ganesha) database->Drag and drop Login Table on design serface.+Ctrl S

(It will add Login model in DataClasses1DataContext)

Step 5. Create controller in controller folder-> Select Create Empty controller ->Controller Name(Here CustomLogin)=>OK(This Controller Index action will read another action in same Custom Login Controller)

Step 6: Create Images folder and add ajax_linq_MVC.png.(Download (Search ajaxloader.gif image)it from internet)


Pass namespace using LINQCRUD.Models

Write following code in CustomLogin Controller


using LINQCRUD.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace LINQCRUD.Controllers
    public class CustomLoginController : Controller
        // GET: /CustomLogin/
        public ActionResult Login()
            return View();
        public JsonResult CheckLogin(string txt_username, string txt_password)
            DataClasses1DataContext db=new DataClasses1DataContext ();
            var loginresult = db.logins.Where(s => s.username == txt_username && s.password == txt_password).FirstOrDefault();
                return Json(loginresult.name, JsonRequestBehavior.AllowGet);
            return Json("InvalidData", JsonRequestBehavior.AllowGet);


Add Login View(Login.cshtml) with Login Action



@model LINQCRUD.Models.login
    Layout = null;

<!DOCTYPE html>

    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="~/Scripts/jquery-3.0.0.js"></script>
        $(document).ready(function () {
            //Ajax Start- This is to show ajax loading
            $(document).ajaxStart(function () {
                $("#div1").css("display", "block");
            $(document).ajaxStop(function () {
                $("#div1").css("display", "none");
            $(document).ajaxComplete(function () {
                $("#div1").css("display", "none");

            $("#btn").click(function (e) {
                //To prevent form submit after ajax call
                //Set data to be sent
                var data = { "txt_username": $("#txt_username").val(), "txt_password": $("#txt_password").val() }
                    url: "/CustomLogin/CheckLogin",
                    type: "POST",

                    data: JSON.stringify(data),
                    dataType: "json",
                    contentType: "application/json",
                    success: function (status) {
                        if (status != "InvalidData") {
                            $("#span1").css("display", "block");
                            $("#span1").css("color", "green");
                            $("#span1").html("Valid User name and password");
                        else {
                            $("#span1").css("display", "block");
                            $("#span1").css("color", "red");
                            $("#span1").html("Invalid User name or password");
                    error: function () {
        <form role="form">
            <table class="table table-responsive table-striped" >
                <tr><td>User Name</td><td><input class="form-control" type="text" id="txt_username"  required /></td></tr>
                <tr><td>Password</td><td><input class="form-control" type="text" id="txt_password"  required /></td></tr>
                <tr><td colspan="2"><input class="btn btn-primary"  type="submit" name="btn" id="btn" value="SignIn" /><span id="span1" style="display:none"></span></td></tr>

            <div id="div1" style="display:none">

                <img src="../images/ajax_linq_MVC.png" />
            <div id="msg">







Download Source Code