Appear in Online Interview to test your skills and be ready for job!
Twitter Twitter LinkedIn YouTube Google
Be Interview ready ! | Search
Make friends on DotNetFunda.com and expand your network!
Winners

Win Prizes

Announcements
Like us on Facebook
Sponsor
Top Articles Author
Thu, 24-Apr-2014 Authors
All Time Authors
Sourav.Kayal
39750
Sheonarayan
34800
Niladri.Biswas
33350

Latest members | More ...


(Statistics delayed by 5 minutes)
Ads

MVC tutorial number 12 - What is RAZOR in MVC 3?

Questpond
Posted by under ASP.NET MVC category on for Intermediate level | Points: 250 | Views : 31057 red flag
If you found plagiarised (copied) or inappropriate content,
please let us know the original source along with your correct email id (to communicate) for further action.


This is the 12thMVC (Model view controller) tutorial and in this article we will try to understand what is Razor in MVC 3.

What is RAZOR in MVC 3(MVC tutorial number 12)?

This is the 12thMVC (Model view controller) tutorial and in this article we will try to understand what is Razor in MVC 3.

Alternatively if you are completely new to MVC, you can also see all the MVC ASP.NET videos to come up to speed.

Introduction

Till now this article was using MVC 2 but it’s high time we also start discussing and doing labs with new release versions of MVC frameworks. Change is a part of human life and same stands true for MVC as well J. So in this section let’s discuss MVC 3 which was the next release version after MVC 2.

FYI: - The recent version is MVC4 and in the later days I will be touch basing even those versions. So control yourself and have patience.

In case you have not installed MVC 3 template, you can get it from here

In case you are feeling that whatever we have learnt in MVC 2, is it a waste?.No, not at all. On the contrary MVC 3 is backward compatible with MVC 2. So whatever you have learnt in MVC 2 still holds true in MVC 3.

Now rather than discussing about all the new features let’s focus on the biggest feature of MVC3 which I personally think is a game changer and that is RAZOR.

So what’s Razor, just to answer short and sweet, it’s a type of view for MVC. In MVC 2 the default view was ASP.NET pages i.e. Web form view. Now the problem of web form views was that it was not made thinking MVC in mind, so the syntaxes was bit heavy.

Developers demanded for a clean, light weight view and with less syntactic noise: - Answer was RAZOR.

So let’s create a simple lab to demonstrate use of Razor views.

Step 1:- Install MVC 3 and create a project using the same

Install MVC 3 template and create a project selecting the MVC 3 template below.

Step 2:- Select Razor

The next screen which pops up what kind of application you want to create.

  • The Empty option creates a project with least amount of files.
  • The Internet Application option creates a shell application which includes user registration and authentication, navigation, and a consistent visual style.
  • The Intranet Application option is very much same as Internet Application with the only difference that the authentication takes place through domain/Active Directory infrastructure.

For now let’s keep life simple and let’s select the empty option. The second thing which we need to select is what kind of view we want, so let’s select Razor and move ahead.

Once the project is created you can see the Razor file with the name “.cshtml”.

Step 3:- Practice Razor syntaxes

Now that we have the basic project ready lets run through some common razor syntaxes and try to get a feel how easy RAZOR is as compared to ASPX views.

Practice 1 :- Single line code

If you want to just display a simple variable you can do something as shown below. All razor syntaxes start with @. If you have just single line of code you do not need “{“. Razor figures out the ending logically.

Todays date  @DateTime.Now 

If you compare the above syntax with ASPX view you need to type the below code, so isn’t the syntax much simpler,neat and light weight.

<%=DateTime.Now%>

Practice 2 :- Multiple lines of code

If you have multiple line of code you can use “@” followed by “{“as shown in the below code snippet.

@{
        List<string> obj = new List<string>();
        obj.Add("Mumbai");
        obj.Add("Pune");
        obj.Add("Banglore");
        obj.Add("Lucknow");
    }


Practice 3 :- Foreach loop and IF conditions

For loops and if conditions again become simpler as shown in the below lines of code.

@foreach (string o in obj)
       {
           @o <br />
       }

@if (DateTime.Now.Year.Equals(2011))
{
// Some code here        
}

Practice 4:- Do not worry about @

If you are thinking will razor confuse with @ of Razor and @ of your email address, do not worry razor understands the difference. For instance in the below line the first line razor will execute as a code and the second line of code he understands it’s just an email address.

@DateTime.Now
questpond@yahoo.com

Practice 5:- To display @

In case you want to display “@” just type it twice as shown in the below code snippet the display will be something as shown in the image below.

Tweet me @@Shivkoirala

Practice 6:- HTML display with razor

In case you want to display HTML on the browser. For instance below is a simple variable called as link which has HTML code. I am displaying the variable data on the browser.

@{
        var link = "<a href='http://www.questpond.com'>Click here</a>";
}
@link;

If you execute the above code you would be surprised to see that it does not display as HTML but as a simple display as shown below. Now that’s not what we expect? , we were expecting a proper HTML display. This is done by razor to avoid XSS attacks (I will discuss about the same in later sections).

But no worries razor team has taken care of it. You can use the “Html.Raw” to display the same as shown in the below code snippet.

@{
        var link = "<a href='http://www.questpond.com'>Click here</a>";
}
@Html.Raw(link);

By profession I am a trainer if you are interested in C# training, you can visit me at C# and .NET training.

Article description MVC ( Model view controller) videosMVC ( Model view controller) Article links
A simple Hello world ASP.NET MVC ( Model view controller) application. Hello word MVC Tutorial video http://www.dotnetfunda.com/articles/article1297-how-to-create-a-simple-hello-world-aspnet-mvc-tutorial-no-1-.aspx
In this video we will see how we can share data between controller and the view using view data. MVC Tutorial video 2 Viewdata http://www.dotnetfunda.com/articles/article1310-how-to-pass-data-from-controllers-to-views-in-aspnet-mvc-tutorial-no-2-.aspx
In this article we will create a simple customer model, flourish the same with some data and display the same in a view. MVC Tutorial video 3 Simple model and view example http://www.dotnetfunda.com/articles/article1317-how-to-create-a-simple-model-in-aspnet-mvc-and-display-the-same-tutorial-.aspx
In this article we will create a simple customer data entry screen with some validation on the view. MVC tutorial video 4 Simple customer data entry screen. http://www.dotnetfunda.com/articles/article1388-how-to-create-a-simple-aspnet-mvc-data-entry-screen-tutorial-no-4-.aspx
This article will demonstrate how to expedite your MVC development process using HTML helper classes.NA http://www.dotnetfunda.com/articles/article1415-how-to-create-mvc-model-view-controller-views-faster-by-using-html-helper-.aspx
This article demonstrates how we can do unit testing in MVC (Model view controller) applications.NA http://www.dotnetfunda.com/articles/article1429-how-can-we-do-unit-test-in-mvc-model-view-controller-application-tutoria-.aspx
This article demonstrates how we can define custom routing in MVC applications.NA http://www.dotnetfunda.com/articles/article1485-what-is-mvc-model-view-controller-routing-tutorial-number-7-.aspx
This article demonstrates how we can validate data passed in MVC URL’s.NA http://www.dotnetfunda.com/articles/article1527-how-to-validate-data-provided-in-mvc-urls-mvc-tutorial-number-8-.aspx
In this article we will see how to create outbound URL’s in MVC applications.NA http://www.dotnetfunda.com/articles/article1596-how-to-create-mvc-outbound-urls-mvc-tutorial-number-9.aspx
In this article we will see how to create reusable views using MVC partial views. NA http://www.dotnetfunda.com/articles/article1831-how-to-create-partial-views-mvc-tutorial-number-10.aspx
In this article we will discuss how we do validations using MVC data annotations. NA http://www.dotnetfunda.com/articles/article1842-how-to-validate-using-data-annotationmvc-tutorial-number-11.aspx
Page copy protected against web site content infringement by Copyscape
Found interesting? Add this to:




About the Author

Questpond

Full Name: Shivprasad Koirala
Member Level:
Member Status: PanelMember,Member,Microsoft_MVP,MVP,Administrator
Member Since: 9/3/2008 2:16:27 AM
Country: India
www.questpond.com
http://www.questpond.com

I am a Microsoft MVP for ASP/ASP.NET and currently a CEO of a small
E-learning company in India. We are very much active in making training videos ,
writing books and corporate trainings. Do visit my site for 
.NET, C# , design pattern , WCF , Silverlight
, LINQ , ASP.NET , ADO.NET , Sharepoint , UML , SQL Server  training 
and Interview questions and answers

Login to vote for this post.

Comments or Responses

Posted by: Debal_Saha@Yahoo.Com on: 5/8/2012 | Points: 25

One thing I need to know

Though Razor using in View Page , 1) How can I able to see design page that my all controls elements are exactly placed in the place that I want ,
2) How to use table, td, tr etc in this page??? Any suggestion , otherwise I can't use this in bossiness application to use better designing in View Page .


Login to post response.

Comments / Responses
Select text & click toolbar to format. Formatting appears in viewmode only. HTML Tags are not allowed.
Bold Italic Underline Paragraph Title Code  Link 
 Wait ... Processing ..... please wait.

Comment using Facebook