In this post we shall create a simple Login page using Asp.Net MVC 2 Application from the
scratch. We will make use of the Empty
Web Application template to create this sample so that we will understand
the basics of MVC.
The login page will have the controls User Name and Password, and the buttons Login and Cancel. When the user types the username and password, it should validate the details against the model and display an appropriate message.
1. Open Visual Studio 2008The login page will have the controls User Name and Password, and the buttons Login and Cancel. When the user types the username and password, it should validate the details against the model and display an appropriate message.
2. Create a new Project of type Asp.Net MVC 2 Empty Web Application
3. Give a Name, Location and save the Project
4. This will create the basic Project structure.
5. Now, Right click on the Models folder and select Add -> Class
6. Name the class file as “LoginModel.cs”, and click Add
7. Open the model file and add the following code.
using System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.Mvc;
using
System.ComponentModel;
using
System.ComponentModel.DataAnnotations;
namespace
MvcSample.Models
{
public class LoginModel
{
[DisplayName("User ID:")]
public string UserID { get; set; }
[DataType(DataType.Password)]
[DisplayName("Password:")]
public string Password { get;
set; }
}
}
8. Now, Right click on the Controllers folder and select Add -> Controller
9. Name the controller as “LoginController” and click Add
10. Now, open the controller file add the reference to the Model file
using MvcSample.Models;
11. Add the following code to the Controller file.
using System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.Mvc;
using
MvcSample.Models;
namespace
MvcSample.Controllers
{
public class LoginController
: Controller
{
// Action
Method for the Initial Page Load
// GET: /Login/
public ActionResult Index()
{
return
View();
}
//
// Action
Method to validate Http Post after the User Clicks Login Button.
[HttpPost]
public ActionResult Index(LoginModel
model)
{
if
(ModelState.IsValid)
{
if
((model.UserID == "admin")
&& (model.Password == "admin"))
{
return
RedirectToAction("Index", "HelloMVC");
}
else
{
ModelState.AddModelError("", "User
Name or Password is invalid.");
}
}
return
View(model);
}
}
}
In this sample we will check the login credentials against a hardcoded set of values admin/admin, in the actual implementation we will have to do a look-up in the database and decide on the validity of the login credentials.
In this sample we will check the login credentials against a hardcoded set of values admin/admin, in the actual implementation we will have to do a look-up in the database and decide on the validity of the login credentials.
11. Build the Project
12. Right click on any of the Index methods and select “Add View”
13. Give the name Index for the view
14. Check the “Create as Strongly Typed View” Checkbox
15. In the View data Classes Dropdown select the model “MvcSamples.Models.LoginModel”
16. In the View Content dropdown select Empty, and click Add.
14. This will create a folder Login under the Views folder and will also add the Index.aspx file
15. Open the Index.aspx file and add the following code.
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MvcSample.Models.LoginModel>" %>
<!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>
<div>
<% using
(Html.BeginForm()) { %>
<center>
<table style="width:400px; border:1px double #000000; padding: 2 2 2 2;">
<tr>
<td>
<%=
Html.LabelFor(m => m.UserID) %>
</td>
<td>
<%= Html.TextBoxFor(m
=> m.UserID) %>
</td>
</tr>
<tr>
<td>
<%=
Html.LabelFor(m => m.Password)%>
</td>
<td>
<%=
Html.PasswordFor(m => m.Password)%>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit"
value="Login"
/>
<input type="reset"
value="Cancel"
/>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"
align="left"
style="font-family:Verdana; font-size:12px; color:Red;">
<%=
Html.ValidationSummary(true, "Please correct the following validation
Errors.") %>
</td>
</tr>
</table>
</center>
<% } %>
</div>
</body>
</html>
16. Build and run the application
17. In the address bar append /Login/ to the root path.
http://localhost:3655/Login/
18. Enter an invalid userId and Password and submit the form. The following error which we set in the Model will get displayed.
Please correct the following validation Errors.
User Name or Password is invalid.
19. Now enter
admin/admin as the UserID and password and click on enter, this time it will
not show any errors.
No comments:
Post a Comment