Posts
22
Comments
75
Trackbacks
0
ASP.Net MVC 4 Razor Engine For Beginners Part 1

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 and on the address bar insert Home/ListCustomers

 

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

posted on Saturday, December 1, 2012 10:43 PM Print
Comments
Gravatar
# re: MVC Razor Engine For Beginners Part 1
FD Tristan
12/12/2012 4:01 AM
I do not know who stared this dark background craze for web pages. A dark background makes the pages unuseable for me.
Gravatar
# re: ASP.Net MVC 4 Razor Engine For Beginners Part 1
Hank GreenBerg
6/13/2013 6:03 PM

This is very informative article. Thanks for sharing with us. Below links a very helpful to complite my task.

http://www.mindstick.com/Articles/e56c9dca-f331-455d-810d-fdeac1e14a6c/?MVC%20Application%20using%20Razor%20View

http://www.asp.net/mvc/videos/mvc-3/mvc-3-razor-view-engine
Gravatar
# Looking forward to Part 2
Ruslan
9/4/2013 4:08 PM
Thank you for the great tutorial. Looking forward to Part 2! :)
Gravatar
# re: ASP.Net MVC 4 Razor Engine For Beginners Part 1
Poly
9/25/2013 1:38 AM
Thank you for very informative tutorial
Gravatar
# re: ASP.Net MVC 4 Razor Engine For Beginners Part 1
Karim
9/26/2013 1:46 AM
Thaks ,it's realy nice article, from where can i find the part 2 ?
Gravatar
# re: ASP.Net MVC 4 Razor Engine For Beginners Part 1
cuong
10/29/2013 11:46 AM
This is very easy, digestible(hihi), perfect tutorial. Sorry,I bad English. And thank you very much.
Gravatar
# re: ASP.Net MVC 4 Razor Engine For Beginners Part 1
Gloria J
2/22/2014 4:55 AM
Awesome man, thank you very much!!! Such an easy way to start MVC, just what I needed!
Gravatar
# re: ASP.Net MVC 4 Razor Engine For Beginners Part 1
chandra prakash
4/9/2014 9:08 PM
Really, This is very informative article.
Gravatar
# re: ASP.Net MVC 4 Razor Engine For Beginners Part 1
Anísio
4/12/2014 11:36 AM
Brazil thanks you
Gravatar
# re: ASP.Net MVC 4 Razor Engine For Beginners Part 1
Faisal
4/25/2014 2:48 PM
Thank you for the knowledge. very useful for new learner like me
Gravatar
# re: ASP.Net MVC 4 Razor Engine For Beginners Part 1
Rathi
5/9/2014 6:20 PM
Good and easily understandable
Gravatar
# re: ASP.Net MVC 4 Razor Engine For Beginners Part 1
Gayathri
5/24/2014 7:45 PM
Information is enough for beginners.
Gravatar
# re: ASP.Net MVC 4 Razor Engine For Beginners Part 1
Varaprasad M
6/6/2014 3:54 PM
Super for beggeners
Gravatar
# re: ASP.Net MVC 4 Razor Engine For Beginners Part 1
BF
8/13/2014 7:27 PM
super sexy
Gravatar
# re: ASP.Net MVC 4 Razor Engine For Beginners Part 1
Ashok
10/2/2014 1:59 AM
Great Work!
Gravatar
# re: ASP.Net MVC 4 Razor Engine For Beginners Part 1
jaimin
10/7/2014 3:17 PM
Good For Begginers
Gravatar
# re: ASP.Net MVC 4 Razor Engine For Beginners Part 1
shimelis
12/24/2014 2:18 PM
Best code for MVC4 beginners
Gravatar
# re: ASP.Net MVC 4 Razor Engine For Beginners Part 1
sudheer
4/15/2015 2:09 AM
thank you a lot of happiness for explaining the mvc in a easy way
Gravatar
# re: ASP.Net MVC 4 Razor Engine For Beginners Part 1
Naman
5/6/2015 2:13 PM
Hi,
Thanks for the provide a Sample.its very good.
Gravatar
# re: ASP.Net MVC 4 Razor Engine For Beginners Part 1
Sagar
5/8/2015 5:24 PM
Simply Good
Gravatar
# re: ASP.Net MVC 4 Razor Engine For Beginners Part 1
KIran Gupta
7/11/2015 6:47 PM
Simple and best code for MVC4 beginners.
Gravatar
# re: ASP.Net MVC 4 Razor Engine For Beginners Part 1
M.Nouman Khan
7/24/2015 6:10 PM
Thanks Its very help full tutorial
Gravatar
# re: ASP.Net MVC 4 Razor Engine For Beginners Part 1
Habeeb
5/12/2016 1:47 PM
Thanks ...this is better solution.
Gravatar
# re: ASP.Net MVC 4 Razor Engine For Beginners Part 1
Karan
7/23/2016 8:49 PM
Its very simple for beginners.

Post Comment

Title *
Name *
Email
Comment *  
Verification
Tag Cloud