Practical .NET
Creating HTML Helpers You Can Use in Any ASP.NET View
An HTML Helper is a bit of Razor code that can be called from multiple places in a View. But, if you put your Helper in the right place, you can also use it from any View in your application.
If I have some Razor code that I want to use in many places in a View, I can put it in an HTML Helper in my View -- a kind of custom Razor function. My Helper can even accept parameters, as this example does:
@Helper DisplayMajorNotice(ByVal notice As String)
<span class="MajorNotice">
@notice
</span>
End Helper
To use this Helper anywhere in my View, I just call it by name, passing any parameters it requires. I can call my example with code like this:
@DisplayMajorNotice("Please wash your hands before leaving")
This particular piece of code is probably useful enough that I might want to use it on other pages. I can do that by first adding an App_Code folder to my project (right-click on your project and select Add | Add ASP.NET Folder | App_Code to create the folder).
The next step is to add a file to hold my HTML Helper code. To do that, I right-click on the App_Code folder and select Add | New Item. Then, from the list of templates, select Helper or HelperPage (the name will vary depending on your version of Visual Studio and, I think, on which language you're using).
Finally, give the file a name and click the Add button (I called my file PHVHelpers).
Now, if you put the Helper code I showed into this file, you'll have turned your formerly "page-only" Helper into a global Helper that you can use from any View in the project.
There is one change you have to make to the code that calls your helper: To use the global version of the Helper, you have to prefix its name with the name you gave to the file you added to the App_Code folder. Because I keep my global Helpers in a file called PHVHelpers, I would call my Helper with code like this:
@PHVHelpers.DisplayMajorNotice("Please wash your hands before leaving")
This "global HTML Helper" feature is starting to look very much like a Partial View … which raises the question: When should I use a Helper and when should I use a Partial View?
You can decide for yourself (of course) but, generally speaking, if all I want is some Razor code to work with a few parameters then I'll use a Helper; If I want to tie my code to a specific Model (or a part of a Model) then I'll use a Partial View. Or, to put it another way, if I want to put an @model or @ModelType at the top of my new file, I'll use a Partial View; if I don't need that model directive then I'll use a Helper.
About the Author
Peter Vogel is a system architect and principal in PH&V Information Services. PH&V provides full-stack consulting from UX design through object modeling to database design. Peter tweets about his VSM columns with the hashtag #vogelarticles. His blog posts on user experience design can be found at http://blog.learningtree.com/tag/ui/.