Create a simple login form in MVC ASP.NET

Manish Singh

7y833.1k22100Article

MVC tutorialsMVC ASP.NETlogin form in MVC ASP.NETMVC Login Form

22 Comments

Join the conversation! Your thoughts help the community grow.

Maulik Tank6y ago
Why you are use [AcceptVerbs(HttpVerbs.Post)] it is use full or not
Ranjana Goel9y ago
Exception Details: System.InvalidOperationException: The view 'Record' or its master was not found. The following locations were searched:~/Views/Login/Record.aspx~/Views/Login/Record.ascx ~/Views/Shared/Record.aspx ~/Views/Shared/Record.ascx
Manav Pandya9y ago
Do you have same functionality for asp.net mvc ???
Manav Pandya9y ago
Thanks for sharing this one
Venkat Lakshmanan10y ago
I have error in HTTP 404.The resource cannot be found.
Srinivas11y ago
Good Article
Ujjval Shukla11y ago
Manish,I want download of above article.
Surya Venkatesan11y ago
i tried this coding.. but output is not displayed and no errors in the program
gayathri r11y ago
Add those 3 views(Login ,Record, Index) under views by creating a folder Login.
ambrish kumar11y ago
Hi all add following code in global file this will be ok. add the controller and start page in action. routes.MapRoute( "Default", // Route name "{controller}/{action}/{id}", // URL with parameters new { controller = "Login", action = "Record", id = UrlParameter.Optional } // Parameter defaults );
Bhavik Patel12y ago
Good article but one suggestion while writing code use proper name of class and method so it helps to understand better way
chetan pal12y ago
I made the Project as you define but can any one tell me how i will run it..
Jiten Lad12y ago
can u give example with database connect in it and showing in grid....
Jiten Lad12y ago
now i understood mvc...
Suma B13y ago
Hi,I tried all steps given in this article but my solution create an error:" Access is denied".Plz give me solution ASAP
Suman Kumar13y ago
Nice ...
Asha Raju14y ago
Hi, I have created the project as show above but i am getting an error "The resource cannot be found.Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly. Can you please suggest what i need to do .
Ranjan14y ago
Hi,I tried all steps given in this article but my solution create an error:" The resource cannot be found".Plz give me solution ASAP
Former member14y ago
Hi....This is really nice article. http://dotnetpools.com/Article/ArticleDetiail/?articleId=24&title=Ajax%20Login%20Example%20Using%20Jquery%20%20In%20Asp.net
Pooja Doshi14y ago
Hey..i m getting an error hile creating dis in my application like "The model item passed into the dictionary is of type 'System.Collections.Generic.List`1[Final_MLM.Login]', but this dictionary requires a model item of type 'Final_MLM.Models.Login'."... plz help to solve dis error..
- manesh aryan13y ago
  problem is solver: when adding a view page then in that window select the view content as list
Neeraj Rai14y ago
This is a good one to understand the MVC

Introduction

Using ASP.NET MVC tools we have created a simple login form application. In this application we have created three fields: name, password, email. The Microsoft ASP.NET MVC framework is Microsoft's newest framework for building web applications. The ASP.NET MVC framework was designed from the ground up to make it easier to build good software. The ASP.NET MVC framework was created to support pattern-based software development. In other words the framework was designed to make it easier to implement software design principles and patterns when building web applications. MVC model contains all of an application's logic that is not contained in a View or Controller. MVC view contains HTML markup and view logic. MVC controller contains control-flow logic. An MVC controller interacts with MVC Models and Views to control the flow of application execution.

Step 1: Open Visual Studio 2010.

Go to file -> New->Projects.
Create an ASP.NET MVC 2 Empty Web Application.
Name is "loginform"

Step 2: Add a class in model folder.

Right click on the Model folder ->add new items->add class.
Name of Class is "sonal".
In a class define the properties.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Loginform.Models
{
public class sonal
{
public string Name { get; set; }
public int Passward { get; set; }
public string Email { get; set; }
}
}

Step 3: Add a controller.

Right click on the Controllers folder ->add->Controllers.
Name of Controllers is "Login".
In a controller, define the request.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Loginform.Models;
namespace Loginform.Controllers
{
public class loginController : Controller
{
//
// GET: /login/
static List<sonal> sun = new List<sonal>();
public ActionResult Index()
{
return View(sun);
}
public ActionResult Record(sonal sun)
{
return View(sun);
}
public ActionResult Login()
{
return View();
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Login(sonal sonu)
{
if (!ModelState.IsValid)
{
return View("Login", sonu);
}
sun.Add(sonu);
return RedirectToAction("Index");
}
}
}

Step 4: Add the Three Views

Name of first view is "Index".

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Loginform.Models.sonal>>" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Index</title>
</head>
<body bgcolor="#66ffcc">
<div>
<table>
<tr>
<th></th>
<th>
Nmae
</th>
<th>
Email
</th>
</tr>
<% foreach (var sonal in Model) { %>
<tr>
<td>
<%= Html.ActionLink("Record", "Record",sonal )%>
</td>
<td>
<%= Html.Encode(sonal.Name) %>
</td>
<td>
<%= Html.Encode(sonal.Email) %>
</td>
</tr>
<% } %>
</table>
<p>
<%= Html.ActionLink("Login Now", "Login") %>
</p>
</div>
</body>
</html>

Step 5: Add the second view

Name of view is "Login view"

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Loginform.Models.sonal>" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Login</title>
</head>
<body bgcolor="#ff80c0">
<div>
<h2 >Login</h2>
<%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %>
<% using (Html.BeginForm()) {%>
<fieldset>
<legend>Fields</legend>
<p>
<label for="Name">Name:</label>
<%= Html.TextBox("Nmae") %>
<%= Html.ValidationMessage("Id", "*") %>
</p>
<p>
<label for="Passward">Passward:</label>
<%=Html.Password("*") %>
<%= Html.ValidationMessage("Passward", "*") %>
</p>
<p>
<label for="Email">Email:</label>
<%= Html.TextBox("Email") %>
<%= Html.ValidationMessage("Email", "*") %>
</p>
<p>
<input type="submit" value="Login" />
</p>
</fieldset>
<% } %>
<div>
<%=Html.ActionLink("Back to List", "Index") %>
</div>
</div>
</body>
</html>

Step 6: Add the third view

Name of the view is "recordview"

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Loginform.Models.sonal>" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Record</title>
</head>
<body bgcolor="#ff80ff">
<div>
<h2>Details</h2>
<fieldset>
<legend>Display Fields</legend>
<p>
Nmae:
<%= Html.Encode(Model.Name) %>
</p>
<p>
Passward:
<%= Html.Encode(Model.Passward) %>
</p>
<p>
Email:
<%= Html.Encode(Model.Email) %>
</p>
</fieldset>
<p>
<%=Html.ActionLink("Back to List", "Index") %>
</p>
</div>
</body>
</html>

Step 7: Press crtl+f5 run the application.