Subscribe to Windows IT Pro
July 12, 2011 06:00 PM

Working with ASP.NET MVC 3 Razor Helpers and Templates

Shape up your views using template-based HTML helpers in Razor
Dev Pro
InstantDoc ID #136175
Rating: (6)

ASP.NET MVC3 includes Razor, a new markup language to define the template of views. Razor stands side by side with the old-fashioned ASPX markup language, which was at the foundation of the ASP.NET MVC view engine in earlier versions of ASP.NET MVC.

You may not like or use Razor, and you may not agree that the resulting syntax is terser and cleaner. However, Razor is just one more option that developers can use, and a pretty nice one, at that. There are lots of places where you can learn more about the syntax of Razor. A good place to start is in the ASP.NET Razor Pages section on the ASP.NET website. This site also contains a link for Visual Basic developers. To read about Razor in a broader perspective, visit the DevProConnections website and search for articles published earlier this year.

More often than not, ASP.NET pages are made up of multiple views such as user controls, server controls, and plain HTML templates. How would you create these kinds of reusable markup chunks in an ASP.NET MVC application? Server controls are no longer a viable option, and HTML helpers never captured developers' hearts because of their code-only approach. Razor supports an alternative model for creating HTML helpers by using a mix of code and markup, which combines the power of programmability with the flexibility of templates. Although some (justifiably) criticize Razor's readability and terse syntax, this alternative model is a strong argument in favor of shifting to Razor.

Code-Only HTML Helpers

In ASP.NET MVC, server controls are deprecated and are usually impossible to use. Although you can use some server controls in some simple scenarios, they are not a practical solution. It is better to use HTML helpers.

As the name suggests, an HTML helper is a plain HTML factory. It comes in the form of an extension method for the HtmlHelper class or the AjaxHelper class. ASP.NET MVC has a stock of predefined helpers, and it lets you easily write your own helpers. An HTML helper is just a productivity tool that makes it easier to manage the generation of data-driven HTML.

An HTML helper allows full programmability, but because it is a plain method, it is inherently code-only. Everything that you want to happen must be expressly written in code—no templates and no HTML markup. This approach is not much different from that of classic server controls, but it lacks the design-time capabilities of advanced server controls and the large-scale marketplace of components.

You can also use ASCX user controls to compose ASP.NET MVC views. User controls are reusable pieces of markup that are also programmable. However, to make them programmable, you must create a code-behind class or incorporate a server-side script block. This is doable, but it's not totally aligned with the ASP.NET MVC programming model. For this reason, developers don't favor ASCX user controls.

Razor HTML Helpers

In Razor, you can easily reference any existing (and code-only) HTML helpers. You can also create declarative HTML helpers that result from a powerful combination of code and markup. In this way, you achieve the same flexibility of user controls that have been provided for years by ASP.NET Web Forms. Let's see what it takes to create such Razor HTML helpers. 

You start by creating a .cshtml (or .vbhtml) file in the App_Code folder of the project. The project wizard doesn't create the App_Code folder automatically, so you have to do it yourself. Curiously, the folder is not listed as an ASP.NET folder, but it is promptly recognized as a special folder when you create it. It's important to note that your helpers are detected only if you put them in the App_Code folder.

The name you choose for the .cshtml (or .vbhtml) file is important because you'll be using this name when you make calls to the helper. The file is a kind of repository for your HTML helpers. The name of the file is not the name of the helper. A classic name for this file is MyHelpers.cshtml. Figure 1 shows a sample repository that has two HTML helpers.


Related Content:

ARTICLE TOOLS

Comments
  • 10 months ago
    Jul 18, 2011

    ==== www.likemalls.com/productlist.asp?id=n311 ======
    Jordan 2011 shoes $48
    Jame shoes $30--39
    jordan air max oakland raiders $30--39;
    Nike shox(R4,NZ,OZ,TL1,TL2,TL3) $35
    Ed Hardy AF JUICY POLO Bikini $20;
    Handbags (Coach lv fendi d&g) $30
    T shirts (Polo ,edhardy,lacoste) $15
    Jean(True Religion,edhardy,coogi) $30
    Sunglasses (Oakey,coach,gucci,Armaini) $15
    New era cap $15
    paypal accept,delivery door to door free shipping
    ===== www.likemalls.com/productlist.asp?id=n311 =======

You must log on before posting a comment.

Are you a new visitor? Register Here

advertisement

advertisement

Windows is a trademark of the Microsoft group of companies. Windows IT Pro is used by Penton Media Inc. under license from owner.