Login form in asp.net Mvc4 c# and Html5.

Introduction:-

In this post I will show you how to create login using asp.net Mvc4.

Steps:-

Step1:- Create a new empty asp.net MVC4 web application. While creating an application select Razor view.

Step2:- Add a database

 Go to solution explorer ->right click on App_Data -> Add new items-> Select Sql server database under data -> Enter database name -> Add

Step3:- Create table to fetch Data

Open Database -> right click on table -> add new table -> add columns -> save -> enter table name -> ok

In this example, I have used table as below

Step4:- Add Entity Data Model

Go to solution explorer ->right click on project name  from solution explorer -> add -> new item -> Select Ado.net Entity model under data  -> enter model name -> Add.

A popup window will come -> select Generate from database -> next -> choose your data connection -> select your database -> next -> select tables -> enter model name -> finish.

Step5:- Apply validation on model

Right click on Model -> Add -> class -> give class name UserModel and Add.

UserModel.cs:-

public class UserModel

    {

        public int User_Id { get; set; }

 

        [Required(ErrorMessage = "Please Provide User Password?", AllowEmptyStrings = false)]

        public string User_Pwd { get; set; }

       

 

        [Required(ErrorMessage = "Please Provide User Name?", AllowEmptyStrings = false)]

        [DataType(System.ComponentModel.DataAnnotations.DataType.Password)]

        public string User_Name { get; set; }

 }

 Step6:- Create a controller

Right click on controller -> Add -> controller -> Give the controller name -> Select Empty controller -> Add

I have existing Login Controller.

Inside the controller existing Action method name is Index. So change the name of Action Method as login.

public class LoginController : Controller

    {

        //

        // GET: /Login/

 

        public ActionResult Login()

        {

            return View();

        }

 

    }

Step7:- Add a view for Login action method and Design login Page as below

Right click on login Action method -> add view -> Enter view Name -> Select view Engine(razor) -> check ‘create strong type view’ -> select your model -> Add

        [HttpPost]

        [ValidateAntiForgeryToken]

        public ActionResult Login(UserModel uModel)

        {

            if (ModelState.IsValid)

            {

                using (MasterEntities masterEntity = new MasterEntities())

                {

                    var user = (from u in masterEntity.tbl_login where u.User_Name == uModel.User_Name && u.User_Pwd == uModel.User_Pwd select u).FirstOrDefault();

 

                  if(user != null)

                    {

                        Session["UserName"] = user.User_Name.ToString();

                        return RedirectToAction("AfterLogin");

                    }

                      else

                      {

                        ViewBag.Message = "Invalid Login";

                        return RedirectToAction("Login");

                      }

                }

            }

            return View(User);

        }

Step8:- Add new Action method name as AfterLogin in the same controller for show user name after login

public ActionResult AfterLogin()

        {

            if (Session["UserName"] != null)

            {

                return View();

            }

            else

            {

                return RedirectToAction("Login");

            }

        }

 

Step9:- Add view for AfterLogin Action Method to show user name after login

 

@model MvcTest4.Models.UserModel

@{

    ViewBag.Title = "AfterLogin";

}

<h2>AfterLogin</h2>

<text> Welcome:@Session["UserName"].ToString() </text>

Press F5 to run the application.