Как добавить атрибут в тег HTML в зависимости от URL-адреса в приложении MVC - PullRequest
2 голосов
/ 14 октября 2009

Я отображаю список элементов, таких как:

<ul>
  <li>Something 1</li>
  <li>Something 2</li>
  <li>Something 3</li>
  <li>Something 4</li>
  <li>Something 5</li>
</ul>

В зависимости от маршрута я хочу добавить класс к одному из тегов <li>, чтобы выделить его.

Может быть, что-то вроде:

<ul>
<% if (this.Context.Request.RawUrl.Contains(something1Var)) { %>
<li class="highlight">
<% } else { <%>
<li>
<% } %>
Something 1</li>

<% if (this.Context.Request.RawUrl.Contains(something2Var)) { %>
<li class="highlight">
<% } else { <%>
<li>
<% } %>
Something 2</li>

<% if (this.Context.Request.RawUrl.Contains(something3Var)) { %>
<li class="highlight">
<% } else { <%>
<li>
<% } %>
Something 3</li>
<% if (this.Context.Request.RawUrl.Contains(something3Var)) { %>
<li class="highlight">
<% } else { <%>
<li>
<% } %>
Something 4</li>

<% if (this.Context.Request.RawUrl.Contains(something5Var)) { %>
<li class="highlight">
<% } else { <%>
<li>
<% } %>
Something 5</li>
</ul>

Это работает, но кажется немного многословным. Кто-нибудь может предложить лучший способ сделать это?

1 Ответ

4 голосов
/ 14 октября 2009

Я бы сказал, что такая логика лучше изолирована в контроллере. Попробуйте создать легкий класс для представления пунктов меню, например:

public class MenuLinkItem {
    public string Text { get; set; }
    public bool Highlight { get; set; }
}

Затем в вашем методе контроллера создайте их список, установите класс CSS для выделенного элемента и передайте результат в представление через ViewData:

public class MyController : Controller { 
  private MenuLinkItem MakeMenuLinkItem(string text, string urlFragment) {
     return (new MenuLinkItem() {
        Text = text,
        Highlight = (this.Context.Request.RawUrl.Contains(urlFragment))
     }
  }   

  private IList<MenuLinkItem> GetMenuLinkItems() {
      var items = new List<MenuLinkItem>();  

     items.Add(MakeMenuLinkItem("Something 1", something1var));
     items.Add(MakeMenuLinkItem("Something 2", something2var));
     items.Add(MakeMenuLinkItem("Something 3", something3var));
     items.Add(MakeMenuLinkItem("Something 4", something4var));
     items.Add(MakeMenuLinkItem("Something 5", something5var));
     return(items);
  }

  public ActionResult Index() {
      ViewData["menuLinkItems"] = GetMenuLinkItems();
      /* other controller logic here */
      return(View());
  }
}

Затем в вашем реальном коде представления вы отображаете свое меню следующим образом:

<ul>
<% foreach(var item in (IList<LinkMenuItem>)ViewData["menuLinkItems"])) { %>
  <li <%= item.Highlight ? "class=\"highlight\"" : ""%>><%=item.Text%></li>
<% } %>
</ul>

Контроллер принимает решения о том, какие ссылки выделены, а представление преобразует эти решения в представление HTML / CSS, которое имеет смысл для ваших пользователей.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...