This article dscribes how to create a country form in MVC 2 without a database.
1. Go to Visual Studio 2010 and select "File" -> "New" -> "Project..." then select "Visual C#", select "web" and select "ASP.Net MVC2 Web Application".
2. Open Solution Explorer. It contains default folders like Content, Controllers, Model, Scripts, Views and Global.asaxpage.
Content folder: Contains Style Sheets, Images and so on.
Script Folder: It contains some default jQuery files.
View Folder: Shared (it contains the Master Page).
3. Delete file like (Home and Account) in Model and Controllers.
Step 1: Create a Model in MVC
The first step is to create a Country model. Select the Model folder and right-click then select "Add" -> "New Item". A pop-up will be displayed, select the class and name it countryModel. The Class has six the properties: CountryId, Countryname, Createdby, Createdon,Status and Reason.
For Validation on server-side:
use NameSpace
using System.ComponentModel.DataAnnotations;
Source Code: (CountryModel.cs)
public class Country
{
[Required(ErrorMessage = "This Field is Required")]
public int CountryId { get; set; }
[Required(ErrorMessage = "This Field is Required")]
public string CountryName { get; set; }
[Required(ErrorMessage = "This Field is Required")]
public string CreatedBy { get; set; }
[Required(ErrorMessage = "This Field is Required")]
public DateTime CreatedOn { get; set; }
[Required(ErrorMessage = "This Field is Required")]
public bool Status { get; set; }
[Required(ErrorMessage = "This Field is Required")]
public string Reason { get; set; }
}
Step 2: Define the controller with Action Result
The next step is to select the controller folder and right-click on "Add controller" then it will display a pop-up with the controller name that will be "Deafult Controller" and we can modify the controller name as you like "Country Controler" and check box with (Create , Delete and Update scenario). If you check the check box then it will automatically create the actions methods for (Create, Delete and Update scenario). Add References of the Model and write the source code as:
Source Code For Controller With Action Methods (CountryController.c):
using Country.Models;
public class CountryController : Controller
{
static List<CountryModel> cty = new List<CountryModel>();
public ActionResult Index()
{
return View(cty.ToList());
}
//
// GET: /CountryNew/Details/5
public ActionResult Details(int id)
{
var item = cty.Where(x => x.CountryId == id).SingleOrDefault();
return View(item);
}
//
// GET: /CountryNew/Create
public ActionResult Create()
{
return View();
}
//
// POST: /CountryNew/Create
[HttpPost]
public ActionResult Create(CountryModel ctycreate)
{
try
{
// TODO: Add insert logic here
if (!ModelState.IsValid)
{
return View("Create", ctycreate);
}
cty.Add(ctycreate);
return RedirectToAction("Index");
}
catch
{
return View();
}
}
}
Step 3: create strongly typed view using the class
- The next step is to create a view for the Action methods. First select an index action method and right-click on the action method then a pop-up will appear; click on "Add view".
- The View Name will be displayed and we have two options ("create a partial class view" and "Strong Typed view"). Check on "Strong typed view" then select the "View Data class" Drop down.
- If data is not displayed in the "view Data Class" then just bulid, then the Project is displayed in the "Model Name Class"(Model Class Name") after selecting the drop down then "View Content"(options like Empty, Edit, Delete, Details, Create and List). Select "List" and click on the "Add" Button then the View is created for the Index Action method.
Continue with the same process for all Action Methods.
Index.aspx(View File)
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<CountryInMvc.Models.Country>>" %>
<!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 id="Head1" runat="server">
<title>Index</title>
</head>
<body>
<table>
<tr>
<th>
</th>
<th>
CountryId
</th>
<th>
CountryName
</th>
<th>
CreatedBy
</th>
<th>
CreatedOn
</th>
<th>
Status
</th>
<th>
Reason
</th>
</tr>
<% foreach (var item in Model)
{ %>
<tr>
<td>
<%: Html.ActionLink("Edit", "Edit", new {id=item.CountryId /* id=item.PrimaryKey */ }) %>
|
<%: Html.ActionLink("Details", "Details", new {id=item.CountryId /* id=item.PrimaryKey */ })%>
|
<%: Html.ActionLink("Delete", "Delete", new {id=item.CountryId/* id=item.PrimaryKey */ })%>
</td>
<td>
<%: item.CountryId %>
</td>
<td>
<%: item.CountryName %>
</td>
<td>
<%: item.CreatedBy %>
</td>
<td>
<%:item.CreatedOn %>
</td>
<td>
<%: item.Status %>
</td>
<td>
<%: item.Reason %>
</td>
</tr>
<% } %>
</table>
<p>
<%: Html.ActionLink("Create New", "Create") %>
</p>
</body>
</html>
Details.Aspx(Details View)
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<CountryInMvc.Models.Country>" %>
<!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 id="Head1" runat="server">
<title>Details</title>
</head>
<body>
<fieldset>
<legend>Fields</legend>
<div class="display-label">
CountryId</div>
<div class="display-field">
<%: Model.CountryId %></div>
<div class="display-label">
CountryName</div>
<div class="display-field">
<%: Model.CountryName %></div>
<div class="display-label">
CreatedBy</div>
<div class="display-field">
<%: Model.CreatedBy %></div>
<div class="display-label">
CreatedOn</div>
<div class="display-field">
<%:Model.CreatedOn %></div>
<div class="display-label">
Status</div>
<div class="display-field">
<%: Model.Status %></div>
<div class="display-label">
Reason</div>
<div class="display-field">
<%: Model.Reason %></div>
</fieldset>
<p>
<%: Html.ActionLink("Edit", "Edit", new { /* id=Model.PrimaryKey */ }) %>
|
<%: Html.ActionLink("Back to List", "Index") %>
</p>
</body>
</html>
Create.aspx(Create View)
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<CountryInMvc.Models.Country>" %>
<!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 id="Head1" runat="server">
<title>Create</title>
</head>
<body>
<% using (Html.BeginForm())
{%>
<%: Html.ValidationSummary(true) %>
<fieldset>
<legend>Fields</legend>
<div class="editor-label">
<%: Html.LabelFor(model => model.CountryId) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.CountryId) %>
<%: Html.ValidationMessageFor(model => model.CountryId) %>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.CountryName) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.CountryName) %>
<%: Html.ValidationMessageFor(model => model.CountryName) %>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.CreatedBy) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.CreatedBy) %>
<%: Html.ValidationMessageFor(model => model.CreatedBy) %>
</div>
<div class="editor-label">
<%:Html.LabelFor(model=>model.CreatedOn) %>
</div>
<div class="editor-field, tcalToday">
<%:Html.TextBoxFor(model => model.CreatedOn)%>
<%:Html.ValidationMessageFor(model => model.CreatedOn )%>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.Status) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Status) %>
<%: Html.ValidationMessageFor(model => model.Status) %>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.Reason) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Reason) %>
<%: Html.ValidationMessageFor(model => model.Reason) %>
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
<% } %>
<div>
<%: Html.ActionLink("Back to List", "Index") %>
</div>
</body>
</html>
Step 4:
For the next step, open the "Global.asax" file and change the Controller Name to "Country" and change the Action Method to "Index". It is when you request a page from IIS that it goes to the route table and checks the controller and Action Method. In the controller it displays the Index View as the default.