Creating login page in mvc 4

In this article we are going to discuss how to create a sample login page using mvc 4 template. This will be useful for the beginners who are very new to mvc applications. We will see step by step procedure for creating the mvc 4 sample application in visual studio 2013.

This will be useful for the beginners who are very new to mvc applications. We will see step by step procedure for creating the mvc 4 sample application in visual studio 2013.

Step 1:

1.Open visual studio select new project, mvc 4 web application template.
2.Select the empty template like below and click Ok.


3.The default folder structure will be created with folders models,controllers and views


4.Now right click on models folder and add a class file name it as loginDTO.
Take few public properties like Userid, password,email and phonenumber etc.,

5.Build the project inorder to load your class file.

Step 2:

1.Right click on controllers folder and add new controller with name as login.

2.With in the action method Index write the code as shown in the loginController.cs.

3.Now right click in the action method and select add view option as shown below.

add view

4.Write the markup to desing your view as shown in the Index.cshtml

5.Create another action method in loginController and name it as users.

6.Right click inside the method users and select add view option, do necessary design for page to show as succesfull login.

All the code files:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace sampleLoginApp.Models
public class loginDTO
public string UserId { get; set; }
public string Password { get; set; }



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using sampleLoginApp.Models;

namespace sampleLoginApp.Controllers
public class loginController : Controller
public static SqlConnection cn = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ToString());

// GET: /login/
public ActionResult Index()
return View();
public ActionResult Index(FormCollection fm)//Action Method

string id, password;
id= fm["UserId"];
password = fm["Password"];

Verify(name, password);
if (Verify(id, password))
if (TempData["sess"] == null)
TempData["sess"] = name.ToString();
return RedirectToAction("Users");
return View();

ViewBag.Message = "Invalid UserId or Password";
return View();

private bool Verify(string id, string password)
bool b = false;
if (cn.State == ConnectionState.Open)
string s = "select count(*) from users where UserId ='" + id+ "' and password='" + password + "'";
SqlCommand cmd = new SqlCommand(s, cn);
b= Convert.ToBoolean(cmd.ExecuteScalar());

return b;

public ActionResult Users()

return View();


@model sampleLoginApp.Models.loginDTO

ViewBag.Title = "Index";

<script type="text/javascript">

function myfunction()
var name = document.getElementById("UserId").value;
var pwd = document.getElementById("Password").value;
alert("mandatory fields..");

#myButton {
-moz-box-shadow: 0px 11px 13px -7px #73274c;
-webkit-box-shadow: 0px 11px 13px -7px #73274c;
box-shadow: 0px 11px 13px -7px #73274c;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #59b3b3), color-stop(1, #c71c2a));
background: -moz-linear-gradient(top, #59b3b3 5%, #c71c2a 100%);
background: -webkit-linear-gradient(top, #59b3b3 5%, #c71c2a 100%);
background: -o-linear-gradient(top, #59b3b3 5%, #c71c2a 100%);
background: -ms-linear-gradient(top, #59b3b3 5%, #c71c2a 100%);
background: linear-gradient(to bottom, #59b3b3 5%, #c71c2a 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#59b3b3', endColorstr='#c71c2a',GradientType=0);
background-color: #59b3b3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #297b8f;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 13px;
font-weight: bold;
padding: 11px 12px;
text-decoration: none;
text-shadow: 0px 1px 0px #5b8a3c;

@using (Html.BeginForm())
<body style="background-color:lightgrey;">

<div class="" style="margin: 100px 250px 100px 250px;">

<fieldset style="height:240px; color:darkblue; background-color:honeydew; width:500px;">

<legend>Login Page</legend>

@*<form method="post" @*action="~/Views/Customers/login.cshtml"*@

<table style="margin-left:15%; background-color: #ecffff; margin-top:25px; height:180px; width:380px">


<td style="color:magenta">@Html.LabelFor(model => model.UserId)</td>

<td>@Html.EditorFor(model => model.UserId)</td>



<td style="color:magenta">@Html.LabelFor(model => model.Password)</td>

<td>@Html.PasswordFor(model => model.Password)</td>



<td>@Html.ActionLink("Register", "Create", "Customers")</td>

<td style="color:red"> <input type="submit" id="myButton" value="Login" onclick="return myfunction()" /> @ViewBag.Message</td>






Step 3:

1.Go to solution explorer expand appstart folder and open the routeconfig.cs file and change the HomeController name to loginController as shown in the RouteConfig.Cs

2.Build the solution once again to make sure all the changes have been saved in the project.

3.Execute the project by pressing cntrl+F5

4.The following login page will be displayed.


Step 4:

1.You can perform client side validation using javascript. I have just shown the alert message if userid and password is empty.




Hope you have enjoyed by reading the article and now you can create your own login page using MVC 4.


No responses found. Be the first to comment...

  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name: