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

  • Creating Reactive Applications in .NET

    In modern applications, data is being retrieved in asynchronous, real-time streams, as traditional pull requests where the clients asks for data from the server are becoming a thing of the past.

  • AI for GitHub Collaboration? Maybe Not So Much

    No doubt GitHub Copilot has been a boon for developers, but AI might not be the best tool for collaboration, according to developers weighing in on a recent social media post from the GitHub team.

  • Visual Studio 2022 Getting VS Code 'Command Palette' Equivalent

    As any Visual Studio Code user knows, the editor's command palette is a powerful tool for getting things done quickly, without having to navigate through menus and dialogs. Now, we learn how an equivalent is coming for Microsoft's flagship Visual Studio IDE, invoked by the same familiar Ctrl+Shift+P keyboard shortcut.

  • .NET 9 Preview 3: 'I've Been Waiting 9 Years for This API!'

    Microsoft's third preview of .NET 9 sees a lot of minor tweaks and fixes with no earth-shaking new functionality, but little things can be important to individual developers.

  • Data Anomaly Detection Using a Neural Autoencoder with C#

    Dr. James McCaffrey of Microsoft Research tackles the process of examining a set of source data to find data items that are different in some way from the majority of the source items.

Subscribe on YouTube