How to add an attribute to an HTML tag depending on the URL in a MVC app
I render a list of items like:
<ul>
<li>Something 1</li>
<li>Something 2</li>
<li>Something 3</li>
<li>Something 4</li>
<li>Something 5</li>
</ul>
Depending on the route I want to add a class to one of the <li>
tags so that I can highlight.
Maybe something like:
<ul>
<% if (this.Context.Request.RawUrl.Contains(something1Var)) { %>
<li class="highlight">
<% } else { <%>
<li>
<% } %>
Something 1</li>
<% if (this开发者_JAVA百科.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>
It does work but it seems a bit verbose. Can anyone suggest a better method of doing this sort of thing?
I'd argue that this kind of logic is better isolated in the controller. Consider making a lightweight class to represent your menu items, like this:
public class MenuLinkItem {
public string Text { get; set; }
public bool Highlight { get; set; }
}
Then in your controller method, build a list of these, set the CSS class on the highlighted element, and pass the result to the view via the 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());
}
}
Then, in your actual view code, you render your menu like this:
<ul>
<% foreach(var item in (IList<LinkMenuItem>)ViewData["menuLinkItems"])) { %>
<li <%= item.Highlight ? "class=\"highlight\"" : ""%>><%=item.Text%></li>
<% } %>
</ul>
The controller's making the decisions about which links are highlighted, and the view is converting those decisions into an HTML/CSS representation that makes sense to your users.
精彩评论