ASP.Net Web Pages Helpers are re-usable components made of both HTML markup mixed with C# or VB.Net code.
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.)
- Create an App_code folder under your WebMatrix project (Figure 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).
- 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.
- Include a call to our new custom helper in any .cshtml file as desired (Figure 2)
- Run code. You should get an output as shown in figure 3.
Notes:
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