Geeks With Blogs

News Opinions and articles on this blog are mine alone and do not represent my employer. All articles and blog entries are posted using a personal computer system outside of my employer network.
Sam Abraham Software Engineer/Architect: Putting Customers First
ASP.Net Web Pages Helpers are re-usable components made of both HTML markup mixed with C# or VB.Net code.
Helpers are designated using a special Razor Syntax tag @helper which routes the content within the tag to the appropriate Razor parser. (A brief introduction to the Razor syntax can be found here)
I had the privilege of demonstrating a few out-of-the-box Web Pages Helpers using WebMatrix at the SoFla Local PDC10 a little over a week ago. Audience feedback was positive and Helpers' lightweight and flexible model was well appreciated.
With Microsoft’s commitment and involvement in the maturing HTML 5, one can only think of the potential that can be achieved by combining the powerful features HTML5 brings with the easy and clean re-usability enabled by ASP.Net Web Pages Helpers. I had already blogged about the value HTML5/Helpers bring when used together, but at the time, I did not provide any code demonstrations to justify my argument. I decided however that now is a suitable time to provide this overdue quick example.
In the following few lines, I will be demonstrating a quick sample to showcase how HTML5 tags can be included in a .cshtml page defining a custom ASP.Net Web Pages Helper function in WebMatrix. Same concepts can be also leveraged in ASP.Net MVC3 as it supports the Razor Syntax.
The following steps assume you are already familiar with WebMatrix (Please feel freel to check my WebMatrix overview blog post if you deem necessary.)
  1. Create an App_code folder under your WebMatrix project (Figure 2).
  2. Create a new .cshtml page. For me I called it HTML5Canvas.cshtml. You can also use VB.Net, but in that case your file name will have a .vbhtml extension instead (Figure 2).
  3. Create a custom helper function within the .cshtml file created in step 2. As my desire is to demonstrate how HTML5 can naturally work with helpers and the Razor parser, I am including the HTML5 canvas tag (Figure 1). Notice that the Helper function takes a string argument that it displays at runtime. Also note how the @name parameter is referenced within the HTML markup.
  4. Include a call to our new custom helper in any .cshtml file as desired (Figure 2)
  5. Run code. You should get an output as shown in figure 3.


The code in Figure 2 will simply draw a 2D red rectangle, but can be as elaborate as we so desire. The purpose here is to illustrate the concept rather than demonstrate HTML5 features.


Figure 1 -  Our custom HTML 5 helper function


Figure 2 - Calling our custom helper function in web page. Note the helper .cshtml file is defined under App_code/Html5Canvas.cshtml.


Figure 3 - HTML5 Canvas output

Posted on Monday, November 8, 2010 5:42 PM , Tech Talk , MVC2 , ASP .Net MVC 3 , ASP.Net MVC 3 Beta , Razor Pages , ASP.Net Web Pages , MVC 3 | Back to top

Comments on this post: Leveraging HTML5 in ASP.Net Web Pages Helpers for WebMatrix and ASP.Net MVC3

# re: Leveraging HTML5 in ASP.Net Web Pages Helpers for WebMatrix and ASP.Net MVC3
Requesting Gravatar...

i prefer creating static object extensions for the WebPage class to archive this. At first, is easier to extend and reuse. At last the code format functionallity and intellisense is much more better an .cs as in an .cshtml (if you are using Visual Studio 2010). At last by using MVC3, im writing custom templates which will then render the correct output regarding to the device capabilities from the users browserm which you can call then with Html.DisplayFor(obj => myObj, "TemplateName").

Left by Michael Baarz on Apr 04, 2011 9:58 AM

Your comment:
 (will show your gravatar)

Copyright © Sam Abraham | Powered by: