MVC Razor Engine For Beginners Part 1
- by Humprey Cogay, C|EH, E|CSA
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 . . .
