In this post we shall create a simple User Registration page using Asp.Net MVC 2 Application. We will make
use of the Empty Web Application template to create this sample so that we will
understand the basics of MVC.
The Registration page will have the controls Name, Age, Address, etc and the buttons Save and Cancel. When the user enters the details and click Save, it should validate the details and pass on the same to the Model.
The Registration page will have the controls Name, Age, Address, etc and the buttons Save and Cancel. When the user enters the details and click Save, it should validate the details and pass on the same to the Model.
1. Open Visual Studio 2008
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 “UserModel.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 UserModel
{
[DisplayName("Name:")]
public string Name { get; set; }
[DisplayName("Age:")]
public int Age { get; set; }
[DisplayName("Gender:")]
public char Gender { get; set; }
[DisplayName("Address:")]
public string Address { get;
set; }
[DisplayName("Country:")]
public string Country { get;
set; }
}
}
8. Now, Right click on the Controllers folder and select Add -> Controller
9. Name the controller as “UserController” 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;
8. Now, Right click on the Controllers folder and select Add -> Controller
9. Name the controller as “UserController” 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 UserController
: Controller
{
//
// GET:
/User/
private
List<SelectListItem>
GetCountries()
{
List<SelectListItem> lstCountries = new List<SelectListItem>();
SelectListItem
listItem;
//
listItem = new
SelectListItem{Value = "1", Text="New
York"};
lstCountries.Add(listItem);
listItem = new
SelectListItem{Value = "2", Text="London"};
lstCountries.Add(listItem);
listItem = new
SelectListItem{Value = "3", Text="Tokyo"};
lstCountries.Add(listItem);
listItem = new
SelectListItem{Value = "4", Text="Delhi"};
lstCountries.Add(listItem);
listItem = new
SelectListItem{Value = "5", Text="Paris"};
lstCountries.Add(listItem);
//
return
lstCountries;
}
//
public ActionResult Index()
{
ViewData["Country"]
= GetCountries();
return
View();
}
//
[HttpPost]
public ActionResult Index(UserModel
model)
{
if
(ModelState.IsValid)
{
ViewData["Message"] = "User
<b>" + model.Name + "</b>
details saved Succesfully.";
}
ViewData["Country"]
= GetCountries();
return
View(model);
}
}
}
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.UserModel”
16. In the View Content dropdown select Empty, and click Add.
14. This will create a folder User 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.UserModel>" %>
<!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>User
Registration</title>
<link href="../../Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<% using
(Html.BeginForm()) { %>
<center>
<table style="width:300px; border:1px double #000000; padding: 5 5 5 5; text-align:left;">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td class="label">
<%=
Html.LabelFor(m => m.Name)%>
</td>
<td>
<%=
Html.TextBoxFor(m => m.Name, new {
@class = "text" })%>
</td>
</tr>
<tr>
<td class="label">
<%=
Html.LabelFor(m => m.Age)%>
</td>
<td>
<%=
Html.TextBoxFor(m => m.Age, new { @class
= "text" })%>
</td>
</tr>
<tr>
<td class="label">
Gender
</td>
<td>
<%=
Html.RadioButtonFor(m => m.Gender,
"M", new { @class = "text" })
%> Male
<%=
Html.RadioButtonFor(m => m.Gender,
"F", new { @class = "text" })
%> Female
</td>
</tr>
<tr>
<td class="label">
<%=
Html.LabelFor(m => m.Address)%>
</td>
<td>
<%=
Html.TextBoxFor(m => m.Address, new {
@class = "text" })%>
</td>
</tr>
<tr>
<td class="label">
<%=
Html.LabelFor(m => m.Country)%>
</td>
<td>
<%=
Html.DropDownListFor(m => m.Country,
(IEnumerable<SelectListItem>)ViewData["Country"],
new
{ @class = "text" }) %>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Save" class="button" />
<input type="reset" value="Cancel"
class="button"
/>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2" align="center">
<%=
Html.Encode(ViewData["Message"]) %>
</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 /User/ to the root path.
http://localhost:3655/User/
No comments:
Post a Comment