Post
Ask Question

ASP.Net MVC : Working With Helper Methods

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.


Similar Articles