Exercise 2: Adding an HTML Helper

Article
12/22/2011

Exercise 2: Adding an HTML Helper

The StoreManager Index page has one potential issue: Title and Artist Name properties can both be long enough to throw off the table formatting. In this exercise you will learn how to add a custom HTML helper to truncate that text.

In the following figure, you can see how the format is modified because of the length of the text.

Figure 6

Browsing the list of Albums with not truncated text

Task 1 – Extending the HTML Helper

In this task, you will add a new method Truncate to the Html object exposed within ASP.NET MVC Views. To do this, you will implement an extension method to the built-in System.Web.Mvc.HtmlHelper class provided by ASP.NET MVC.

Note:

To read more about extension methods, please visit this msdn article.

Start Microsoft Visual Web Developer 2010 Express from Start | All Programs | Microsoft Visual Studio 2010 Express | Microsoft Visual Web Developer 2010 Express.
In the File menu, choose Open Project. In the Open Project dialog, browse to Source\Ex02-AddingAnHTMLHelper\Begin, select MvcMusicStore.sln and click Open.
Add a new directory Helpers to place the new extension method. To do this, in the Solution Explorer, right-click the MvcMusicStore project, then Add, and New Folder.

Figure 7
Adding Helpers folder
Rename the folder to Helpers.

Figure 8
Helpers folder
Add a new class HtmlHelpers in the Helpers folder. To do this, right-click the Helpers folder, select Add and then Class. In the Add New Item dialog, change the name to HtmlHelpers.[cs|vb] and click Add.

Figure 1
Adding the Album class – C#

Figure 10
Adding HtmlHelpers class - VB
Add a using directive to System.Web.Mvc and a new method to the class. Because of extension methods definition, HtmlHelpers and the new method need to be static. Replace with the following code:

(Code Snippet – ASP.NET MVC 3 Helpers and Forms and Validation – Ex2 TruncateMethod – CSharp)
C#
```
using System;
```
FakePre-35b89888102342eb95f5bad830987ff8-90cadd841e0d4518b1462912e6d7504eFakePre-20615fb26b9b4bbb8fe31b786912dd45-b9329ea4b56c466b9bb9e6b96b626278FakePre-024933fc78e44c549d58ad563995895a-478e7c1ad92a43b7a0004d08c605dfeeFakePre-fe1f4788286d40379a38e753881e18c6-b4a545b663a84cd6b8c621edd280a2f3using System.Web.Mvc; namespace MvcMusicStore.Helpers { public static class HtmlHelpers { public static string Truncate(this HtmlHelper helper, string input, int length) { if (input.Length <= length) { return input; } else { return input.Substring(0, length) + "..."; } } } }FakePre-23b4d2e083dc4e8299a6e7924828b948-aab6afd0645747e9a7d47761dc8b8e74
(Code Snippet – ASP.NET MVC 3 Helpers and Forms and Validation – Ex2 TruncateMethod – VB)
Visual Basic
```
Public Module HtmlHelpers
```
FakePre-632829ac506b40bd8ff24e55c8e2786a-d88b60574f3f4af58724f8a861d46ec9FakePre-5395a8da050042a693710615f38aeb72-1891f6adf9aa442e9821061ebd55cb80FakePre-80e81f20b6064b1fa2ce39dccaffb4d7-ce52a224f7994c2f9d578afddcad4a39FakePre-e20b503b286e43f5bc4f82b574e2d526-c582d3f7a8304ce191739ae2ee5327b0FakePre-3084db6f5b6f41a08dd5d518724b3593-724606ca699a42f5b6ee358579ccba31FakePre-8115c78cfdb741d0baf1ae022cf2b612-3c25d81386eb473bae4b7676dfc5b2d2FakePre-a8727e7a2b764367b24f5bb275562b34-ecfd5dc5cf5b4ea7ada831c3761b133bFakePre-f55e4a4ad63245e3a3653ea6f1f51289-fc47f9619ef741d980e39bc2f58f741bFakePre-25afc15a4d7845bd9dc894bcb2ed7134-dc8316b803ca4deb825f7f863bc5c872FakePre-8167b78f716e40f79f3edd609d69644a-3aa3b03b5a984fc88d8e15a8e18813f1FakePre-3b20ac0224bc4ccc87536b27774a263f-5066691deaaa4cca826ecce086568712FakePre-740a1feee867428d9ef2b814031cede8-86a028c180a1480fbd2b7079781c56bbFakePre-786330410ca742648cfa26674aac3657-cef8340c708e44d0bdec95205f011941FakePre-ceec2431ac3c43fa9cbe3066e0f38621-6a0ed48a62564eeeb39289c0dea95136
Note:

This Truncate method will truncate a text if it is longer than the length parameter, adding a … for the remainder. If the text is shorter, the text will remain as is.
You may notice that the first parameter in the Truncate method includes a this. This is the way of defining the method as an extension method to the HtmlHelpers class. This will allow all HtmlHelpers class instances to use the Truncate method as if it was a class method. For example the implementation you will see in Task 3: Html.Truncate(item.Title, 25).

Task 2 – Registering the HTML Helper

In this task, you will register the HTML Helper with the application by modifying the application’s Web.config file.

Open the Web.config file from the Solution Explorer.
Add a reference to the MvcMusicStore.Helpers namespace in the pages section.
XML(C#)
```
<pages>
```
FakePre-0dbdf85470c24c7c9d0018dbe7259305-ef6f286793df4c60ad4bdc1a57a286e2FakePre-d8b38b6a20354f30ac37c22653f2223b-c5810b0662ce403b990329ca7dc184bbFakePre-a188e9d125fc4190876cbc118dc5b289-8242eaa4bbf7439287923c925a484bf1FakePre-7ffe24e4fed143f6b6efd328796af9bb-6717a095636e4f9795262931ddb5d6b9FakePre-b2697c764f9243568f80cb0762803b46-970668dd1a074ce0a2f8cf0c4402e0c8 <add namespace="MvcMusicStore.Helpers" />FakePre-fe1a79ff68194f8cb06738ecd782f682-c631375e06784484b74eac3277b94adcFakePre-b5a397518c3d4ed3b635df9abb60055c-4a3e148ddafa409e8bc2512b9db24d3d
XML(Visual Basic)
```
<pages>
```
FakePre-a7877fff49bd4275b7edc33b952ca8a9-2a9e80eae32e4756aff099144da2d36cFakePre-8e0290b5fbee42d3b16eb1f5fa12a0cc-87474754b1c544888d98b5daa9897720FakePre-8a1a465adfab4bee80d6ff4cec61770b-a914d91afb3640d0a4c0ca694af31288FakePre-6d690a279ac54caaa37ac569655b9d6e-1ab28c96a83948c6b725d5a37d8f6c07FakePre-ed9d6bebbc454b659e03f06299acde09-31fbd99f754e4b739478d77a9055f352 <add namespace="MvcMusicStore " />FakePre-713372b9c5f847f3a57a60fe57d847fd-ccc2753b6e0f4524977fb88d1ffa9919FakePre-0ba37ac726c44529972217a8c5f601d4-51fdf628de8b4abfb132d53def9a63e2
Note:

Another aproach would be to add an import directive in all the pages that need it:
C#
<%@ Import Namespace="MvcMusicStore.Helpers" %>.
Visual Basic
<%@ Import Namespace="MvcMusicStore " %>.
Although, by adding the reference in the Web.config file, it will be available for all pages.

You will find more information about import directive in this msdn article.

Task 3 – Truncating Text in the Page

In this task, you will use the Truncate method to truncate the text in the View template.

Open StoreManager’s Index View. To do this, in the Solution Explorer expand the Views folder, then the StoreManager and open the Index.aspx file.
Replace the lines that show the Album’s Title and Artist Name. To do this, replace the following lines:
HTML(C#)
```
<% foreach (var item in Model) { %>
```
FakePre-ba33a50cdbc84e9cb7484dc3cb27442b-aecf792c379d47b8991b51af27ec9627FakePre-aba01856976a4c5aad1524564eb5cfc6-728526aa004645d1869edb0d667bb8f9FakePre-2dbcf29d56ac4cbcbbc2bc0b64a25cc4-d21e391ef5214b92af9debecd51ba488FakePre-dfbf2b9295764927aafb4fd6698ce5fc-d9cbe87560984526b68e46c74099c22bFakePre-174e17644daf4e8db63bc415c64d9e0a-3b57c2d224d44e2483b3aa5124002ef4FakePre-f5f6859429cf42798c4473e7fea9b37e-331a6596b5924b2bb921eac654c8bab2 <td><%: Html.Truncate(item.Title, 25) %></td> <td><%: Html.Truncate(item.Artist.Name, 25) %></td>FakePre-09aef335b9b14bc38ea2d7dbf44f9d07-1568f51f431240dc9932d5b03c51b1d9FakePre-36411fbb42ac4775911c52bd191b5a6f-f1196b2d5f0643d8a4554543e3fb0f90FakePre-232f6122ebc2438ca78f4a6e841e61f7-e9d0809efe7148819c0d5fb326a2c3efFakePre-4b55a8641d914b86a2367a6d8498bf21-1b917eed0b84422eb1a82a1657617cec
HTML(Visual Basic)
```
<% For Each item In Model %>
```
FakePre-9ef9891033f5489397bfc5749839b812-a540a747ec914293aef07060b6ffac16FakePre-0ac427433a63418e8428fcb44e0a1325-ac631788b1fa46a38609f34a431fd23bFakePre-81422a2c916c43438f2853ef60daed06-bb55d98a2d37409488db0a31fe15e2ebFakePre-2a182ecd3aca4d0ea87e2fa9d44fa91e-781b6b93abd34d58ac1b78999b380ddeFakePre-b718ad0e5a99417997beb128325a9591-d0d01c599bb34a7eb6bed6c4d1191dacFakePre-bc5477b11b7046b183a8a9850580b655-888c4516e2724100aa5cc1c527e4eaa0 <td><%: Html.Truncate(item.Title, 25) %></td> <td><%: Html.Truncate(item.Artist.Name, 25) %></td>FakePre-49ce7ea5e30f437b953257bc321f591f-5530c1bc014e485181d1f114f4b9cfb4FakePre-89edd34e6a01497480ca52e80ebaa750-d0e079ec00b240ba940509438edc236bFakePre-9b2308c75edc4c81960ff84782b8b62f-156de3256a364ed4884f941efa475445FakePre-7b791ee20a1c480f991ea0143b7d0bb5-6add380e0d214c4183c40c6a3f5daeaa

Task 4 – Running the Application

In this task, you will test that the StoreManagerIndex View template truncates the Album’s Title and Artist Name.

Press F5 to run the Application.
The project starts in the Home page. Change the URL to /StoreManager to verify that long texts in the Title and Artist column are truncated.

Figure 11
Truncated Titles and Artist Names