Question

在查看Orange Tabs ASP.NET MVC演示如何处理选项卡之后，它们具有以下内容：

查看：

<ul id="menu">
            <% if (Html.IsCurrentAction("Index", "Home")) { %>
                <li class="active"><%= Html.ActionLink("Home", "Index", "Home")%></li>
            <% } else { %>
                <li><%= Html.ActionLink("Home", "Index", "Home") %></li>
            <% }%>

            <% if (Html.IsCurrentAction("About", "Home"))
               { %>
                <li class="active"><%= Html.ActionLink("About", "About", "Home")%></li>
            <% } else { %>
                <li><%= Html.ActionLink("About", "About", "Home")%></li>
            <% }%>

            <% if (Html.IsCurrentAction("SampleTags", "Home"))
               { %>
                <li class="active"><%= Html.ActionLink("Sample Tags", "SampleTags", "Home")%></li>
            <% } else { %>
                <li><%= Html.ActionLink("Sample Tags", "SampleTags", "Home")%></li>
            <% }%>
            </ul>

和相应的助手类：

namespace Helpers
{
    public static class IsCurrentActionHelper
    {
        public static bool IsCurrentAction(this HtmlHelper helper, string actionName, string controllerName)
        {
            string currentControllerName = (string)helper.ViewContext.RouteData.Values["controller"];
            string currentActionName = (string)helper.ViewContext.RouteData.Values["action"];

            if (currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) && currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase))
                return true;

            return false;
        }
    }
}

这看起来像是解决这个问题的优雅方式吗？我已经看到了从javascript到查询字符串等的几十种不同方式。

我不喜欢javascript，因为我希望网站适用于非js启用的浏览器，而查询字符串方法似乎很简单。

Answer 1

<% if (Html.IsCurrentAction("Index", "Home")) { %>
     <li class="active"><%= Html.ActionLink("Home", "Index", "Home")%></li>
<% } else { %>
     <li><%= Html.ActionLink("Home", "Index", "Home") %></li>
<% }%>

我将所有这些隐藏在辅助方法背后：

<%= Html.Activelink("Index", "Home", "Home") %>

Answer 2

如果您创建一个对象来定义菜单结构，则可以通过ViewUserControl轻松生成标记，这样可以更容易地在一个行的多个位置重复使用（替换您首选的存储机制）。

<% Html.RenderPartial("Tabs", Session[Consts.cAdminTabSet]); %>

这是我用来定义标签的类。

public class TabSet
{
    public string ContainerID {get;set;}
    public List<TabDefinition> Tabs { get; set; }
    public string activeTab { get; set; }
}

public class TabDefinition
{
    public string Name { get; set; }
    public string Title { get; set; }
    public string HRef { get; set; }
    public string Img { get; set; }
    public bool ShowText { get; set; }
    public string CSSClass { get; set; }
}

以下是用于呈现标签的ViewUserControl：

<%@ Control Language="C#" 
 Inherits="System.Web.Mvc.ViewUserControl<TabSet>" %>
<% if (Model != null && !Model.Collapsed)
   { %>
    <div id="<%=  Model.ContainerID %>">
        <ul>
        <% foreach (var tb in Model.Tabs)
           {%>
               <li class="<%= (tb.Name == Model.activeTab)? "selected": "" %> <%= (string.IsNullOrEmpty(tb.CSSClass)) ? "" : tb.CSSClass  %>">

                    <a title="<%= tb.Title %>" href="<%= tb.HRef %>">
                    <span><% if (!string.IsNullOrEmpty(tb.Img)){%><img alt="<%= tb.Name %>" src="<%= tb.Img %>" /><%} %>
                    <% if (string.IsNullOrEmpty(tb.Img) || tb.ShowText == true){%><%= tb.Name%><%} %></span></a>
                </li>
           <%} %>
        </ul>
    </div>
<%} %>

这是我使用的CSS。

#lvl3Tab
{
    float: left;
    width: 100%;
    background: #C50000;
    font-size: 93%;
    line-height: normal;
    /*border-bottom: 1px solid #666;*/
}
#lvl3Tab img
{
    border: none;
    padding: 0px;
    margin: 0px;
}

#lvl3Tab ul
{
    margin: 0;
    padding: 5px 10px 0 50px;
    list-style: none;
}
#lvl3Tab li
{
    display: inline;
    margin: 0;
    padding: 0;
}
#lvl3Tab a
{
    float: left;
    background: url("/images/tableftM.gif") no-repeat left top;
    margin: 0;
    padding: 0 0 0 4px;
    text-decoration: none;
}
#lvl3Tab a span
{
    float: left;
    display: block;
    background: url("/images/tabrightM.gif") no-repeat right top;
    padding: 5px 15px 4px 6px;
    color: #666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#lvl3Tab a span
{
    float: none;
    color: #fff;
}
/* End IE5-Mac hack */
#lvl3Tab a:hover span
{
    color: #FFF;
}
#lvl3Tab a:hover
{
    background-position: 0% -42px;
}
#lvl3Tab a:hover span
{
    background-position: 100% -42px;
    color:#666;
}
#lvl3Tab ul li.selected a
{
    background-position: 0% -42px;
}
#lvl3Tab ul li.selected a span
{
    background-position: 100% -42px;
    color: #666;
}

Answer 3

按照建议将其包装在帮助器中，或执行something like I describe in this answer。

Answer 4

我见过的最优雅的解决方案是由TorkelÖdegaard在http://www.codinginstinct.com/使用ViewModel继承完成的。它包含一个非常流畅的界面，用于添加/操作标签。

现在他的视图代码正在使用Spark视图引擎，但您可以在WebForm视图引擎中轻松实现它。

http://www.codinginstinct.com/2008/10/view-model-inheritance.html

这似乎是在ASP.NET MVC中实现选项卡的好方法吗？

4 个答案: