Consuming a Helper code for optgroup functionality in Asp.net MVC

Question

I don't have the experience of working with Helpers so I am bit stuck in using a code at hand.

My requirement is simple and all I need is optgroup functionality in DropDownListFor extension method. While searching, I came across this Answer and have copied this as it is in a file named MyExtensionClass.cs.

But, I don't know how to use this or call the extension method defined in this. Please tell me how can i use this with my list.

Right now, following is the controller code for a selectlist for which i want to use the extension methods.

ViewBag.ParentCategoryId = new SelectList(db.Categories, "Id", "Name");

And this is my view code

@Html.DropDownListFor(model => model.Product.CategoryId, 
     (IEnumerable<SelectListItem>)ViewBag.CategoryId, "---Choose Category---", 
       new { @class = "required" })  

Please help me upgrade this to extension method with optgroup.

Answer 1

We use Serge Zab's helper for optgroup dropdowns. Here is a sample:

The viewmodel:

public class OurViewModel
{
    public int? TypeId { get; set; }
    public IEnumerable<GroupedSelectListItem> GroupedTypeOptions { get; set; }
}

The controller:

public ActionResult Add()
{
    var model = new OurViewModel
    {
        // fill with initial values
    };
    PutTypeDropDownInto(model);
    return View(model);
}

[NonAction]
private void PutTypeDropDownInto(OurViewModel model)
{
    model.GroupedTypeOptions = _repos.GetTypes()
        .OrderBy(t => t.Category.EnglishName).ThenBy(t => t.EnglishName)
        .Select(t => new GroupedSelectListItem
        {
            GroupKey = t.Category.RevisionId.ToString(),
            GroupName = t.Category.EnglishName,
            Text = t.EnglishName,
            Value = t.RevisionId.ToString()
        }
    );
}

The view

@Html.DropDownGroupListFor(m => m.TypeId, Model.GroupedTypeOptions, 
    "[Select a type]")

Note that you can't use a regular SelectList. You have to use a collection of his GroupedSelectListItem class. Also, our solution doesn't use viewbag. The dropdown list is strongly typed on the viewmodel.

Update

To get the html helper to work in your view, the view needs to be able to find it. You can either add a @using directive at the top of the view with your MyExtensionClass.cs namespace, or add the namespace to the view-specific web.config, like so:

<pages pageBaseType="System.Web.Mvc.WebViewPage">
  <namespaces>
    <add namespace="System.Web.Mvc" />
    <add namespace="System.Web.Mvc.Ajax" />
    <add namespace="System.Web.Mvc.Html" />
    <add namespace="System.Web.Routing" />
    <add namespace="Microsoft.Web.Mvc" />
    <add namespace="Namespace.For.MyExtensionClass" />
  </namespaces>
</pages>

Answer 2

This was added to ASP.NET MVC at version 5.2!

Property Group in SelectListItem allows you to specify a group for each item

Html.DropDownList() and DropDownListFor() now generate optgroup elements based on the groups included on the list of items.