14 Days Free Technical Video Training from WintellectNOW

  

Getting Started w/Helpers for the Razor View Engine & WebMatrix

Tags: Razor, ASP.NET, ASP.NET Web Pages

Introduction

Both ASP.NET MVC and the Razor View Engine have a language element called a helper.  Helpers In ASP.NET Web Pages are components that are stored as .cshtml files, and are meant to promote reusability by allowing other ASP.NET Web Pages to access them using the familiar object.method([args…]) syntax in views.  ASP.NET Web Pages has many built in helpers or you can choose to create your own. Check out some of the popular types of helpers baked into ASP.NET Web Pages:

  • Social Networking
  • Analytics & Charting
  • Security & CAPTCHA
  • File Uploading
  • Email
  • UI Elements & Grids

Helpers work by allowing you to store code, text, and markup in a single file that can be used at any time in other web pages.  Helpers are one way to avoid having to write the code, then copy & paste the same block of code in different pages, which is harder to maintain and leads to a lot of chaos.  Organizing your code into separable units will make things far easier when building, maintaining or even porting your app to ASP.NET MVC. 

By examining the conceptual model below demonstrating how ASP.NET Web Pages helpers work; you can see that a write once, use anywhere approach is valuable. 

image_thumb7_thumb

As well, you’ll quickly notice that the syntax pattern for calling a helper is…

@Filename.HelperName([args])  (note that it’s the name of the file, without the .cshtml extension)

Using the model above, this translates in Razor syntax to…

@Helpers.SayHello()

But before continuing with using helpers, we need to know how to get them in our projects in the first place.

Getting and Installing Helpers

Some helpers are automatically installed with WebMatrix via the Web Platform Installer, but new ones are popping up every day as open source libraries that you’ll want to take advantage of - if not create some yourself!  Because it can be tedious trying to find, download, and install separate open source libraries, the ASP.NET team has recently released NuPack, the ASP.NET Web Packages Administration tool, which is a web based way to manage & install helpers with WebMatrix.  NuPack also works as an extension to Visual Studio found under the Project menu and also has a command line utility.  In WebMatrix, the packages administrator allows you to choose which helper libraries you want to reference in your projects and installs them for you.

To launch the administration tool, right click on the IIS Express icon in the Windows notification area, choose your web application, then choose the default page http://localhost:portnumber.  Port numbers are automatically assigned by IIS Express for each new application when the first page is run from WebMatrix, since there’s usually no need to manage them yourself. 

.icon,

Once the page is launched in the browser, complete the URL by adding “_admin” to it so it looks something like this:

image

You’ll be redirected to the administrative page.  If this is the first time you’ve launched the administration page for this site, you’ll be asked to create a password to login.  During subsequent visits to the admin page, you will be prompted to enter the password.  Now you can choose different helper libraries you want to use in your application and in this case, I’ve installed the FaceBookSocialPlugins.Helper 1.0 helper.

image

Now that the Facebook helper installation is verified, the helpers it contains are now available to your project and organized into two folders: App_Data and App_Code

Finding & Examining Helper Documentation

Many helpers will come packaged with documentation located in a subfolder under the \App_Data\packages\HelperName folder.  Examining the contents in helper install folders reveals the installed packages and sub-folders with .cshtml, images, web assets, etc…  Some helpers, including the Facebook helper, will also install .cshtml files to the App_Code folder.  Note that not all helpers will install anything to the App_Code folder.

helpers

If you prefer, you can browse the object hierarchy by using Reflector to see what goodies are in any particular helper’s library if the library includes a .dll. Here’s a snapshot of the objects in the System.Web.Helpers.dll, since the Facebook helper contains only .cshtml files.

image

 

Using Helpers in Code

Go ahead and start using helpers with the familiar dot notation of object.method([args…]) like so:

@Facebook.LikeButton()

You can add helpers anywhere in the page that makes sense; in between text, markup or as HTML attribute values. Only one line of code is needed to render the FaceBook “Like” button (or any other helper, for that fact).   The like button renders the current web address by default for the “like” action.

image

Using the Bakery sample’s default.cshtml page, the “like” button can be added to the Bakery’s home page so customers can connect instantly with Facebook.  You can use parameters to customize the output that the helper renders, in this example, the URL, action and color scheme.  The Facebook helper code is located in the \App_Code\FacebookSocialPlugins.cshtml file and is easily readable and can be used as documentation.  You’ll find all arguments and values for this and the rest of the Facebook helpers there.

<!—top of page—>

 <h1>Welcome to Fourth Coffee!</h1>

 

    <div class="facebook">

     @Facebook.LikeButton(

      url: "http://the-razor-bakery.com", 

      action: "like",         

      colorScheme: "light")

    </div>

 

<div id="featuredProdcut">

<!—rest of page—>

 

 

The code produces this output in the Bakery sample’s default.cshtml file.  As you can see, with just a single line of code it’s easy to add social networking or any other behavior helpers provide to your site.

 

image

 

Once you’ve installed and used a few helpers, you’ll want to author them soon thereafter.  Here’s a few links that will help you learn about some built-in helpers and to get started doing more with ASP.NET Web Pages, WebMatrix and helpers.

  1. Download WebMatrix 
  2. Top 10 features for Web Matrix
  3. API Reference Guide
  4. ASP.NET Web Pages Forum
  5. Web Matrix eBook

1 Comment

Comments have been disabled for this content.