asp.net-core-mvc - 在 Bootstrap UI 元素中设置活动类的更好方法

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 元素？

标签： asp.net-core-mvcasp.net-core-2.0

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>