Login Form in Asp.Net MVC 4
In this
blog, I am going to tell how to create a simple login form in asp.net mvc 4.
Login form
is frequently used in web application to authenticate a user.
Step 1:
First
create a table in database named “Login” like this:
Step 2:
Now select
the asp.net mvc 4 web application and give a suitable name to the project like
I have give the name “LoginFormMvcApp”
And click
on ok button
Another
window will come on screen – asking you to select the project template
Select
empty template and razor engine in the view engine list and click on ok button.
Once you
clicked the ok button, it will create your asp.net mvc 4 empty project and show
the basic structure of your project in the solution explorer like this:
Step 3:
Next add a
controller to the project, for this right click on the controller in the
solution explorer shown as below:
Once you
click on controller – a popup will open like this:
Give the
name of the controller “HomeController” and click on Add button, this will add
a controller in your project and show the code like below:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using LoginFormMvcApp.Models;
namespace LoginFormMvcApp.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
[HttpGet]
public ActionResult Index()
{
return View();
}
}
}
Step 4:
Now add a model to the
project. Model is basically a simple .net class and used to write the business
logic of the project. To add a model to the project right click on model in the
solution explorer like below:
Select
class in the menu and this will open a pop-up like below:
Give a
suitable name to the class like I have given “Student.cs” and click on Add
button and write the below code in the
model class:
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
namespace LoginFormMvcApp.Models
{
public class Student
{
[Required(ErrorMessage="Username is mandatory")]
public string Username { get; set; }
[Required(ErrorMessage="Password is mandatory")]
public string Password { get; set; }
public bool login(string username, string password)
{
string ConnString = ConfigurationManager.ConnectionStrings["ConnString"].ConnectionString;
SqlConnection conn = new SqlConnection(ConnString);
conn.Open();
SqlCommand cmd = new SqlCommand("Select * from Login where username='"+username+"' and password ='"+password+"'", conn);
Object obj = cmd.ExecuteScalar();
if (obj == null)
{
return false;
}
else
{
return true;
}
}
}
}
In this model class, I have created
two properties username and password and a method Login to authenticate the
user.
Step 5:
Before proceeding
further, build the project and check that all is good in the project.
In this step, we will add
a view to the project. To add a view to the project right click on the view in
the solution explorer like below:
Select view in the menu
and a pop-up will open like below:
Give the
view a suitable name like I have given “Index” and check on Create a strongly-typed
view and select the Student model from the list and click on add button and add
the below code in the Index view:
@model LoginFormMvcApp.Models.Student
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div >
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<fieldset style="max-width:500px;">
<legend>Student Login Form</legend>
<div>
<div>
Username
</div>
<div>
@Html.TextBoxFor(m => m.Username)
@Html.ValidationMessageFor(m => m.Username)
</div>
</div>
<div>
<div>
Password
</div>
<div>
@Html.PasswordFor(m => m.Password)
@Html.ValidationMessageFor(m =>
m.Password)
@ViewBag.Message
</div>
</div>
<div>
<input type="submit" title="Submit" />
</div>
</fieldset>
}
</div>
</body>
</html>
Step 6:
Now add
another view to the project to welcome the user and named this view “Welcome”
and also make this view as strongly-typed view and add the below code in the
view:
@model LoginFormMvcApp.Models.Student
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Welcome</title>
</head>
<body>
<div>
<h2>Welcome</h2> @Model.Username
</div>
</body>
</html>
Step 7:
Now modify
the code in the controller like below:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using LoginFormMvcApp.Models;
namespace LoginFormMvcApp.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
[HttpGet]
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(Student student)
{
if (ModelState.IsValid)
{
if (student.login(student.Username, student.Password))
{
return View("Welcome",student);
}
else
{
ViewBag.Message = "Invalid
Username or password";
return View();
}
}
else
{
return View();
}
}
}
}
Step 8:
Now add the
connection string in web.config file like below:
<connectionStrings>
<add name="ConnString" connectionString="Data Source=Your data source name;Initial Catalog=Your
database name;Integrated Security=true;" providerName="System.Data.SqlClient"/>
</connectionStrings>
Step 9:
Now build the project and
if all is good , run the project.
Now click on submit
It will give you the
error messages and tell you that username and password is mandatory.
Now write the username
and put wrong password in the textbox and click on submit button
It will tell you either
the username or password is invalid
Now put the correct
username and password in the textbox and click on submit button
It will give you the
welcome message with your username.
Thank you for reading this article, please
put your valuable comment or any suggestion/question in the comment box.
No comments:
Post a Comment