I. What is MVC? a. http://www.asp.net/mvc/tutorials/older-versions/overview/asp-net-mvc-overview II. Software Requirements for this tutorial a. Visual Studio 2010/2012. You can get your free copy here Microsoft Visual Studio 2012 b. MVC Framework Option 1 - Install using a standalone installer http://www.microsoft.com/en-us/download/details.aspx?id=30683 Option 2 - Install using Web Platform Installer http://www.microsoft.com/web/handlers/webpi.ashx?command=getinstallerredirect&appid=MVC4VS2010_Loc III. Creating your first MVC4 Application a. On the Visual Studio click file new solution link b. Click Other Project Type>Visual Studio Solutions
and on the templates window select blank solution
and let us name our solution MVCPrimer. c. Now Click File>New
and select Project d. Select Visual C#>Web>
and select ASP.NET MVC 4 Web Application
and Enter MyWebSite as Name e. Select Empty, Razor as view engine
and uncheck Create a Unit test project f. You can now view a basic MVC 4 Application Structure on your solution explorer g. Now we will add our first controller by right clicking on the controllers folder on your solution explorer
and select Add>Controller h. Change the name of the controller to HomeController
and under the scaffolding options select Empty MVC Controller. i. You will now see a basic controller with an Index method that returns an ActionResult j. We will now add a new View Folder for our Home Controller. Right click on the views folder on your solution explorer
and select Add> New Folder>
and name this folder Home k. Add a new View by right clicking on Views>Home Folder
and select Add View. l. Name the view Index,
and select Razor(CSHTML) as View Engine, All checkbox should be unchecked for now
and click add. m. Relationship between our HomeController
and Home Views Sub Folder n. Add new HTML Contents to our newly created Index View o. Press F5 to run our MVC Application p. We will create our new model, Right click on the models folder of our solution explorer
and select Add> Class. q. Let us name our class
Customer r. Edit the
Customer class with the following code s. Open the HomeController by double clickin HomeController of our Controllers folder
and edit the HomeControllerusing System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.Mvc;
namespace
MyWebSite.Controllers
{
public class HomeController
: Controller
{
//
// GET:
/Home/
public ActionResult Index()
{
return
View();
}
public ActionResult ListCustomers()
{
List<Models.Customer> customers = new
List<Models.Customer>();
//Add
First
Customer to Our Collection
customers.Add(new Models.Customer()
{
Id = 1,
CompanyName = "Volvo",
ContactNo = "123-0123-0001",
ContactPerson = "Gustav Larson",
Description = "Volvo Car Corporation, or Volvo Personvagnar AB, is
a Scandinavian automobile manufacturer founded in 1927"
});
//Add
Second
Customer to Our Collection
customers.Add(new Models.Customer()
{
Id = 2,
CompanyName = "BMW",
ContactNo = "999-9876-9898",
ContactPerson = "Franz Josef Popp",
Description = "Bayerische Motoren Werke AG, (BMW; English: Bavarian Motor Works) is a
" +
"German automobile, motorcycle
and engine
manufacturing company founded in 1917. "
});
//Add
Third
Customer to Our Collection
customers.Add(new Models.Customer()
{
Id = 3,
CompanyName = "Audi",
ContactNo = "983-2222-1212",
ContactPerson = "Karl Benz",
Description = " is a multinational division of the German
manufacturer Daimler AG,"
});
return
View(customers);
}
}
} t. Let us now create a view for this Class, But before continuing Press Ctrl + Shift + B to rebuild the solution, this will make the previously created model on the Model class drop down of the Add View Menu. Right click on the views>Home folder
and select Add>View u. Let us name our View as ListCustomers, Select Razor(CSHTML) as View Engine, Put a check mark on Create a strongly-typed view,
and select
Customer (MyWebSite.Models) as model class. Slect List on the Scaffold Template
and Click OK. v. Run the MVC Application by pressing F5,
and on the address bar insert Home/ListCustomers, We should now see a web page similar below. x. You can edit ListCustomers.CSHTML to remove
and add HTML codes @model IEnumerable<MyWebSite.Models.Customer>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ListCustomers</title>
</head>
<body>
<h2>List of
Customers</h2>
<table border="1">
<tr>
<th>
@Html.DisplayNameFor(model =>
model.CompanyName)
</th>
<th>
@Html.DisplayNameFor(model =>
model.Description)
</th>
<th>
@Html.DisplayNameFor(model =>
model.ContactPerson)
</th>
<th>
@Html.DisplayNameFor(model => model.ContactNo)
</th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.CompanyName)
</td>
<td>
@Html.DisplayFor(modelItem => item.Description)
</td>
<td>
@Html.DisplayFor(modelItem =>
item.ContactPerson)
</td>
<td>
@Html.DisplayFor(modelItem => item.ContactNo)
</td>
</tr>
}
</table>
</body>
</html> y. Press F5 to run the MVC Application z. You will notice some @HTML.DisplayFor codes. These are called HTML Helpers you can read more about HTML Helpers on this site http://www.w3schools.com/aspnet/mvc_htmlhelpers.asp That’s all. You now have your first MVC4 Razor Engine Web Application . . .
