Using Helper Methods with ASP.NET Web Matrix Beta 3

Posted by: Malcolm Sheridan , on 1/4/2011, in Category ASP.NET
Views: 76243
Abstract: The following article demonstrates how to use custom Helpers when you’re using WebMatrix and ASP.NET Web Pages.

One of the great features of ASP.NET Web Pages is the ability to create reusable code through Helpers. Helpers are written in either Razor syntax, or even by creating class libraries in C# or VB.NET. Helpers always return IHtmlString, which is HTML encoded string. Helpers can be created in ASP.NET MVC 3 RC, but I thought I’d show you how to create and use these powerful language features in WebMatrix.

If you are new to ASP.NET WebMatrix, check my article ASP.NET WebMatrix Beta 2 - Getting Started

Before you begin you need to install the latest version of WebMatrix. The current release is Beta 3 and it can be installed easily through the Web Platform Installer. Once the install is finished you’re ready to begin.

 

Helpers reduce the code you need to write by implementing the Don’t Repeat Yourself (DRY) principal. For example take the following scenario where you want to print out a list of numbers.

Mvc Print Numbers

In the scenario above, a variable called numbers holds a collection of integers, then using a foreach loop, they’re rendered in the browser. This is fine if you use this functionality in one place, but if you have to repeat it, then you should create a helper method. Helper methods can be created inside of WebMatrix, or alternatively they can be created in Visual Studio and referenced by your WebMatrix project.

Creating Helpers in Webmatrix

If you create Helpers inside of WebMatrix, you must first create a new folder called App_Code.

Web Matrix App Code

Any files inside of App_Code are compiled at runtime. The next step is to create the Helper. Start by adding a new cshtml or vbhtml file to the App_Code folder. For this example I’m going to create a Helper called CollectionHelper. This file can be called anything you like.

WebMatrix Collection Helper

Now you’re ready to start coding! All Helpers are defined by the @helper keyword. Here’s the Helper method for the previous example.

Helper keyword

The Helper method is Print. It accepts a collection of integers and renders them in the browser. Helper methods return type is IHtmlString, which guarantees the HTML to be encoded, so you won’t be opening yourself up to XSS attacks. To use the new Helper, you reference it like it’s a static class.

Helper Print Number

Now this Helper can be called from any page and we won’t have to repeat ourselves.

Creating Helpers in Visual Studio

There are times when you need more functionality than rendering numbers. For example if you wanted to call a web service and return some data. This can be done in WebMatrix, but it’s much simpler do create in Visual Studio. To create Helpers inside Studio, you need to create a class library, and then add that assembly to the bin folder in the WebMatrix project. The Helper I’m going to create returns data about the Northwind database via a public OData service. The public address is http://services.odata.org/OData/OData.svc/. First of all open Studio 2010 and create a new Class Library Project. Add a Service Reference to the Northwind OData service. Here's the resulting code.

Northwind OData Service

The GetProducts method returns a IHtmlString type, and it will be filled with the description of each product from the database. Before using this assembly in WebMatrix, jump back into WebMatrix and add a bin folder. Next copy the Class Library assembly and paste it into the bin folder inside the WebMatrix project. By default WebMatrix creates projects under C:\Users\{user id}\Documents\My Web Sites.

VsHelper cshtml

To use this it is just the same as using a Helper in the previous example.

Northwind Web Helper

And the results are below.

Web Matrix Helper Output

So now we're using WebMatrix to call a Helper that in turn calls a WCF OData service. Brilliant!

Helpers are a great way to stop yourself from duplicating code. Hopefully you use them.

The entire source code of this article can be downloaded over here

Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, a Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Being an ASP.NET guy, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with jQuery and JavaScript. He also writes technical articles on ASP.NET for SitePoint and other various websites. Follow him on twitter @malcolmsheridan


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by coditt on Thursday, January 6, 2011 5:57 AM
Where would you suggest storing these helper method classes. In the App_Code folder or a separate folder or in the View folder?
Comment posted by Malcolm Sheridan on Friday, January 7, 2011 6:13 AM
@coditt
I'd prefer to create them inside Studio if they're complex and reference them through the bin folder.
Comment posted by coditt on Monday, January 10, 2011 3:22 AM
How will you reference through the bin? Can you elaborate?
Comment posted by Malcolm Sheridan on Monday, January 10, 2011 4:06 AM
@coditt
Once the assembly is copied to the bin folder, that's the reference.  There's no "add reference dialog" in WebMatrix.  Well not yet anyway.
Comment posted by Jack on Tuesday, March 15, 2011 3:31 AM
Hi Malcolm, thanks for the great article. Although you'd mentioned that you would use VS for adding a web reference, how would you go about adding a web reference simply by using WebMatrix?
Comment posted by Malcolm Sheridan on Wednesday, March 23, 2011 4:36 AM
@Jack
Off the top of my head I'm not sure about that.
Comment posted by aaaaaaaaaaaaaaaaaaa on Monday, May 30, 2011 7:47 AM
aaaaaaaaaaaaaaaaaaa

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel