Monday, 5 January 2015

MVC 4 Razor:How to Create Simple Login Page/Form in ASP.NET using MVC 4

Hi friends, in this article I will explain about  How to Create Simple Login Page in ASP.NET using MVC 4 Razor.
DBScript for Users table
CREATE TABLE USERS (
  User_id INT IDENTITY (1, 1) PRIMARY KEY,
  UserName VARCHAR(100),
  Gender VARCHAR(10),
  Address VARCHAR(200),
  Password VARCHAR(10)
)

INSERT INTO USERS (UserName, Gender, Address)
  VALUES ('Kishore', 'Male', 'XXXXXXXX', '123456')
INSERT INTO USERS (UserName, Gender, Address)
  VALUES ('Satyam', 'Male', 'XXXXXXXX', '123456')
INSERT INTO USERS (UserName, Gender, Address)
  VALUES ('Rithvika', 'Female', 'XXXXXXXX', '123456')
INSERT INTO USERS (UserName, Gender, Address)
  VALUES ('SaiR', 'Female', 'XXXXXXXX', '123456')
INSERT INTO USERS (UserName, Gender, Address)
  VALUES ('SambhaShiva', 'Male', 'XXXXXXXX', '123456')


Go to File > New > Project > Select ASP.NET MVC4 web application > Enter Name  > Click OK > Select Empty > OK

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.NET Entity Data Model under data > Enter model name > Add as shown in the below figure.

A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >Choose your data connection > select your database > next > Select table > enter Model  Namespace > Finish then .edmx will be created as shown in the below figure.

Create Controller and name it as LoginController. 
Controller(LoginController):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcLoginForm.Models;

namespace MvcLoginForm.Controllers
{
    public class LoginController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Login()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Login(USER user)
        {
            // this action is for handle post (login)
            if (ModelState.IsValid)
            {
                using (MvcDBEntities db= new MvcDBEntities())
                {
                    var credentials = db.USERS.Where(a => a.UserName.Equals(user.UserName) && a.Password.Equals(user.Password)).FirstOrDefault();
                    if (credentials != null)
                    {
                       // if you want to store session values
                        Session["UserID"] = credentials.User_id.ToString();
                        Session["UserName"] = credentials.UserName.ToString();
                        return RedirectToAction("Index");
                    }
                    else
                    {
                        ViewBag.Message = "Invalid Credentials.Please Try Again";
                        return View(user);
                    }
                }
            }
            return View(user);
        }
    }
}

View(Index.cshtml):
@{
    ViewBag.Title = "Index";
}

<h2>Welcome to Aspdotnet-Kishore</h2>

View(Login.cshtml):
@model MvcLoginForm.Models.USER
@{
    ViewBag.Title = "Login";
}
<h2>
    Login</h2>
@using (Html.BeginForm("Login", "Login", FormMethod.Post))
{
    //this  is for Invalid Credentials error message

    if (@ViewBag.Message != null)
    {
    <div style="color: Red">
        @ViewBag.Message
    </div>
    }
    <table style="border: 1px solid black;">
        <tr>
            <td>
                Username
            </td>
            <td>@Html.TextBoxFor(a => a.UserName)
            </td>
        </tr>
        <tr>
            <td>
                @Html.LabelFor(a => a.Password)
            </td>
            <td>
                @Html.PasswordFor(a => a.Password)
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" value="Login" />
            </td>
        </tr>
    </table>
}



The output of the above code as shown in the below figure.
You can download the code by clicking on the below Download image.

No comments:

Post a Comment

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.