如何在 mvc 中动态选择 css 类答案

【问题标题】：How to select a css class as selected dynamically in mvc如何在 mvc 中动态选择 css 类
【发布时间】：2013-12-29 16:10:44
【问题描述】：

我正在开发 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>
}

引导我。

【问题讨论】：

标签： jquery html css asp.net-mvc asp.net-mvc-4

【解决方案1】：

~~我想item 上有一些条件可以让您确定它是否是当前活动的。然后你可以像这样使用条件运算符：~~

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

此示例假定您的模型具有 IsCurrentItem 布尔属性。如果不是，则应将其替换为将确定它是否为当前项目的相应条件。

更新：

您似乎正在尝试在单击此项目时切换当前项目上的选定类。您可以为此使用 javascript。

例如：

$(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');
    });
});

另请注意，您生成了损坏的标记。您在 foreach 循环中使用了 <nav id="options" 和 <ul id="filters"。这意味着您的 HTML 页面中可能有多个具有相同 id 的元素。这会导致 HTML 无效！在 HTML 中，所有 id 都必须是唯一的。

更新 2：

为了在页面加载时首先选择第一个项目，您可以使用以下内容：

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

【讨论】：

哦，那你应该使用javascript，而不是服务器端。我会更新我的答案。
我已经更新了我的答案，并举例说明了如何使用 jquery 实现这一目标。
不，绝对不是。您可以在页面加载时使用它来初步确定所选项目（如果需要）。例如，如果您在服务器上的某处保留此选择，这可能很有用。如果没有，我想您将只选择要选择的第一个项目。页面加载后，您将使用 javascript 对其进行操作。
是的，您可以在最初选择它。您有 2 种可能性：在服务器上执行（首选）或使用 javascript。
使用for 循环而不是foreach。这将允许您跟踪索引。我已经更新了我的答案以提供一个例子。

【解决方案2】：

让您的视图模型有一个属性来存储选定的项目名称/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 类有 2 个属性，MenuID 和 MenuName

【讨论】：