ASP.NET MVC : Working With Helper Methods

In this article, we will implement the HTML custom helper methods. This facility allows developers to define the UI as needed by their business requirements.

Task 1: Open VS2010 and create a new MVC 3 application, name it "RAZOR_MVC3_Html_Helper_Methods". In this project add a new Folder, name it "HelperMethodsRepository".

Task 2: In the Model folder add a new class file, name it "DataClasses.cs" and add a classes as in the following:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. namespace RAZOR_MVC3_Html_Helper_Methods.Models
  6. {
  7. public class Person
  8. {
  9. public int PersonId { get; set; } public string PersonName { get; set; }
  10. }
  11. public class PersonList : List<Person>
  12. {
  13. public PersonList()
  14. {
  15. Add(new Person() { PersonId = 101, PersonName = "Mahesh Joshi"});
  16. Add(new Person() { PersonId = 102, PersonName = "Tejas Joshi" });
  17. Add(new Person() { PersonId = 103, PersonName = "Leena Joshi" });
  18. Add(new Person() { PersonId = 104, PersonName = "Rahul Patil" });
  19. Add(new Person() { PersonId = 105, PersonName = "Anagha Patil"});
  20. }
  21. }
  22. }

Task 3: In the folder "HelperMethodsRepository" add a new class file, name it "MyHtmlHelperExtensionClass.cs". This file will contain a HTML helper extension class. Implement it as below:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. using RAZOR_MVC3_Html_Helper_Methods.Models;
  7. using System.Collections;
  8. using System.Reflection;
  9. namespace RAZOR_MVC3_Html_Helper_Methods.HelperMethodsRepository
  10. {
  11. public static class MyHtmlHelperExtensionClass
  12. {
  13. private const string Nbsp = " ";
  14. private const string SelectedAttribute = "
  15. selected='selected'";
  16. /// <summary>
  17. /// Html Helper method for the Specific Collection
  18. /// </summary>
  19. /// <param name="helper"></param>
  20. /// <param name="per"></param>
  21. /// <returns></returns>
  22. public static MvcHtmlString ListData(this HtmlHelper helper,PersonList per)
  23. {
  24. MvcHtmlString resultString = null; string renderedResult = string.Empty; foreach (var item in per)
  25. {
  26. renderedResult += "<table><tr><td>" + item.PersonId + "</td> <td>" + item.PersonName + "</td></tr></table>";
  27. }
  28. resultString = new MvcHtmlString(renderedResult); return resultString;
  29. }
  30. }
  31. }

The method "ListData" is an extension method for the HtmlHelper class. This returns a "MvcHtmlSting" that contains a HTML Table with Person data in it.

Task 4: Build the project and ensure that it is error free.

Task 5: Add a new PersonController in the project in the Controller Project and add a constructor and an Index action as in the following:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. using RAZOR_MVC3_Html_Helper_Methods.Models;
  7. namespace RAZOR_MVC3_Html_Helper_Methods.Controllers
  8. {
  9. public class PersonController : Controller
  10. {
  11. PersonList personList;
  12. public PersonController()
  13. {
  14. personList = new PersonList();
  15. }
  16. //
  17. // GET: /Person/
  18. public ActionResult Index()
  19. {
  20. return View(personList);
  21. }
  22. }
  23. }

Task 6: Now generate an "Empty" Scaffold "Index" view from the person controller with "PersonList" as Model class as in the following:

MVC.jpg

Task 7: An Empty View will be generated. Add the following code in an Empty view:

  1. @model RAZOR_MVC3_Html_Helper_Methods.Models.PersonList
  2. @{
  3. ViewBag.Title = "Index";
  4. }
  5. <h2>Index</h2>
  6. <br /> <br /> <br /> <br />

My New Extension Method to Display Data

@Html.ListData(Model)

The preceding markup shows that the ListData method is called using an object of the HtmlHelper class.

Task 8: In "_Layout.cshtml" add an ActionLink for the newly added Index page "menucontainer" div tag as in the following:

<li>@Html.ActionLink("Person", "Index", "Person")</li>

Task 9: Run the application, you will get the Person Tab. Click on it, and get the result.