Динамическое 2-уровневое меню в веб-приложениях - PullRequest
Новая
       16

Динамическое 2-уровневое меню в веб-приложениях

0 голосов
/ 01 ноября 2009

Я хочу создать горизонтальное меню верхнего уровня с горизонтальным меню второго уровня под ним. Нажатие на меню верхнего уровня приводит к изменению меню второго уровня в зависимости от меню верхнего уровня. нажатие на меню второго уровня приводит к изменению содержимого страницы.

(Кстати - я собираюсь сделать все это в ASP.NET MVC, поэтому, если у вас есть какие-либо идеи, относящиеся к этой платформе, поделитесь ими). ​​

  1. Я не уверен, каков наилучший способ сделать двухуровневое меню, поэтому при обновлении нулевого уровня пользователь покажет меню верхнего уровня. (Меню CSS? JavaScript, управляющий страницей? Комбинация обоих?)

  2. Как заставить приложение обновлять / перенаправлять / загружать только нижнюю панель (основное содержимое страницы), а не всю страницу? ASP.NET MVC в значительной степени ориентирован на всю страницу по умолчанию. Должен ли я создать его страницы?

Я разработчик серверов с жестким ядром, работающий над своим первым веб-приложением, так что будьте осторожны ...:)

Ответы [ 2 ]

4 голосов
/ 01 ноября 2009

@ Shachar, вы задаете 2 вопроса в одном посте, это не лучший способ использовать этот сайт. : -)

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

В своем комментарии я связал вас с оригинальной статьей Suckerfish , которая стала очень распространенным /, возможно, наиболее распространенным способом сделать это. Дэвид Лиддл показал вам более свежую реализацию Suckerfish с использованием jQuery; если вы уже используете jQuery, то это ИМХО лучшее решение сегодня.

Поскольку вы спрашиваете об угле ASP.NET MVC, Syncfusion имеет пакет графических виджетов для ASP.NET MVC, а Telerik строит один с использованием jQuery и сообщества участие. Не уверен, есть ли у кого-нибудь из них виджет меню ...

Как заставить приложение обновлять / перенаправлять / загружать только нижнюю панель (основное содержимое страницы), а не всю страницу? ASP.NET MVC по умолчанию в значительной степени ориентирован на всю страницу.

Хм, я не думаю, что ASP.NET MVC "ориентирован на всю страницу", просто есть много разных мнений о том, как делать AJAX. ASP.NET MVC предоставляет вам отличные строительные блоки для AJAX, а не полное решение.

Прежде всего, вы уверены, что хотите это сделать? Я думаю, что вы имеете в виду "AJAH", асинхронный JavaScript и HTML. Начиная с этой статьи об AJAH : «При использовании настоящего AJAX выполняется вызов на сервер, возвращаются красиво отформатированные данные, а клиентское приложение извлекает данные из XML и заменяет любые элементы, которые необходимо заменить. на странице. С помощью AJAH возвращается глобус html и помещается на страницу. ".

AJAH не так часто используется сегодня , по следующим причинам:

  • Вы не экономите значительное количество веса страницы (в байтах) по сравнению с более традиционным подходом, в котором используется кэширование для уменьшения веса последующих страниц.
  • Вы не разделяете данные и представление, поэтому ваш код менее чист, и вы не создаете что-то, что можно было бы повторно использовать в подходах API или SOA позже.

ИМХО, наилучшее использование AJAX прямо сейчас , в отношении (улучшения удобства использования) по сравнению с (временем разработки и контроля качества), должно позволять страницам с высоким ROI загружать наборов данных через AJAX. Например, раздел статистики веб-приложения может загружаться как обычная страница (с начальным набором данных, показывающим график, который, скорее всего, хочет пользователь), и позволять пользователю изменять график с помощью вызова AJAX для новых данных.

ИМХО, вы также должны рассмотреть ненавязчивый Javascript . Это сложно объяснить, но все начинается с простого вопроса: «Что если пользовательский агент не поддерживает Javascript?». В приведенном выше примере с графиком пользователю не повезло, потому что он не мог изменить график без Javascript. Вот хорошая презентация, показывающая ненавязчивых примеров Javascript .

Другая сторона медали - полноценный AJAX (например, GMail) , где более или менее все построено с использованием виджетов Javascript UI. Это требует довольно много усилий, чтобы построить ...

Предполагая, что вы хотите пойти по пути AJAX, вот одно краткое введение в AJAX с использованием ASP.NET MVC и jQuery. После этого, возможно, может пригодиться одна из этих книг ?

4 голосов
/ 01 ноября 2009

Взгляните на плагин Superfish от jQuery

http://users.tpg.com.au/j_birch/plugins/superfish - перейти к Примерам и стилю nav-bar

Это работает путем создания html-списка и использует jquery и css для его стилизации. 

<ul>
   <li><a href="">Top level item 1</a>
       <ul>
           <li><a href="">Sub item</a></li>
       </ul>
   </li>
   <li><a href="">Top level item 2</a>
       <ul>
           <li>Sub item</li>
       </ul>
   </li>
</ul>

Каждый элемент может / должен относиться к контроллеру / методу действия. Затем вам нужно будет определить, какой контроллер / действие вы просматриваете, чтобы убедиться, что для каждой страницы выбран правильный пункт меню.

Вот частичное представление menu.ascx, которое я создал. 

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<% string menu = ViewContext.RouteData.Values["Controller"].ToString().ToLower(); %>
<% string submenu = ViewContext.RouteData.Values["Action"].ToString().ToLower(); %>

<div id="navigation">
    <ul id="menu" class="nav-menu nav-navbar">
        <% if (menu=="home") { %><li class="current"><% } else { %><li><% } %>
      <%= Html.ActionLink("Home", "Index", "Home") %>
   <ul></ul>
  </li>
  <% if (menu=="configuration") { %><li class="current"><% } else { %><li><% } %>
      <%= Html.ActionLink("Configuration", "Index", "Configuration") %>
   <ul>
       <% if (menu=="configuration" && submenu=="page") { %><li class="current"><% } else { %><li><% } %>
        <%= Html.ActionLink("Pages", "Pages", "Configuration") %>
    </li>
    <% if (menu=="configuration" && submenu=="headline") { %><li class="current"><% } else { %><li><% } %>
        <%= Html.ActionLink("Headlines", "Headlines", "Configuration") %>
    </li>
    <% if (menu=="configuration" && submenu=="file") { %><li class="current"><% } else { %><li><% } %>
        <%= Html.ActionLink("Files", "Files", "Configuration") %>
    </li>
    <% if (menu=="configuration" && submenu=="rules") { %><li class="current"><% } else { %><li><% } %>
        <%= Html.ActionLink("Application Rules", "Rules", "Configuration") %>
    </li>
   </ul>
  </li>
  ...
...