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

  • Hands On: New VS Code Insiders Build Creates Web Page from Image in Seconds

    New Vision support with GitHub Copilot in the latest Visual Studio Code Insiders build takes a user-supplied mockup image and creates a web page from it in seconds, handling all the HTML and CSS.

  • Naive Bayes Regression Using C#

    Dr. James McCaffrey from Microsoft Research presents a complete end-to-end demonstration of the naive Bayes regression technique, where the goal is to predict a single numeric value. Compared to other machine learning regression techniques, naive Bayes regression is usually less accurate, but is simple, easy to implement and customize, works on both large and small datasets, is highly interpretable, and doesn't require tuning any hyperparameters.

  • VS Code Copilot Previews New GPT-4o AI Code Completion Model

    The 4o upgrade includes additional training on more than 275,000 high-quality public repositories in over 30 popular programming languages, said Microsoft-owned GitHub, which created the original "AI pair programmer" years ago.

  • Microsoft's Rust Embrace Continues with Azure SDK Beta

    "Rust's strong type system and ownership model help prevent common programming errors such as null pointer dereferencing and buffer overflows, leading to more secure and stable code."

  • Xcode IDE from Microsoft Archrival Apple Gets Copilot AI

    Just after expanding the reach of its Copilot AI coding assistant to the open-source Eclipse IDE, Microsoft showcased how it's going even further, providing details about a preview version for the Xcode IDE from archrival Apple.

Subscribe on YouTube

Upcoming Training Events