Question

我有一个Bootstrap按钮组，可用于控制过滤：

<div class="btn-group btn-group" role="group" aria-label="AM/PM">
  <a href="/PrivateHires/StateFair?ampm=am" role="button" class="btn btn-default">AM</a>
  <a href="/PrivateHires/StateFair?ampm=pm" role="button" class="btn btn-default">PM</a>
</div>

在active元素的a中添加class将使按钮看起来像被选中。

我目前的优雅方法是使用if语句：

<div class="btn-group btn-group" role="group" aria-label="AM/PM">
@if (ViewData["ampm"].ToString() == "AM")
{
    <a href="/FooController/Foo?ampm=am" role="button" class="btn btn-default active">AM</a>
    <a href="/FooController/Foo?ampm=pm" role="button" class="btn btn-default">PM</a>
}
else
{
    <a href = "/FooController/Foo?ampm=am" role="button" class="btn btn-default">AM</a>
    <a href = "/FooController/Foo?ampm=pm" role="button" class="btn btn-default active">PM</a>
}
</div>

我创建了一个函数，但是无法使用a语法：

public string active(string AmPm)
{
    if (ViewData["ampm"].ToString()==AmPm){ return "class='active'"; }
    else { return ""; }
}

...

<a href="/FooController/Foo?ampm=am" role="button" class="btn btn-default @ative('AM')">AM</a>
<a href="/FooController/Foo?ampm=pm" role="button" class="btn btn-default @active('PM')">PM</a>

是否有更优雅的方法来设置active类？通常，是否有更好的方法可基于查询字符串值修改UI元素？

Answer 1

我修改了功能：

@functions
{
  public string ActiveAmPm(string ampm)
  {
    if (ViewData["ampm"].ToString() == ampm) { return "active"; }
    else { return ""; }
  }
}

然后引用了它：

<div class="btn-group btn-group" role="group" aria-label="AM/PM">
    <a href="/FooController/Foo?ampm=am" role="button" class='btn btn-default @ActiveAmPm("AM")'>AM</a>
    <a href="/FooController/Foo?ampm=pm" role="button" class='btn btn-default @ActiveAmPm("PM")'>PM</a>
</div>

在Bootstrap UI元素中设置活动类的更好方法

1 个答案: