Exercise 3: Creating and Consuming Razor Helpers

ASP.NET Web Pages Helpers are components that provide certain functionality, and can be accessed by any Razor or ASP.NET Web Page by using a single line of code. You can build your own helpers, which are stored as .cshtml|vbhtml razor files, or use the built-in helpers from ASP.NET or Razor.

Using helpers will increase your code reusability, organization and maintainability because you will be creating separate units for specific features. In addition, you could take advantage of built-in or third party helpers to easily interact with multimedia, social networks, security, email and data grids.

In this exercise, you will learn how to consume and create Razor helpers in your solution. To do that, you will first use a WebImage helper to display images with watermarks, and then you will use a WebGrid helper to show the album data. At the end, you will create a custom helper with Razor syntax to show the current date.

Task 1 – Consuming the Razor WebImage Helper

In this task, you will learn how to use Razor WebImage Helper to display an image and add a watermark on it.

1. If not already open, start Microsoft Visual Web Developer 2010 Express from Start | All Programs | Microsoft Visual Studio 2010 Express | Microsoft Visual Web Developer 2010 Express.
2. In the File menu, choose Open Project. In the Open Project dialog, browse to Source\Ex03-CreatingAndUsingHelpersInRazor\Begin, select MvcMusicStore.sln and click Open.
3. Open Index.cshtml|vbhtml view at Views/Home project folder and add WebImage Helper logic to load an image and save it in a different location. To do this, you will first use WebImage() to load an image inside a variable:

   cshtml

   @model dynamic

   @{
       ViewBag.Title = "Index";
       Layout = "~/Views/Shared/Site.cshtml";
   }
       <h2>Index</h2>
   
   
   
   
     
   @{
         var image = new WebImage(@"~\Content\Images\home-showcase.png");
         var imagePath = @"Content/Images/newimage.png";
         var saveImagePath = @"~\Content\Images\newimage.png";
         image.Save(saveImagePath);
   }
   <img src="@imagePath" alt="image with watermark"/>
   
   
   

   vbhtml

   @modeltype Object

   @Code
       ViewBag.Title = "Index"
       Layout = "~/Views/Shared/Site.vbhtml"
   End Code
       <h2>Index</h2>
   
   
   
   
     
   @Code
         Dim image = New WebImage("~\Content\Images\home-showcase.png")
         Dim imagePath = "Content/Images/newimage.png"
         Dim saveImagePath = "~\Content\Images\newimage.png"
         image.Save(saveImagePath)
   End Code
   <img src="@imagePath" alt="image with watermark"/>
   
   
   

   Note:

   ImagePath separator character is “/” to allow browser compatibility.

4. Add a watermark to the image by using AddWatermark() method:

   cshtml

   …

   @{

         var image = new WebImage(@"~\Content\Images\home-showcase.png");

         image = image.AddImageWatermark(@"~\Content\Images\logo.png", horizontalAlign: "Left", verticalAlign: "Top");

         var imagePath = @"Content/Images/newimage.png";

         var saveImagePath = @"~\Content\Images\newimage.png";

         image.Save(saveImagePath);

   }

   <img src="@imagePath" alt="image with watermark"/>

   vbhtml

   …

   @Code

         Dim image = new WebImage("~\Content\Images\home-showcase.png")

         image = image.AddImageWatermark("~\Content\Images\logo.png", horizontalAlign: "Left", verticalAlign: "Top")

         Dim imagePath = "Content/Images/newimage.png"

         Dim saveImagePath = "~\Content\Images\newimage.png"

         image.Save(saveImagePath)

   End Code

   <img src="@imagePath" alt="image with watermark"/>

   Note:

   AddImageWatermark method accepts more parameters than the ones used here, which are optional and provide a default value. Here is the complete method definition:

   C#

   AddImageWatermark(

   string watermarkImageFilePath,

   string format (optional, default is null),

   int width (optional, default is 0, in pixel units),

   int height (optional, default is 0, in pixel units),

   string horizontalAlign (optional, default is "Right"),

   string verticalAlign (optional, default is "Bottom"),

   int opacity (optional, default is 100, in percentage),

   int padding (optional, default is 5, in pixel units)

   );

   Visual Basic

   AddImageWatermark(String watermarkImageFilePath,

   String format (optional, TypeOf default Is Nothing),

    Integer width (optional, TypeOf default Is 0, in

   pixel units),

   Integer width (optional, TypeOf default Is 0, in

   pixel units),

   Integer height (optional, TypeOf default Is 0, in

   pixel units),

   String horizontalAlign (optional, TypeOf default Is

   "Right"),

   String verticalAlign (optional, TypeOf default Is

   "Bottom"),

   Integer opacity (optional, TypeOf default Is 100, in

   percentage),

   Integer)

Task 2 – Running the Application

In this task, you will run the application to verify that the image with the watermark is loaded.

1. Press F5 to run the application.
2. The application starts in the Home page and displays the image with the watermark:

   

   Figure 22

   Image and watermark using Razor WebImage helper

Task 3 – Adding a WebGrid Helper to Browse View

In this task, you will add a WebGrid helper to show a grid of albums inside Browse view.

1. Open Browse.cshtml|vbhtml view at Views/Store project folder.
2. Create a WebGrid that uses the model to show the albums. Additionally the grid will be sorted by name and show 10 elements. To do this, you will create the grid using Model.Albums and two extra parameters: defaultSort and rowsPerPage.

   cshtml

   @model MvcMusicStore.ViewModels.StoreBrowseViewModel

   @{
       ViewBag.Title = "Browse Albums";
       Layout = "~/Views/Shared/Site.cshtml";
   }
   
   
   
   
     
   @{
       var grid = new WebGrid(Model.Albums, defaultSort: "Name", rowsPerPage: 10);
   }
   
   
   

   vbhtml

   @modeltype MvcMusicStore.ViewModels.StoreBrowseViewModel

   @Code
       ViewBag.Title = "Browse Albums"
       Layout = "~/Views/Shared/Site.vbhtml"
   End Code
   
   
   
   
     
   @Code
       Dim grid = new WebGrid(Model.Albums, defaultSort:= "Name", rowsPerPage:= 10)
   End Code
   
   
   

3. Display the WebGrid specifying two values in the Column collection: Title and Artist.

   cshtml

   @model MvcMusicStore.ViewModels.StoreBrowseViewModel

   @{
       ViewBag.Title = "Browse Albums";
       Layout = "~/Views/Shared/Site.cshtml";
   }
   @{
   var grid = new WebGrid(Model.Albums, defaultSort: "Name", rowsPerPage: 10);
   }
   
   
   
   
     
   @grid.GetHtml(columns: grid.Columns(
         grid.Column("Title"),
         grid.Column("Artist")
   ))
   
   
   

   vbhtml

   @modeltype MvcMusicStore.ViewModels.StoreBrowseViewModel

   @Code
       ViewBag.Title = "Browse Albums"
       Layout = "~/Views/Shared/Site.vbhtml"
   End Code
   @Code
   Dim grid = New WebGrid(Model.Albums, defaultSort:= "Name", rowsPerPage:= 10)
   End Code
   
   
   
   
     
   @grid.GetHtml(columns:= grid.Columns(
         grid.Column("Title"),
         grid.Column("Artist")
   ))
   
   
   

Task 4 – Running the Application

1. In this task, you will run the application to verify that the WebGrid is loaded and shows album data as expected.
2. Press F5 to run the application.
3. The project starts at Home. Change the URL to /Store/Browse to verify that the Browse view loads the WebGrid as configured in the last steps:

   

   Figure 23

   A Razor WebGrid showing the albums

Task 5 – Creating a Custom Helper

1. Up to now you have been using Razor third party helpers. In this task, you will learn how to create your own custom helper in Razor. In order to do that you will add to the solution a helper with the name “ShowTime()” that will show the current date and time.
2. Add a new element into App_Code by doing right-click on App_Code folder, and selecting “Add|New Item”.

   

   Figure 24

   Adding a new item into App_Code

3. In the Add New Item dialog, select from MVC 3 templates, MVC 3 Partial Page (Razor). Use the name MyHelpers.cshtml|vbhtml and click Add. This will create an empty Razor file with the name MyHelpers.cshtml|vbhtml.

   

   Figure 25

   Adding a new Razor Helper – C#

   

   Figure 26

   Adding a new Razor Helper - VB

4. Open MyHelpers.cshtml|vbhtml and declare the helper:

   cshtml

   @helper ShowTime(){
   }

   vbhtml

   @helper ShowTime()
   End helper

5. In ShowTime helper, include HTML code to show current date. To do that, you will use the @DateTime.Now code inside an HTML markup block:

   cshtml

   @helper ShowTime(){

       <div>
           Current Time is @DateTime.Now
       </div>

   }

   vbhtml

   @helper ShowTime()

       @<div>
           Current Time is @DateTime.Now
       </div>

   End helper

6. Open Index.cshtml|vbhtml View in the project folder Views/Home to call the helper:

   cshtml

   @model dynamic

   @{
       ViewBag.Title = "Index";
       Layout = "~/Views/Shared/Site.cshtml";
   }
   <h2>Index</h2>
   
   
   
   
     
   @MyHelpers.ShowTime()
   
   
   @{
         var image = new WebImage(@"~\Content\Images\home-showcase.png");
         image = image.AddImageWatermark(@"~\Content\Images\logo.png", horizontalAlign: "Left", verticalAlign: "Top");
         var imagePath = @"Content/Images/newimage.png";
         var saveImagePath = @"~\Content\Images\newimage.png";
         image.Save(saveImagePath);
   }
   <img src="@imagePath" alt="image with watermark"/>

   vbhtml

   @modeltype Object

   @Code
       ViewBag.Title = "Index"
       Layout = "~/Views/Shared/Site.vbhtml"
   End Code
   <h2>Index</h2>
   
   
   
   
     
   @MyHelpers.ShowTime()
   
   
   @Code
         Dim image = New WebImage("~\Content\Images\home-showcase.png")
         image = image.AddImageWatermark("~\Content\Images\logo.png", horizontalAlign:= "Left", verticalAlign:= "Top")
         Dim imagePath = "Content/Images/newimage.png"
         Dim saveImagePath = "~\Content\Images\newimage.png"
         image.Save(saveImagePath)
   End Code
   <img src="@imagePath" alt="image with watermark"/>

Task 6 – Running the Application

1. In this task, you will run the application to verify that the helper is working as expected.
2. Press F5 to run the application.
3. The project starts at Home:

   

   Figure 27

   Current time displayed with a custom helper

Next Step

Summary