Главная > ASP.NET > ASP.NET MVC для начинающих. Часть 3. Treeview – быстрый урок.

ASP.NET MVC для начинающих. Часть 3. Treeview – быстрый урок.

Так, в перерыве между рабочей запарой, появилось пять свободных минут — пустим их в дело, сделаем Treeview.

Отсутствие готовых контролов в ASP.NET MVC увеличивает время разработки приложения по сравнению с ASP.NET Webforms. А помните, как удобно, быстро и просто было натянуть Treeview на карту сайта и получить основу для навигации ? После предыдущих двух уроков, у вас возможно появилось желание создать что-нибудь свое. Какой бы сайт, для каких бы целей вы ни создавали, вы столкнетесь с проблемой навигации. Навигация — один из важнейших компонентов вашего сайта, поэтому подумать о ней следует заранее, конечно, вы можете руками забивать ссылки (анкоры) на МастерПейдж, но на мой взгляд, пусть такими вещами занимаются школьники. Кстати, когда я впервые столкнулся с DLE (цмска Data Life Engine), то был, мягко говоря, удивлен, что навигация забивается имеено в шаблон, все это конечно просто и быстро, но как-то не по "программистски".

Целью урока и его результатом будет создание аналога Treeview из Webforms, причем код HTML будет оптимизирован. В нем не будет javascript, поэтому клиентское раскрытие дочерних узлов будет отсутствовать. Докрутить полученный контрол вы сможете сами без проблем.

Итак, поехали! Сперва создадим карту сайта Web.sitemap, пусть ее содержимое будет примерно таким:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode>
      <siteMapNode title="1"  description="" url="~/" menu="left" />
      <siteMapNode title="2"  description="" url="~/Home/Index/2" menu="left" />
      <siteMapNode title="3"  description="" url="~/Home/Index/3" menu="left" />
      <siteMapNode title="4"  description="" url="~/Home/Index/4" menu="left" />
      <siteMapNode title="5"  description="" url="~/Home/Index/5" menu="left" />
  </siteMapNode>
</siteMap>

Далее создаем helper (хелпер) SiteMapHelper c кодом:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.Mvc;

namespace Webferia_MVC.Helpers
{
    public static class SiteMapHelper
    {
        public static void RenderNavMenu(this HtmlHelper html)
        {
            HtmlTextWriter writer = new HtmlTextWriter(html.ViewContext.HttpContext.Response.Output);
            RenderRecursive(writer, SiteMap.RootNode);
        }

        private static void RenderRecursive(HtmlTextWriter writer, SiteMapNode node)
        {
            if (SiteMap.CurrentNode == node) // Здесь мы подсвечиваем текущее наше местоположение, причем элемент будет иметь класс "current", что в связке с цсс даст нам богатые возможности по изменению стиля элемента, так же мы применяем тег "strong", чтобы придать ссылке больший вес (это из области SEO)
            {
                writer.AddAttribute(HtmlTextWriterAttribute.Class, "current");
                writer.AddAttribute(HtmlTextWriterAttribute.Href, node.Url);
                writer.RenderBeginTag(HtmlTextWriterTag.A);
                writer.RenderBeginTag(HtmlTextWriterTag.Strong);
                writer.RenderEndTag();
            }
            else
            {
                // Рисуем ссылку (анкор)
                writer.AddAttribute(HtmlTextWriterAttribute.Href, node.Url);
                writer.RenderBeginTag(HtmlTextWriterTag.A);
            }
            writer.Write(node.Title);
            writer.RenderEndTag();

            if (node.ChildNodes.Count > 0)
            {
                writer.WriteLine();
                writer.RenderBeginTag(HtmlTextWriterTag.Ul);
                foreach (SiteMapNode child in node.ChildNodes)
                {
                    if (child["menu"] == "left") //Просто указываем, что это будет "левое" меню, мы ведь можем какую-то часть карты расположить, например, в блоке справа, пометив необходимые анкоры как "right" в карте сайта.
                    {
                        writer.RenderBeginTag(HtmlTextWriterTag.Li);
                        RenderRecursive(writer, child);
                        writer.RenderEndTag();
                        writer.WriteLine();
                    }
                }
                writer.RenderEndTag();
            }
        }
    }
}

Ну а на странице вписываем helper:

<% Html.RenderNavMenu(); %>

Запускам проект, если сделано все правильно, то радуемся результату :). Кстати, подобный код вы легко можете использовать в классических Webforms, создав серверный пользовательский элемент управления и переопределив метод Render(), я делаю именно так, поскольку генерируемый HTML-код элементов Treeview меня не устраивает.

  1. Mikl_Sh
    21 сентября 2010 в 22:22 | #1

    Большое спасибо автору за публикации.
    Небольшие дополнения к тексту выше:
    1. Для того, чтобы создать карту сайта, нужно Выделить «MvcApplication1»->ПКМ->add->NewItem->SiteMap

    2. Код хелпера пишется в контроле (*.cs).
    3. Чтобы работал вписанный в страницу хелпер , нужно в начале страницы вставить . Подробнее здесь: http://www.bulletinsite.net/index.php?id1=6&category=webmaster&author=sanderson-s&book=2010&page=255

  2. ilaya
    2 января 2011 в 00:30 | #2

    жаль на этом всё и закончилось…

  3. 5 января 2011 в 23:31 | #3

    Задавайте вопросы — буду отвечать, писать об общем можно бесконечно, а основа по ASP.NET MVC была как раз показана в первых трех уроках.

  4. ilaya
    12 января 2011 в 14:12 | #4

    никак немогу сообразить вариант второго меню «вертикалка гормошка» с отображением определённых категорий… если в вебформах это можно было решить используя xml. То в MVC мне нехватает знаний как реализовать…

  5. 24 января 2011 в 21:03 | #5

    Объясните подробнее. В моем примере меню как раз строилось из xml, к каждой ноде вы можете прикрепить свой атрибут, который будет указывать на принадлежность к определенной категории. С помощью Linq можно выбрать ноды определенных категорий.

  6. Andrey
    24 сентября 2011 в 05:20 | #6

    Хотел использовать ваш пример для организации навигации сайта (asp.net), с использованием ЧПУ, сделал как написано в вашей статье «ЧПУ (красивый урл) в ASP.NET. Routing Webforms» , все работает великолепно, до того момента пока в сайт не добавляется siteMap.
    Надеялся найти решение этой проблеммы в данной статье. Но вызвали затурднения следующие моменты:
    1. Что нужно поместить в пользовательский элемент управления?
    2. Как нужно переопределить метод Render()?

  7. 30 сентября 2011 в 20:18 | #7

    При использовании роутинга, вероятно, придется создать свой собственный SiteMapProvider. Но все зависит от реализации.

  1. Пока что нет уведомлений.