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.

Login Form

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.

Login Form

Step 2- Choose an Empty template and Click OK.

Login Form

Your solution will look like this.

Login Form

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

Login Form

Your HomeController will look like this.

Login Form

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”.

Login Form

Click on Add button.

Login Form

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.

Login Form

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.

Login Form

 

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

Login Form

You can download the complete source code from here.

You must also follow the related links.

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

Thank You.

 

 

Leave a Comment