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 HomeController

using 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 . . .