如何在mvc中动态选择css类

Question

我正在从事mvc4项目。下面是html code，它是menu items的，当我们点击新的菜单时，它将采用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 -->

我想把它转换成Mvc4 view cshtml，所有类型都来自数据库，所以我使用了foreach，但是如何应用类class="selected"，这个类目前是活动菜单？

我试过

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

指引我。

Answer 1

让您的视图模型有一个属性来存储所选项目名称/id。

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

在操作方法中，设置SelectedMenuID属性值。

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

现在，在您的视图中，您可以检查它，SelectedMenuID与循环中当前项的ID相同。

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

}

假设MenuItem类有两个属性，MenuID和MenuName