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/.

comments powered by Disqus

Featured

  • Python in VS Code Adds Data Viewer for Debugging

    The January 2021 update to the Python Extension for Visual Studio Code is out with a short list of new features headed by a data viewer used while debugging.

  • GitHub Ships Enterprise Server 3.0 Release Candidate

    It's described as "the biggest ever change to Enterprise Server," with improvements to Actions, Packages, mobile, security and more.

  • Attacks on .NET Apps Grow in Number, Severity, Says Security Firm

    .NET apps were found to have more serious vulnerabilities and suffer more attacks last year, according to data gathered by Contrast Labs.

  • Microsoft Opens Up Old Win32 APIs to C# and Rust, More Languages to Come

    Microsoft is opening up old Win32 APIs long used for 32-bit Windows programming, letting coders use languages of their choice instead of the default C/C++ option.

Upcoming Events