niedziela, 15 maja 2011

Mapa strony w ASP.NET WebForms

Tworząc zaawansowaną witrynę, zawierającą wiele odnośników i form, należy przemyśleć system nawigacji po stronie. Przedzieranie się poprzez wszystkie elementy menu, podmenu itd. może mocno zirytować użytkownika który odwiedza taką stronę.
Każdy nowy użytkownik potrzebuje centralnego miejsca skąd może dotrzeć w łatwy i szybki sposób do zasobów strony. Dodatkowo stworzenie mapy witryny ułatwi pracę robotą wyszukiwarek internetowych dzięki czemu nasza strona znajdzie się wyżej w wynikach wyszukiwarek
Dla naszej wygody ASP.NET WebForms umożliwia wykonanie tej czynności w szybki i łatwy sposób.
Microsoft dla takich celów przygotował mechanizm zwany Site Map. Mapa strony zawiera hierarchiczną strukturę całej witryny. Dane pobierane są z pliku XML.

Stwórzmy więc prosty projekt, który będzie zawierać odgałęzienia, treść jest w tym momencie nie ważna. Moja przykładowa struktura będzie wyglądała następująco:


Dodajemy więc plik Mapy strony:


W środku pliku standardowo znajduje się poniższa treść:


Code:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="" title=""  description="">
        <siteMapNode url="" title=""  description="" />
        <siteMapNode url="" title=""  description="" />
    </siteMapNode>
</siteMap>

Kolejne elementy mapy definiowane są przez składnię:


Code:
<siteMapNode url="" title=""  description="" />

gdzie:
title - treść wyświetlana użytkownikowi
url - definiuje adres strony na którą ma przenieść użytkownika
description - nieobowiązkowy opis

Tak więc przykładowa implementacja będzie miała postać:


Code:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="" title=""  description="">
        <siteMapNode url="Account\ChangePassword.aspx " title="Zmiana hasła"  description="" />
        <siteMapNode url="Account\ChangePasswordSuccess.aspx" title="Pomyślna zmiana hasła"  description="" />
        <siteMapNode url="Account\Login.aspx" title="Logowanie" description="" />
        <siteMapNode url="Account\Register.aspx" title="Rejestracja" description="" />
        <siteMapNode url="About.aspx" title="O stronie" description="" />
        <siteMapNode url="Categories.aspx" title="Kategorie" description="" />
        <siteMapNode url="Products.aspx" title="Produkty" description="" />
    </siteMapNode>
</siteMap>

Mając plik XML należy przypisać jego zawartość jakiejś kontrolce. Tutaj Microsoft także postanowił ułatwić sprawę i stworzył odpowiednie kontrolki do bindowania treści mapy strony.
Aby wyświetlić dane z pliku XML musimy użyć kontrolki bindującej SiteMapDataSource:


Code:
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

Następnie dane możemy wyświetlić w jednej z kontrolek: Menu, TreeView oraz SiteMapPath. Ja użyję kontrolki Menu:


Kod stojący za wyświetlaniem tego menu przedstawia się następująco:


Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SiteStructure.aspx.cs" Inherits="WebApplication3.SiteStructure" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="true" />
        <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" MaximumDynamicDisplayLevels="5">
        </asp:Menu>
    </div>
    </form>
</body>
</html>

W taki oto sposób osiągnęliśmy zamierzony efekt. ASP.NET webforms oferuje wiele ułatwień dla programistów. Umiejętne wykorzystanie ich może zarówno wzbogacić naszą stronę jak i sprawić że będzie bardziej dostępna w internecie.

Brak komentarzy:

Prześlij komentarz