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 ) ON [PRIMARY] GO
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();
if(loginresult!=null)
{
return Json(loginresult.name, JsonRequestBehavior.AllowGet);
}
return Json("InvalidData", JsonRequestBehavior.AllowGet);
}
}
}
Add Login View(Login.cshtml) with Login Action
Login.cshtml
@model LINQCRUD.Models.login
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login</title>
<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>
<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
e.preventDefault();
//Set data to be sent
var data = { "txt_username": $("#txt_username").val(), "txt_password": $("#txt_password").val() }
$.ajax({
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 () {
}
})
});
});
</script>
</head>
<body>
<div>
<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>
</table>
<div id="div1" style="display:none">
<img src="../images/ajax_linq_MVC.png" />
</div>
<div id="msg">
</div>
</form>
</div>
</body>
</html>
Output
Sir its a awesome tutorial you have done but sir i m facing a error of incorrect url when i m trying to run code…everything is same like your code..if u can contact with me dear..i will thank full to you for this..my job is depend in this code..please help yogesh Sir
When create login page we use
var loginresult = db.logins.Where(s => s.username == txt_username && s.password == txt_password).FirstOrDefault()
from it comes db.logins.Where
Logins