How To Select A Css Class As Selected Dynamically In Mvc

I'm working on mvc4 project. I have following html code which is of menu items when we clicked on new menu it will take css class active automatically

Solution 1:

I suppose that there's some condition on the item that allows you to determine if it is the currently active one. And then you could use the conditional operator like that:

@{
    var selected = item.IsCurrentItem ? " class=\"selected\"" : "";
}
<li><a href="#filter" data-option-value="*"@Html.Raw(selected)>@item.TypeName</a></li>

This example assumes that your model has an IsCurrentItem boolean property. If it doesn't you should replace it with the corresponding condition that will determine if it is the current item.

---

UPDATE:

It appears that you are attempting to toggle the selected class on the current item when this item is clicked. You could use javascript for that.

For example:

$(function() {
    $('.work-nav a').click(function() {
        // remove the selected class from all anchors
        $('.row a').removeClass('selected');

        // Add the selected class to the currently clicked anchor
        $(this).addClass('selected');
    });
});

Also note that you have produced broken markup. You have used <nav id="options" and <ul id="filters" inside a foreach loop. This means that potentially you might have more than one element with the same id in your HTML page. This results in invalid HTML! In HTML all ids must be unique.

---

UPDATE 2:

In order to make the first item selected initially when the page loads you could use the following:

foreach(var i = 0; i < Model.Count; i++)
{
    <div class="row">
        <div class="span3">
            <!-- Filter -->
            <nav class="work-nav">
                <ul class="option-set" data-option-key="filter">
                    <li>
                        @{
                            var item = Model[i];
                            var selected = i == 0 ? " class=\"selected\"" : "";
                        }
                        <a href="#filter" data-option-value="*"@Html.Raw(selected)>@item.TypeName</a>
                    </li>
                </ul>
            </nav>
            <!-- End Filter -->
        </div>
    </div>
}

Solution 2:

Have your viewmodel a property to store the selected item name/id.

public class PageViewModel
{
  public int SelectedMenuID { set;get;}
  //Now your existing viewmodel properties goes here
  public List<MenuItem> MenuItems { set;get;}
}

in your action method, set the SelectedMenuID property value.

public ActionResult Customers()
{
  var vm=new PageViewModel();
  vm.SelectedMenuID=5; // hardcoded for demo. 
  vm.MenuItems=LoadMenuItemsCollectionFromSomeWhere();
  return View(vm);
}

now in your view you can check it the SelectedMenuID is same as the current item's ID in the loop.

@model PageViewModel
@forach(var menu in Model.MenuItems)
{
  <div>
    <a href="#filter" class="@(Model.SelectedMenuID==menu.MenuID?"selected":"")">
      @menu.Name
    </a>
  </div>

}

Assuming MenuItem class has 2 properties, MenuID and MenuName

Share