ASP.

NET MVC 3 Razor View And HTML Helpers

http://www.c-sharpcorner.com/uploadfile/jaishmathews/Asp-Net-mvc-3-...

In Focus

WANTED: C# Corner Community Moderators

SIGN UP MEMBER LOGIN: Enter User ID or Email
Ask your ques on or contribute here...

TECHNOLOGIES

ANSWERS

BLOGS

VIDEOS

INTERVIEWS

BOOKS

LINKS

NEWS PREMIUM SPONSORS

ASP.NET 4.5 / Windows 2012 Hos ng DynamicPDF Developer Components iPhone, Android & Web Development Services Team Founda on Server 2012 Hos ng

Insert, Select, Update and Delete Records in ...

C# Corner Search

ARTICLE
ASP.NET MVC 3 Razor View And HTML Helpers
Posted by Jaish Mathews in Ar cles | ASP.NET MVC with C# on August 06, 2011 Tags: ASP.NET, ASP.NET MVC 3 Razor View, HTML, MVC 3, VS 2010, web applica on A er reading this ar cle, you will have a clear idea of the use of HTML helpers against razor view. I included 2 very simple examples of using an inline HTML helper inside the view itself and using HTML helper with an extension method and call the method inside view.
Tweet 0 Share Share 0

TRENDING UP
Insert, Select, Update and Delete Records in a Single Stored Procedure Using SQL Server Removing Item From the Playlist in Windows Store Apps Uploading and Downloading Excel Files From Database Using ASP.NET C# Stored Procedure in SQL Server 2012

10000

Reader Level:

Download Files: MvcApplica on1.rar

Conver ng a Number To String in ASP.NET and C# Add Songs to Playlist in Windows Store Apps Dynamic Menu With Nested Submenus Using HTML List Tag and CSS in ASP.Net Media Playlist in Windows Store Apps Advanced Search in Windows Store Apps Searching Home Group Loca on in Windows Store Apps View All

I was just looking at the new version of ASP.Net MVC and its new view named razor. We need to learn a lot here. Otherwise you will screw up your application and you won't see the benefit of MVC layer inside your product. You can use either an aspx view or a razor view in MVC 3. Once using razor view, you won't see the page name inside the address like following screen shot.

After reading this article, you will have a clear idea of the use of HTML helpers against razor view. I included 2 very simple examples of: 1. Using inline HTML helper inside the view itself 2. Using HTML helper with an extension method and call the method in side view

I hope you have VS 2010 and ASP.Net MVC 3 already installed. Create a MCV project like the following. Please focus on areas marked with red.

MOST LIKED ARTICLE

WCF Introduc on and Contracts - Day 1 Create SSRS Report Using Report Wizard CREATE READ UPDATE and DELETE - CRUD Opera on Using LINQ to SQL WCF - Data Contract - Day 4 WCF Message Exchange Pa erns: Day 3

HOT KEYWORDS
.NET Framework 3.5 ASP.net MVC 3 ASP.NET MVC Framework Asp.net mvc3 asp.net mvc3 Razor Aspx page AuthenticateRequest Cab Automation Software crud CRUD operation Cshtml Engine with Entity Framework 4.0 HttpHandlers JQ grid with Jquery in asp.net mvc3 Razor JSON Model View Control model

ASP.NET MVC

1 of 5

11/8/2012 8:23 PM

ASP.NET MVC 3 Razor View And HTML Helpers

http://www.c-sharpcorner.com/uploadfile/jaishmathews/Asp-Net-mvc-3-...

SPONSORED BY
Oshore So ware and Database Development
MCN is your source for developing solu ons involving websites, mobile apps, cloud-compu ng, databases, BI, back-end services and processes and client-server applica ons.

view controller MVC 3 mvc application MVC Design pattern MVC3 routing Unity Framework View

Using HTML helpers as a declarative inline content In this simple example I am creating a radio button using HTML helper by declaring the logic inside the view file itself. Open the index.cshtml file. The Cshtml file is meant to handle HTML related functionality in a razor view implementation

WHITEPAPERS AND BOOKS

SharePoint 2010 Administra on & Development Ge ng Started with Managed Metadata Service in SharePoint 2010 Windows Phone 7 Hileleri Windows Phone Development Step by Step Tutorial Essen als of SharePoint 2010: Business Intelligence Capabili es Working with Directories in C# FileInfo in C# Programming List with C# Source Code: Graphics Programming with GDI+ The code inside is: @helper CustomRadioButton() { @Html.RadioButton("Custom", "Y", true) @Html.RadioButton("Custom", "N", false) } <h2> Radiobutton from inline MVC HTML helper @CustomRadioButton()</h2> Let me explain, @helper is the key and you should use the same name. Then comes your method name and it's your own choice. I chose CustomRadioButton() even though it's returning normal radio buttons. Now the method body; @Html will give you a Ref. to HTML helper and you can access built-in control classes. Here I used RadioButton. Our logic is finished and now we need to call the method named CustomRadioButton(). You call it from anywhere using @<<method name>> i.e. @CustomRadioButton(). Now run the application and its output will be as below. Programming Strings using C# View All POLL RESULT ALL POLLS

Windows 8 and You What is your status with Microso Windows 8? I have installed it and ac vely using it. I have installed it but not using ac vely. I am planning to install it. May be in 3 to 6 months Not in near future
Vote

Using HTML helpers using extension methods

2 of 5

11/8/2012 8:23 PM

ASP.NET MVC 3 Razor View And HTML Helpers

http://www.c-sharpcorner.com/uploadfile/jaishmathews/Asp-Net-mvc-3-...

Create a new class named Helpers (like the following) in a new folder:

The inner code is like below and you may already be aware that extension methods are not new and it needs a static class. I will not explain in depth about extension methods, but here we are adding one extension method to the built-in HtmlHelper class. namespace MvcApplication1.Utilities { public static class HtmlHelpers { public static DateTime GetTodayDate(this HtmlHelper helper) { return DateTime.Now; } } } The method merely returns the current date time. The "this" keyword is determining which class is being extended. Here it's HtmlHelper like GetTodayDate(this HtmlHelper helper). Now need to build the solution and use this new extension method inside the view file. Again open the same index.cshtml and the code will be like below: @using MvcApplication1.Utilities; Date from MVC html helper extension method @Html.GetTodayDate()</h2> The 1st statement is understandable as it's importing the required namespace. Once you imported the namespace, now you can use the extension method declared inside that namespace like @Html.GetTodayDate(). Just look at the method you defined can access with the built-in class, @Html i.e. HtmlHelper. This is the basic behavior of extension methods. Now run the application and see the output like below.

Last one more point. The configuration settings here are more flexible. Using this you can avoid the using statement of @using MvcApplication1.Utilities. This can be achieved by putting the same namespace inside config file under the views folder. See the following screen shot.

3 of 5

11/8/2012 8:23 PM

ASP.NET MVC 3 Razor View And HTML Helpers

http://www.c-sharpcorner.com/uploadfile/jaishmathews/Asp-Net-mvc-3-...

Note that it's not application web.config, but specific to views. The section will be like this. <system.web.webPages.razor> <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> <pages pageBaseType="System.Web.Mvc.WebViewPage"> <namespaces> <add namespace="System.Web.Mvc" /> <add namespace="System.Web.Mvc.Ajax" /> <add namespace="System.Web.Mvc.Html" /> <add namespace="System.Web.Routing" /> <add namespace="MvcApplication1.Utilities"/> </namespaces> </pages> </system.web.webPages.razor> Now this name space can access throughout view files. I uploaded the code too. You are expected to do more homework on top of it to dig in to these areas. Best wishes. Login to add your contents and source code to this ar cle

THIS FEATURE IS SPONSORED BY

DynamicPDF Merger is a developers dream for interac ng with any exis ng PDF documents. Merge, append, split, form ll, a en stamp and so much more.

Model View Control (MVC) Pa ern Using C# - Real Life Example

Tags: .NET 4.0, asp.net mvc, C#, csharp, Model View Control (MVC) Pa ern using C#, Model View Control MVC, SQL Server Express 2008

ASP.NET MVC, WCF, ASP.NET Webforms, and JQuery

Tags: ASP.NET MVC, ASP.NET Webforms, C# tutorials, JQuery, WCF

RELATED ARTICLES
Types of Operators in F#

POST COMMENT

TOP MEMBERS

MOST VIEWED

LEGENDS

NOW

PRIZES

AWARDS

REVIEWS

SURVEY

CERTIFICATIONS

DOWNLOADS

Hosted By CBeyond Cloud Services

PHOTOS

TIPS

CONSULTING

TRAINING

STUDENTS

MEMBERS

MEDIA KIT

SUGGEST AN IDEA

PRIVACY POLICY | TERMS & CONDITIONS | SITEMAP | CONTACT US | ABOUT US | REPORT ABUSE

4 of 5

11/8/2012 8:23 PM

ASP.NET MVC 3 Razor View And HTML Helpers

http://www.c-sharpcorner.com/uploadfile/jaishmathews/Asp-Net-mvc-3-...

2012 C# Corner. All contents are copyright of their authors.

5 of 5

11/8/2012 8:23 PM