Language

Installing a Helper in an ASP.NET Web Pages (Razor) Site

This article describes how to install a helper in an ASP.NET Web Pages (Razor) website. A helper is a reusable component that includes code and markup to perform a task that might be tedious or complex.

What you'll learn:

  • How to install a helper in a website created using WebMatrix 2 RC or WebMatrix 1.0.

Note   The information in this article applies to ASP.NET Web Pages 1.0 and Web Pages 2, and to Microsoft WebMatrix 1.0 and Microsoft WebMatrix 2.

Overview of Helpers

Some tasks that people often want to do on web pages require a lot of code or require extra knowledge. Examples include displaying a chart for data; putting a Facebook "Like" button on a page; sending email from your website; cropping or resizing images; using PayPal for your site. To make it easy to do these kinds of things, ASP.NET Web Pages lets you use helpers. Helpers are components that you install for a site and that let you perform typical tasks by using just a line or two of Razor code.

For example, in order to display a Facebook "Like" button on a page, you can use the Facebook helper and call its LikeButton method, like this:

@Facebook.LikeButton()

When the page runs, the Facebook helper takes care of rendering all the JavaScript code that's required in order to display the button. In the page, the result looks like this:

Facebook 'Like' button in page as rendered by the Facebook helper

ASP.NET Web Pages has a few helpers built in. However, many helpers are available in packages (add-ins) that are provided using the NuGet package manager. NuGet lets you select a package to install and then it takes care of all the details of the installation.

This article provides separate instructions for how to install a helper in WebMatrix 2 and in WebMatrix 1.0:

Installing a Helper in WebMatrix 2

  1. In WebMatrix 2, click the Gallery button.

  2. NuGet Gallery dialog box in WebMatrix

    This launches the NuGet package manager and displays available packages.

    NuGet Gallery dialog box in WebMatrix

  3. In the search box, enter a keyword for the helper you want to install (for example, "Twitter").

    NuGet shows the packages that meet your search criteria.

    NuGet Gallery in WebMatrix showing Twitter packages

  4. Select the package and then click Install.

    When installation of the helper is done,  you see a message in the notification area at the bottom of the screen.

    WebMatrix notification bar after successful package installation

    If this is the first time you've installed a helper, NuGet creates folders in your website for the code that makes up the helper.

  5. To uninstall a helper, click the Gallery button, click the Installed tab, and pick the package you want to uninstall.

Installing a Helper in WebMatrix 1.0

  1. In WebMatrix, click the Site workspace.

  2. In the content pane, click ASP.NET Web Pages Administration. This loads an administration page into your browser. Because this is the first time you're logging into the administration page, it prompts you to create a password.

  3. Package Manager

  4. Create a password.

    After you click Create Password, a security-check page that looks like the following prompts you to rename the password file for security reasons. If this is the first time you're seeing this page, don't try to rename the file yet. Proceed to the next step and follow the directions there.

    Rename password file

  5. Leave the security-check page open in the browser, return to WebMatrix, and then click the Files workspace.

  6. Right-click the Hello World folder for your site and then click Refresh. The list of files and folders now displays an App_Data folder. Open that and you see an Admin folder. The newly created password file (_Password.config) is displayed in the ./App_Data/Admin/ folder. The following illustration shows the updated file structure with the password file selected:

    _Password.config file

  7. Rename the file to Password.config by removing the leading underscore (_) character.

  8. Return to the security-check page in the browser, and click the Click Here link near the end of the message about renaming the password file.

  9. Log into the Administration page using the password you created. The page displays the Package Manager, which contains a list of add-on packages.

    [image]

    If you ever want to display other feed locations, click the Manage Package Sources link to add, change, or remove feeds.

  10. Find the ASP.NET Web Helpers Library package. To narrow down the list, search for helpers using the Search field. The following image shows the result of searching for helpers. Notice that several versions of this package are available.

  11. Select the version that you want, click the Install button, and then install the package as directed. After the package is installed, the Package Manager displays the result.

    ch01_learnweb-15

    This page also lets you uninstall packages, and you can use the page to update packages when newer versions are available. You can go to the Show drop-down list and click Installed to display the packages you have installed, or click Updates to display available updates for the installed packages.

Additional Resources

Introducing ASP.NET Web Pages 2 - Programming Basics

Microsoft ASP.NET Team

By Microsoft ASP.NET Team, ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.