Похоже ли это на правильный подход к реализации вкладок в ASP.NET MVC? - PullRequest
Новая
       12

Похоже ли это на правильный подход к реализации вкладок в ASP.NET MVC?

2 голосов
/ 12 июня 2009

Посмотрев, как на 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, а подход с использованием строки запроса кажется неаккуратным.

Ответы [ 4 ]

5 голосов
/ 12 июня 2009 
<% 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") %>
2 голосов
/ 12 июня 2009

Если вы создаете объект для определения структуры меню, разметка может быть легко сгенерирована с помощью 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;
}
0 голосов
/ 12 июня 2009

Самое элегантное решение, которое я когда-либо видел, было сделано Torkel Ödegaard на http://www.codinginstinct.com/ с использованием наследования ViewModel. Он включает в себя отличный интерфейс для добавления / управления вкладками.

Теперь его код представления использует движок представления Spark, но вы можете легко реализовать его в движке представления WebForm.

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

0 голосов
/ 12 июня 2009

Либо заверните его в помощника, как предложено, либо сделайте что-то, как я описал в этом ответе .

...