Login Form in ASP.NET MVC

Hello Friends, in this tutorial I am going to create a simple Login Form in ASP.NET MVC. I am not using database or Authorization and Authonthentication for performing this task.

After completing this tutorial you will be able to:

• Create a simple Login Form in ASP.NET MVC.

Introduction:

Login Module is very important for any project. In this tutorial, I am going to create a simple Login Form without any Database.

Simple Login Form in ASP.NET MVC.

Follow the steps to create a Login Form in ASP.NET MVC.

Step 1 – Start Visual Studio and create an ASP.NET MVC application with the name LoginFormDemo.

Step 2- Choose an Empty template and Click OK.

Your solution will look like this.

Step 3- Right Click on Controller folder and add a Controller with the name Home.

Your HomeController will look like this.

Step 4- Now it’s time to create User Interface i.e, View. Right Click on the Index Action method and add Click on “Add View”.

Click on Add button.

Step 5- Now we need to add Model for this Right click on the Model folder in Solution Explorer and add a class. Model is simple a C# class and nothing else.

Step 6- Type a name UserLoginModel and Click on Add button.

Step 7- Write following code in UserLoginModel.

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

namespace LoginFormDemo.Models
{
 public class UserLoginModel
 {
 public string UserName { get; set; }
 public string Password { get; set; }
 public string Message { get; set; }
 }
}

Step 8- Now go to Index View and write following code.

@model LoginFormDemo.Models.UserLogin

@{
 ViewBag.Title = "Index";
}

<h2>Index</h2>

@using (Html.BeginForm()) {
 @Html.AntiForgeryToken()
 @Html.ValidationSummary(true)

if (Model != null)
 {
 <h1>
 @Model.Message
 </h1>
 }

<fieldset>
 <legend>UserLogin</legend>

<div class="editor-label">
 @Html.LabelFor(model => model.UserName)
 </div>
 <div class="editor-field">
 @Html.TextBoxFor(model => model.UserName)
 @Html.ValidationMessageFor(model => model.UserName)
 </div>

<div class="editor-label">
 @Html.LabelFor(model => model.Password)
 </div>
 <div class="editor-field">
 @Html.PasswordFor(model => model.Password)
 @Html.ValidationMessageFor(model => model.Password)
 </div>

<p>
 <input type="submit" value="Login" />
 </p>
 </fieldset>
}

Step 8- Now go to HomeController and add following code.

[HttpPost]
 public ActionResult Index(UserLoginModel objUserLogin)
 {
 if (objUserLogin.UserName == "debugonweb" && objUserLogin.Password == "debugonweb")
 return RedirectToAction("WelcomePage");
 else
 {
 objUserLogin.Message = "Invalid UserName/Password";
 return View(objUserLogin);
 }

}

In above code, you can see we verified the User Name and Password after this the user will be redirected to Welcome Page. This line of code is responsible for redirecting the user to the Welcome page.

 return RedirectToAction("WelcomePage");

In the case of wrong User Name and Password, an error will be thrown.

Step 9- Now what we need to do is to create a Welcome Page for User. For this first add an Action method in HomeController.

 public ActionResult WelcomePage()
 {
 return View();
 }

Step 10- Now associate this Action method with a View. Right Click on WelcomePage action method and add a View with the name WelcomePage. Write following code in WelcomePage.cshtml file.

@{
ViewBag.Title = “WelcomePage”;
}

<h2>Welcome To Debug On Web Login Form Demo</h2>

So all done now we need to test the application. Run the application.

Now enter debugonweb in User Name textbox and debugonweb in password textbox and click on Login button. A welcome page will appear.

You can download the complete source code from here.

You must also follow the related links.

• CRUD Operation using NHibernate in ASP.NET MVC.
• Web Grid in ASP.NET MVC.
• Introduction to Entity Framework in .NET.
• Signalr in ASP.NET MVC.

Hope this post is helpful for you. We will continue writing on useful topics in the upcoming tutorials.

Thank You.