How to select a css class as selected dynamically in mvc

Question

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

    <div class="span3">
        <!-- Filter -->
        <nav id="options" class="work-nav">
            <ul id="filters" class="option-set" data-option-key="filter">
                <li><a href="#filter" data-option-value="*" class="selected">.Net</a></li>
                <li><a href="#filter" data-option-value=".javaset">Java</a></li>
                <li><a href="#filter" data-option-value=".rubyset">Ruby</a></li>
            </ul>
        </nav>
        <!-- End Filter -->

I want to convert this into Mvc4 view cshtml All Type are coming from database so i have used foreach but how do I apply class class="selected" which is currently active menu?

I tried something like

foreach(item in Model)
{
 <div class="row">
        <div class="span3">
            <!-- Filter -->
            <nav id="options" class="work-nav">
                <ul id="filters" class="option-set" data-option-key="filter">
                    <li><a href="#filter" data-option-value="*" class="selected">@item.TypeName</a></li>
                </ul>
            </nav>
            <!-- End Filter -->
        </div>
}

guide me.

Darin Dimitrov · Accepted Answer · 2013-12-29 16:57:46Z

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>
}

edited Dec 29, 2013 at 16:57

answered Dec 29, 2013 at 16:15

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Darin Dimitrov Over a year ago

Ohhh, then you should use javascript, not server side. I will update my answer.

Darin Dimitrov Over a year ago

I have updated my answer with an example of how to achieve that with jquery.

Darin Dimitrov Over a year ago

No, absolutely not. You could use that when the page is loaded, to initially determine the selected item if you want. For example if you are persisting this selection somewhere on the server this could be useful. If not, I suppose that you will just pick the first item to be selected. Once the page is loaded, you will act upon it with javascript.

Darin Dimitrov Over a year ago

Yes, you can make it selected initially. You have 2 possibilities: either do it on the server (preferred) or use javascript.

Darin Dimitrov Over a year ago

Use a for loop instead of a foreach. This will allow you to keep track of the index. I have updated my answer to provide an example.

|

Shyju · Accepted Answer · 2013-12-29 16:17:14Z

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

Collectives™ on Stack Overflow

How to select a css class as selected dynamically in mvc

2 Answers 2

13 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related