Megosztás a következőn keresztül:

Mesterlapok és webhelynavigáció (C#)

által Scott Mitchell

PDF letöltése

A felhasználóbarát webhelyek egyik gyakori jellemzője, hogy egységes, webhelyszintű oldalelrendezéssel és navigációs sémával rendelkeznek. Ez az oktatóanyag azt mutatja be, hogyan hozhat létre egységes megjelenést és hangulatot minden olyan oldalon, amely könnyen frissíthető.

Bevezetés

A felhasználóbarát webhelyek egyik gyakori jellemzője, hogy egységes, webhelyszintű oldalelrendezéssel és navigációs sémával rendelkeznek. ASP.NET 2.0 két új funkciót vezet be, amelyek jelentősen leegyszerűsítik a webhelyszintű oldalelrendezés és a navigációs séma implementálását: a mesterlapokat és a webhely-navigációt. A mesterlapok lehetővé teszik a fejlesztők számára, hogy webhelyszintű sablont hozzanak létre a kijelölt szerkeszthető régiókkal. Ez a sablon ezután alkalmazható a webhely ASP.NET lapjaira. Az ilyen ASP.NET lapoknak csak a mesterlap megadott szerkeszthető régióinak tartalmát kell megadniuk, a mesterlap összes többi korrektúrája azonos a mesterlapot használó összes ASP.NET lapon. Ez a modell lehetővé teszi a fejlesztők számára, hogy webhelyszintű lapelrendezést definiáljanak és központosítsanak, ezáltal egyszerűbbé téve a egységes megjelenést és hangulatot az összes olyan oldalon, amely könnyen frissíthető.

A webhelynavigációs rendszer lehetővé teszi a lapfejlesztők számára, hogy programozott módon lekérdezendő webhelytérképet és API-t határozzanak meg. Az új navigációs web szabályozza a menüt, a TreeView-t és a SiteMapPath-t, így a webhelytérkép egészét vagy egy részét egyszerűen megjelenítheti egy közös navigációs felhasználói felületi elemben. Az alapértelmezett webhelynavigációs szolgáltatót fogjuk használni, ami azt jelenti, hogy a webhelytérkép egy XML-formátumú fájlban lesz definiálva.

Ezen fogalmak szemléltetéséhez és az oktatóanyagok webhelyének használhatóbbá tétele érdekében töltsük el ezt a leckét egy webhelyszintű oldalelrendezés meghatározásával, egy webhelytérkép implementálásával és a navigációs felhasználói felület hozzáadásával. Az oktatóanyag végére letisztult webhelytervet fogunk készíteni az oktatóanyag weblapjaihoz.

Az oktatóanyag végeredménye

1. ábra: Az oktatóanyag végeredménye (kattintson ide a teljes méretű kép megtekintéséhez)

1. lépés: A mesterlap létrehozása

Az első lépés a webhely mesterlapjának létrehozása. A webhelyünk jelenleg csak a Gépelt adatkészletből (Northwind.xsda App_Code mappában), a BLL-osztályokból (ProductsBLL.csCategoriesBLL.csés így tovább, a mappábanApp_Code), az adatbázisból (NORTHWND.MDFa mappábanApp_Data), a konfigurációs fájlból (Web.config) és egy CSS stíluslapfájlból (Styles.css) áll. Kitisztítottam azokat az oldalakat és fájlokat, amelyek a DAL és a BLL használatával szemléltetik az első két oktatóanyagot, mivel ezeket a példákat részletesebben át fogjuk tárni a jövőbeli oktatóanyagokban.

A projekt fájljai

2. ábra: A projekt fájljai

Mesterlap létrehozásához kattintson a jobb gombbal a projekt nevére a Megoldáskezelőben, és válassza az Új elem hozzáadása lehetőséget. Ezután válassza ki a mesterlaptípust a sablonok listájából, és nevezze el.Site.master

Új mesterlap hozzáadása a webhelyhez

3. ábra: Új mesterlap hozzáadása a webhelyhez (kattintson ide a teljes méretű kép megtekintéséhez)

Itt definiálhatja a webhelyszintű lapelrendezést a mesterlapon. Használhatja a Tervező nézetet, és bármilyen elrendezés- vagy webes vezérlőt hozzáadhat, vagy manuálisan is hozzáadhatja a korrektúrát a Forrás nézetben. A mesteroldalamon kaszkádolt stíluslapokat használok a pozicionáláshoz és a stílusokhoz a külső fájlban Style.cssmeghatározott CSS-beállításokkal. Bár az alább látható korrektúra alapján nem állapítható meg, a CSS-szabályok úgy vannak definiálva, hogy a navigációs <div>tartalom teljesen úgy legyen elhelyezve, hogy a bal oldalon jelenjen meg, és rögzített szélessége 200 képpont legyen.

Site.master

<%@ Master Language="C#" AutoEventWireup="true"
    CodeFile="Site.master.cs" Inherits="Site" %>

<!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>Working with Data Tutorials</title>
    <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="wrapper">

        <form id="form1" runat="server">

            <div id="header">
                <span class="title">Working with Data Tutorials</span>
                <span class="breadcrumb">
                 TODO: Breadcrumb will go here...</span>
            </div>

            <div id="content">
                <asp:contentplaceholder id="MainContent"
                 runat="server">
                  <!-- Page-specific content will go here... -->
                </asp:contentplaceholder>
            </div>

            <div id="navigation">
                TODO: Menu will go here...
            </div>
        </form>
    </div>
</body>
</html>

A mesterlap a statikus lapelrendezést és a mesterlapot használó ASP.NET által szerkeszthető régiókat is meghatározza. Ezeket a szerkeszthető régiókat a Tartalomhelyőrző vezérlőelem jelzi, amely a tartalomban <div>látható. A mesterlap egyetlen ContentPlaceHolder (MainContent) tulajdonsággal rendelkezik, de a mesteroldalak több ContentPlaceHolder-et is tartalmazhatnak.

A fenti korrektúra beírásával a Tervező nézetre váltva megjelenik a mesterlap elrendezése. Azok az ASP.NET oldalak, amelyek ezt a mesterlapot használják, egységes elrendezést kapnak, és megadhatja a jelölést a MainContent régió számára.

A mesterlap a Tervező nézetben való megtekintéskor

4. ábra: A mesterlap, ha a Tervező nézetben tekinti meg (kattintson ide a teljes méretű kép megtekintéséhez)

2. lépés: Kezdőlap hozzáadása a webhelyhez

A mesterlap definiálása után készen állunk a webhely ASP.NET lapjainak hozzáadására. Kezdjük azzal, hogy hozzáadjuk Default.aspxa webhelyünk kezdőlapját. Kattintson a jobb gombbal a projekt nevére a Megoldáskezelőben, és válassza az Új elem hozzáadása lehetőséget. Válassza ki a Webes űrlap lehetőséget a sablonlistában, és nevezze el a fájlt Default.aspx. Jelölje be a "Mesterlap kiválasztása" jelölőnégyzetet is.

Új webűrlap hozzáadása, a mesterlap kijelölőnégyzetének bejelölése

5. ábra: Új webűrlap hozzáadása, a Mesterlap kijelölése jelölőnégyzet ellenőrzése (ide kattintva megtekintheti a teljes méretű képet)

Miután az OK gombra kattintott, a rendszer arra kéri, hogy válassza ki az új ASP.NET lap mesteroldalát. Bár a projektben több oldal minta is lehet, nekünk mégis csak egy van.

Válassza ki azt a mesterlapot, amelyet a ASP.NET lapnak használnia kell

6. ábra: Válassza ki azt a mesterlapot, amelyet a ASP.NET lapnak használnia kell (kattintson ide a teljes méretű kép megtekintéséhez)

A mesterlap kiválasztása után az új ASP.NET lapok a következő korrektúrát tartalmazzák:

Default.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"
  Runat="Server">
</asp:Content>

$c0$ Az irányelv hivatkozik a használt mesterlapfájlra ($c1$), és az ASP.NET lap jelölésrendszere tartalmaz egy Tartalomvezérlőt a mesterlapon definiált ContentPlaceHolder vezérlők mindegyikéhez, és a vezérlő $c2$ a Tartalom vezérlőelemet egy adott ContentPlaceHolderre térképezi. A Tartalom vezérlőelemben helyezi el a megfelelő ContentPlaceHolderben megjeleníteni kívánt korrektúrát. Állítsa be az @Page irányelv home attribútumát Title , és adjon hozzá néhány üdvözlő tartalmat a Tartalomvezérlőhöz:

Default.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" Title="Home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"
    Runat="Server">
    <h1>Welcome to the Working with Data Tutorial Site</h1>

    <p>This site is being built as part of a set of tutorials that
illustrate some of the new data access and databinding features in
ASP.NET 2.0 and Visual Web Developer.</p>

    <p>Over time, it will include a host of samples that
demonstrate:</p>

    <ul>
        <li>Building a DAL (data access layer),</li>
        <li>Using strongly typed TableAdapters and DataTables</li>
        <li>Master-Detail reports</li>
        <li>Filtering</li>
        <li>Paging,</li>
        <li>Two-way databinding,</li>
        <li>Editing,</li>
        <li>Deleting,</li>
        <li>Inserting,</li>
        <li>Hierarchical data browsing,</li>
        <li>Hierarchical drill-down,</li>
        <li>Optimistic concurrency,</li>
        <li>And more!</li>
    </ul>
</asp:Content>

Az Title irányelvben szereplő @Page attribútum lehetővé teszi a lap címének beállítását a ASP.NET oldalról, annak ellenére, hogy az <title> elem a mesteroldalon van definiálva. A címet programozott módon is beállíthatjuk a következő használatával Page.Title: . Azt is vegye figyelembe, hogy a mesterlap stíluslapokra mutató hivatkozásai (például Style.css) automatikusan frissülnek, így bármely ASP.NET lapon működnek, függetlenül attól, hogy a ASP.NET lap milyen könyvtárban található a mesterlaphoz képest.

A Tervező nézetre váltva láthatjuk, hogyan fog kinézni a lap egy böngészőben. Megjegyzendő, hogy az ASP.NET lap Tervező nézetében csak a tartalomszerkeszthető régiók módosíthatók, és a mesterlapon meghatározott nem ContentPlaceHolder jelölés ki van szürkítve.

A ASP.NET lap Tervező nézete a szerkeszthető és a nem szerkeszthető régiókat is megjeleníti

7. ábra: A ASP.NET lap tervezőnézete a szerkeszthető és a nem szerkeszthető régiókat is megjeleníti (ide kattintva megtekintheti a teljes méretű képet)

Amikor egy böngésző felkeresi a Default.aspx lapot, az ASP.NET motor automatikusan egyesíti a lap mesteroldalának tartalmát az ASP.NET tartalmával, majd az egyesített tartalmat a kérvényező böngészőnek küldött végső HTML-ként jeleníti meg. A mesterlap tartalmának frissítésekor a mesteroldalt használó összes ASP.NET lap tartalma újra egyesül az új mesterlap tartalmával a következő kéréskor. Röviden: a mesterlapmodell lehetővé teszi egyetlen lapelrendezési sablon (a mesterlap) meghatározását, amelynek módosításai azonnal megjelennek a teljes webhelyen.

További ASP.NET lapok hozzáadása a webhelyhez

Vegyünk egy kis időt, hogy további ASP.NET lapcsomókat adjunk hozzá a webhelyhez, amelyek végül a különböző jelentéskészítési bemutatókat fogják tárolni. Összesen több mint 35 bemutató lesz, ezért ahelyett, hogy az összes vázlatlapot létrehozzuk, csak az első néhányat készítsük el. Mivel a demók számos kategóriája is lesz, a bemutatók jobb kezelése érdekében adjon hozzá egy mappát a kategóriákhoz. Egyelőre adja hozzá a következő három mappát:

  • BasicReporting
  • Filtering
  • CustomFormatting

Végül vegyen fel új fájlokat a 8. ábrán látható Megoldáskezelőben látható módon. Az egyes fájlok hozzáadásakor ne felejtse el bejelölni a "Mesterlap kiválasztása" jelölőnégyzetet.

Az alábbi fájlok hozzáadása

8. ábra: A következő fájlok hozzáadása

2. lépés: Webhelytérkép létrehozása

A több mint egy maroknyi oldalból álló webhely kezelésének egyik kihívása, hogy a látogatók egyszerűen navigáljanak a webhelyen. Először is meg kell határozni a webhely navigációs struktúráját. Ezután ezt a struktúrát navigálásra alkalmas felhasználói felületi elemekre kell lefordítani, például menükre vagy zsemlékre. Végül ezt az egész folyamatot fenn kell tartani és frissíteni kell, mivel új lapokat adnak hozzá a webhelyhez, és eltávolítják a meglévőket. A 2.0-s ASP.NET előtt a fejlesztők önállóan hozták létre a webhely navigációs struktúráját, karbantartották és navigálható felhasználói felületi elemekké alakították át. A ASP.NET 2.0-val azonban a fejlesztők a nagyon rugalmas beépített webhelynavigációs rendszert használhatják.

A ASP.NET 2.0-s helynavigációs rendszer lehetővé teszi, hogy a fejlesztő meghatározzon egy helytérképet, majd egy programozott API-val hozzáférjen ezekhez az információkhoz. ASP.NET olyan helytérkép-szolgáltatóval rendelkezik, amely elvárja, hogy a helytérkép adatai egy adott módon formázott XML-fájlban legyenek tárolva. Mivel azonban a helynavigációs rendszer a szolgáltatói modellre épül, kiterjeszthető a helytérkép információinak szerializálásának alternatív módjaira. Jeff Prosise cikke, a várt SQL-helytérkép-szolgáltató bemutatja, hogyan hozhat létre egy helytérkép-szolgáltatót, amely a helytérképet egy SQL Server-adatbázisban tárolja; Egy másik lehetőség egy helytérkép-szolgáltató létrehozása a fájlrendszer struktúrája alapján.

Ebben az oktatóanyagban azonban használjuk az alapértelmezett helytérkép-szolgáltatót, amely a ASP.NET 2.0-val szállít. A webhelytérkép létrehozásához egyszerűen kattintson a jobb gombbal a projekt nevére a Megoldáskezelőben, válassza az Új elem hozzáadása lehetőséget, és válassza a Webhelytérkép lehetőséget. Hagyja meg a nevet, Web.sitemap és kattintson a Hozzáadás gombra.

Webhelytérkép hozzáadása a projekthez

9. ábra: Webhelytérkép hozzáadása a projekthez (ide kattintva megtekintheti a teljes méretű képet)

A webhelytérképfájl egy XML-fájl. Vegye figyelembe, hogy a Visual Studio intelliSense-t biztosít a webhelytérkép struktúrájához. A helyleképező fájlnak gyökércsomópontként a <siteMap> csomópontot kell tartalmaznia, amelynek pontosan egy <siteMapNode> gyermekelemet kell tartalmaznia. Az első <siteMapNode> elem ezután tetszőleges számú csökkenő <siteMapNode> elemet tartalmazhat.

Adja meg a helytérképet a fájlrendszer szerkezetének utánzásához. Vagyis adjon hozzá egy <siteMapNode> elemet a három mappa mindegyikéhez, és a gyermekelemeket <siteMapNode> a mappákban lévő ASP.NET lapok mindegyikéhez, például:

Web.oldaltérkép

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

  <siteMapNode url="~/Default.aspx" title="Home" description="Home">
      <siteMapNode title="Basic Reporting"
        url="~/BasicReporting/Default.aspx"
        description="Basic Reporting Samples">
        <siteMapNode url="~/BasicReporting/SimpleDisplay.aspx"
         title="Simple Display"
         description="Displays the complete contents
          of a database table." />
        <siteMapNode url="~/BasicReporting/DeclarativeParams.aspx"
          title="Declarative Parameters"
          description="Displays a subset of the contents
            of a database table using parameters." />
        <siteMapNode url="~/BasicReporting/ProgrammaticParams.aspx"
         title="Setting Parameter Values"
         description="Shows how to set parameter values
          programmatically." />
      </siteMapNode>

      <siteMapNode title="Filtering Reports"
       url="~/Filtering/Default.aspx"
       description="Samples of Reports that Support Filtering">
        <siteMapNode url="~/Filtering/FilterByDropDownList.aspx"
          title="Filter by Drop-Down List"
          description="Filter results using a drop-down list." />
        <siteMapNode url="~/Filtering/MasterDetailsDetails.aspx"
         title="Master-Details-Details"
         description="Filter results two levels down." />
        <siteMapNode url="~/Filtering/DetailsBySelecting.aspx"
          title="Details of Selected Row"
          description="Show detail results for a selected item in a GridView." />
      </siteMapNode>

      <siteMapNode title="Customized Formatting"
         url="~/CustomFormatting/Default.aspx"
         description="Samples of Reports Whose Formats are Customized">
        <siteMapNode url="~/CustomFormatting/CustomColors.aspx"
         title="Format Colors"
         description="Format the grid s colors based
           on the underlying data." />
        <siteMapNode
          url="~/CustomFormatting/GridViewTemplateField.aspx"
          title="Custom Content in a GridView"
          description="Shows using the TemplateField to
          customize the contents of a field in a GridView." />
        <siteMapNode
          url="~/CustomFormatting/DetailsViewTemplateField.aspx"
          title="Custom Content in a DetailsView"
          description="Shows using the TemplateField to customize
           the contents of a field in a DetailsView." />
        <siteMapNode url="~/CustomFormatting/FormView.aspx"
          title="Custom Content in a FormView"
          description="Illustrates using a FormView for a
           highly customized view." />
        <siteMapNode url="~/CustomFormatting/SummaryDataInFooter.aspx"
          title="Summary Data in Footer"
          description="Display summary data in the grids footer." />
      </siteMapNode>

  </siteMapNode>

</siteMap>

A webhelytérkép határozza meg a webhely navigációs struktúráját, amely a webhely különböző szakaszait leíró hierarchia. Az egyes <siteMapNode> elemek Web.sitemap a webhely navigációs szerkezetének egy szakaszát jelölik.

A helytérkép hierarchikus navigációs struktúrát jelöl

10. ábra: A helytérkép hierarchikus navigációs struktúrát jelöl (kattintson ide a teljes méretű kép megtekintéséhez)

ASP.NET a webhelytérkép struktúráját a .NET-keretrendszer SiteMap osztályán keresztül teszi elérhetővé. Ennek az osztálynak van egy CurrentNode tulajdonsága, amely információkat ad vissza arról a szakaszról, amelyet a felhasználó éppen meglátogat; a RootNode tulajdonság a webhelytérkép gyökerét adja vissza (Kezdőlap, webhelytérképünkön). Mind a CurrentNode és RootNode tulajdonságok SiteMapNode-példányokat adnak vissza, amelyek olyan tulajdonságokkal rendelkeznek, mint ParentNode, ChildNodes, NextSibling, PreviousSibling és így tovább, amelyek lehetővé teszik a webhely térképének hierarchiájának bejárását.

3. lépés: Menü megjelenítése a webhelytérkép alapján

A ASP.NET 2.0-s verziójában az adatokhoz való hozzáférés programozott módon, például az 1.x ASP.NET vagy deklaratív módon is elvégezhető az új adatforrás-vezérlőkkel. Számos beépített adatforrás-vezérlő létezik, például az SqlDataSource vezérlő, a relációs adatbázis adatainak elérésére, az ObjectDataSource vezérlőre, az osztályokból származó adatok elérésére és másokra. Saját egyéni adatforrás-vezérlőket is létrehozhat.

Az adatforrás-vezérlők proxyként szolgálnak a ASP.NET lap és a mögöttes adatok között. Az adatforrás-vezérlő lekért adatainak megjelenítéséhez általában egy másik webvezérlőt adunk hozzá a laphoz, és az adatforrás-vezérlőhöz kötjük. Ha egy webvezérlőt egy adatforrás-vezérlőhöz szeretne kötni, egyszerűen állítsa a webvezérlő tulajdonságát DataSourceID az adatforrás-vezérlő tulajdonságának értékére ID .

A webhelytérkép adatainak használatához ASP.NET tartalmazza a SiteMapDataSource vezérlőt, amely lehetővé teszi, hogy webvezérlőt kössünk a webhely webhelytérképéhez. A TreeView és a menü két webvezérlővel rendelkezik, amelyek általában navigációs felhasználói felületet biztosítanak. Ha a webhelytérkép adatait a két vezérlő egyikéhez szeretné kötni, egyszerűen adjon hozzá egy SiteMapDataSource-t a laphoz egy TreeView- vagy menüvezérlővel együtt, amelynek DataSourceID a tulajdonsága ennek megfelelően van beállítva. Hozzáadhatunk például egy menüvezérlőt a mesterlaphoz az alábbi korrektúra használatával:

<div id="navigation">
    <asp:Menu ID="Menu1" runat="server"
      DataSourceID="SiteMapDataSource1">
    </asp:Menu>

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

A kibocsátott HTML finomabb szabályozásához a SiteMapDataSource vezérlőt az Repeater vezérlőhöz köthetjük, például:

<div id="navigation">
    <ul>
        <li><asp:HyperLink runat="server" ID="lnkHome"
         NavigateUrl="~/Default.aspx">Home</asp:HyperLink></li>

        <asp:Repeater runat="server" ID="menu"
          DataSourceID="SiteMapDataSource1">
            <ItemTemplate>
                <li>
                    <asp:HyperLink runat="server"
                    NavigateUrl='<%# Eval("Url") %>'>
                    <%# Eval("Title") %></asp:HyperLink>
                </li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>

    <asp:SiteMapDataSource ID="SiteMapDataSource1"
      runat="server" ShowStartingNode="false" />
</div>

A SiteMapDataSource vezérlő egyszerre egy szinten adja vissza a webhelytérkép hierarchiáját, kezdve a gyökérwebhely-leképezési csomóponttal (Kezdőlap, webhelytérképünk), majd a következő szinttel (alapszintű jelentéskészítés, szűrési jelentések és testreszabott formázás) és így tovább. Amikor a SiteMapDataSource-t ismétlőhöz köti, felsorolja a visszaadott első szintet, és példányosítja az ItemTemplate-t az adott első szinten lévő minden egyes SiteMapNode példány számára. A SiteMapNode egy adott tulajdonságának eléréséhez a Eval(propertyName)-t használhatjuk, amivel megszerezhetjük a HyperLink-vezérlő egyes SiteMapNode tulajdonságait, például a Url és Title tulajdonságokat.

A fent látható Repeater-példa a következő jelölőnyelvet jeleníti meg:

<li>
    <a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a>
</li>

<li>
    <a href="/Code/Filtering/Default.aspx">Filtering Reports</a>
</li>

<li>
    <a href="/Code/CustomFormatting/Default.aspx">
     Customized Formatting</a>
</li>

Ezek a webhelyleképezési csomópontok (alapszintű jelentéskészítés, szűrési jelentések és testreszabott formázás) a renderelt helytérkép második szintjét alkotják, nem az elsőt. Ennek az az oka, hogy a SiteMapDataSource ShowStartingNode tulajdonsága Hamis értékre van állítva, ezért a SiteMapDataSource megkerüli a gyökérwebhely-leképezési csomópontot, és ehelyett a helytérkép-hierarchia második szintjét adja vissza.

Ha meg szeretné jeleníteni a gyermekeket az alapszintű jelentéskészítéshez, a szűrési jelentésekhez és a testreszabott formázásokhoz SiteMapNode , hozzáadhatunk egy másik ismétlőt a kezdeti ismétlőhöz ItemTemplate. Ez a második ismétlő a SiteMapNode példány ChildNodes tulajdonságához lesz kötve, a következőképpen:

<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1">
    <ItemTemplate>
        <li>
            <asp:HyperLink runat="server"
             NavigateUrl='<%# Eval("Url") %>'>
             <%# Eval("Title") %></asp:HyperLink>

            <asp:Repeater runat="server"
                DataSource='<%# ((SiteMapNode) Container.DataItem).ChildNodes %>'>
                <HeaderTemplate>
                    <ul>
                </HeaderTemplate>

                <ItemTemplate>
                    <li>
                        <asp:HyperLink runat="server"
                         NavigateUrl='<%# Eval("Url") %>'>
                         <%# Eval("Title") %></asp:HyperLink>
                    </li>
                </ItemTemplate>

                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>
        </li>
    </ItemTemplate>
</asp:Repeater>

Ez a két ismétlő a következő jelölést hozza létre (néhány jelölés el lett távolítva a rövidítés érdekében):

<li>
    <a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a>
    <ul>
       <li>
          <a href="/Code/BasicReporting/SimpleDisplay.aspx">
            Simple Display</a>
       </li>
       <li>
          <a href="/Code/BasicReporting/DeclarativeParams.aspx">
            Declarative Parameters</a>
       </li>
       <li>
          <a href="/Code/BasicReporting/ProgrammaticParams.aspx">
            Setting Parameter Values</a>
       </li>
    </ul>
</li>

<li>
    <a href="/Code/Filtering/Default.aspx">Filtering Reports</a>
    ...
</li>

<li>
    <a href="/Code/CustomFormatting/Default.aspx">
      Customized Formatting</a>
    ...
</li>

Rachel Andrew könyvének, The CSS Anthology: 101 Essential Tips, Tricks, & Hacks választott CSS stílusait használva, a <ul> és <li> elemek úgy vannak kialakítva, hogy a jelölés a következő vizuális kimenetet eredményezze:

Két ismétlőből és néhány CSS-ből álló menü

11. ábra: Két ismétlőből és néhány CSS-ből álló menü

Ez a menü a mesterlapon található, és a megadott Web.sitemapwebhelytérképhez van kötve, ami azt jelenti, hogy a webhelytérkép módosítása azonnal megjelenik a Site.master mesterlapot használó összes lapon.

A ViewState letiltása

Az ASP.NET vezérlők opcionálisan megőrizhetik az állapotukat a nézetállapotban, amely a renderelt HTML rejtett űrlapmezőjeként van szerializálva. A nézetállapotot a vezérlők arra használják, hogy megjegyezzék programozott módon módosított állapotukat a postbackek között, például az adatvezérlő webes vezérlőelemhez kötött adatok esetében. Bár a megtekintési állapot lehetővé teszi, hogy az adatok megjegyezhetők legyenek a postbackek között, növeli az ügyfélnek küldendő korrektúra méretét, és súlyos lapblobhoz vezethet, ha nem figyeli szorosan. Az adat-webes vezérlők, különösen a GridView különösen hírhedtek, ha több tucat extra kilobájtnyi korrektúrát adnak hozzá egy laphoz. Bár ez a növekedés a szélessávú vagy intranetes felhasználók számára elhanyagolható lehet, a megtekintési állapot néhány másodpercet adhat hozzá a betárcsázós felhasználók körútjára.

A megtekintési állapot hatásának megtekintéséhez látogasson el egy böngészőlapra, majd tekintse meg a weblap által küldött forrást (az Internet Explorerben nyissa meg a Nézet menüt, és válassza a Forrás lehetőséget). A lapkövetés bekapcsolásával megtekintheti a lap egyes vezérlői által használt nézetállapot-lefoglalást. A nézetállapot adatai egy rejtett űrlapmezőben __VIEWSTATEvannak szerializálva, amely közvetlenül a nyitó <div> címke után található egy <form> elemben. A megtekintési állapot csak webes űrlap használata esetén marad meg; ha a ASP.NET lap nem tartalmaz deklaratív <form runat="server"> szintaxist, a renderelt korrektúra nem tartalmaz __VIEWSTATE rejtett űrlapmezőt.

A __VIEWSTATE mesterlap által létrehozott űrlapmező nagyjából 1800 bájtot ad hozzá a lap létrehozott korrektúrájához. Ez az extra bloat elsősorban az Repeater vezérlőnek köszönhető, mivel a SiteMapDataSource vezérlő tartalma megmarad az állapot megtekintéséhez. Bár a plusz 1800 bájt nem tűnik jelentősnek, amikor egy GridView-t használunk sok mezővel és rekorddal, a nézet állapota könnyen megduzzadhat tízszeresére vagy még többre.

A nézet állapota le lehet tiltani a lap vagy a vezérlőelem szintjén a EnableViewState tulajdonság falsebeállításával, ezáltal csökkentve a renderelt korrektúra méretét. Mivel az adat-web vezérlő nézetállapota az utólagos kérések során megőrzi az adat-web vezérlőhöz kötött adatokat, az adat-web vezérlő nézetállapotának letiltásakor az adatokat minden egyes utólagos kérésnél újra kell kötni. ASP.NET 1.x-es verziójában ez a felelősség az oldal fejlesztőjének vállára esett; az ASP.NET 2.0-s verzió esetén azonban az adatvezérlők szükség esetén újrakötődnek az adatforrás-vezérlőjükhöz minden postback során.

A lap nézetállapotának csökkentéséhez állítsa az Repeater vezérlő tulajdonságát EnableViewState a következőre false: . Ez a Tervező Tulajdonságok ablakán keresztül vagy a Forrás nézetben deklaratív módon is elvégezhető. A módosítás elvégzése után az Ismétlő deklaratív jelölése a következőképpen fog kinézni:

<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1"
    EnableViewState="False">
    <ItemTemplate>
        ... <i>ItemTemplate contents omitted for brevity</i> ...
    </ItemTemplate>
</asp:Repeater>

A módosítás után a lap renderelt nézetállapotának mérete 52 bájtra zsugorodott, ami 97% megtakarítást eredményez a nézetállapot méretében! Az ebben a sorozatban ismertetett oktatóanyagokban alapértelmezés szerint letiltjuk az adat-webvezérlők nézetállapotát a renderelt korrektúra méretének csökkentése érdekében. A példák többségében a EnableViewState tulajdonságot false-re állítják be említés nélkül. Az időnézet állapotáról csak olyan helyzetekben lesz szó, ahol engedélyezni kell, hogy az adat-webvezérlő biztosítsa a várt funkciókat.

4. lépés: A Breadcrumb Navigáció hozzáadása

A mesterlap befejezéséhez adjunk hozzá egy kenyérmorzsa navigációs felületet az egyes lapokhoz. A morzsamenü gyorsan megmutatja a felhasználóknak az aktuális pozíciójukat a webhely hierarchiájában. Az ASP.NET 2.0-ban egy morzsamenü hozzáadása egyszerű, csak adjon hozzá egy SiteMapPath-vezérlőt az oldalhoz; nincs szükség kódra.

Webhelyünk esetében adja hozzá ezt a vezérlőt a fejléchez <div>:

<span class="breadcrumb">
    <asp:SiteMapPath ID="SiteMapPath1" runat="server">
    </asp:SiteMapPath>
</span>

A kenyérmorzsa a webhelytérkép hierarchiájában megjeleníti a felhasználó által meglátogatott aktuális oldalt, valamint a webhelytérkép csomópont "elődeit," egészen a gyökeréig, akár a Kezdőlapig a webhelytérképen.

A Breadcrumb megjeleníti az aktuális lapot és elődeit a webhelytérkép-hierarchiában

12. ábra: A Breadcrumb megjeleníti az aktuális lapot és elődeit a webhelytérkép-hierarchiában

5. lépés: Az alapértelmezett lap hozzáadása az egyes szakaszokhoz

A webhelyünkön található oktatóanyagok különböző kategóriákra vannak bontva: Alapszintű jelentéskészítés, szűrés, egyéni formázás és így tovább, minden kategóriához külön mappával és a hozzá tartozó oktatóanyagokkal, melyek ASP.NET oldalakon találhatók a mappákban. Emellett minden mappa tartalmaz egy Default.aspx lapot. Ebben az alapértelmezett lapon jelenítse meg az aktuális szakasz összes oktatóanyagát. Ezért a Default.aspx mappában lévő BasicReporting esetében lennének hivatkozások a SimpleDisplay.aspx, DeclarativeParams.aspx és ProgrammaticParams.aspx elemekre. Itt ismét használhatjuk az osztályt és egy SiteMap adatwebhely-vezérlőt, hogy ezeket az információkat a megadott webhelytérkép Web.sitemapalapján jelenítsük meg.

Jelenítsünk meg egy rendezetlen listát ismét egy Repeater használatával, de ezúttal az oktatóanyagok címét és leírását fogjuk megjeleníteni. Mivel az ehhez szükséges korrektúrát és kódot minden Default.aspx oldalon meg kell ismételni, ezt a felhasználói felületi logikát beágyazhatjuk egy felhasználói vezérlőbe. Hozzon létre egy mappát a hívott UserControls webhelyen, és adjon hozzá egy új, webfelhasználói vezérlő nevű SectionLevelTutorialListing.ascxelemet, és adja hozzá a következő korrektúrát:

Új webfelhasználó-vezérlő hozzáadása a UserControls mappához

13. ábra: Új webfelhasználói vezérlő hozzáadása a UserControls mappához (ide kattintva megtekintheti a teljes méretű képet)

SectionLevelTutorialListing.ascx

<%@ Control Language="CS" AutoEventWireup="true"
    CodeFile="SectionLevelTutorialListing.ascx.cs"
    Inherits="UserControls_SectionLevelTutorialListing" %>
<asp:Repeater ID="TutorialList" runat="server" EnableViewState="False">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate>
        <li><asp:HyperLink runat="server"
         NavigateUrl='<%# Eval("Url") %>'
         Text='<%# Eval("Title") %>'></asp:HyperLink>
                - <%# Eval("Description") %></li>
    </ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</asp:Repeater>

SectionLevelTutorialListing.ascx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class UserControls_SectionLevelTutorialListing : UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // If SiteMap.CurrentNode is not null,
        // bind CurrentNode ChildNodes to the GridView
        if (SiteMap.CurrentNode != null)
        {
            TutorialList.DataSource = SiteMap.CurrentNode.ChildNodes;
            TutorialList.DataBind();
        }
    }
}

Az előző Repeater-példában deklaratív módon kötöttük az SiteMap adatokat az Ismétlőhöz, a SectionLevelTutorialListing Felhasználói vezérlő azonban programozott módon teszi ezt. Page_Load Az eseménykezelőben ellenőrizni kell, hogy az oldal URL-címe megfelel-e a webhelytérkép egyik csomópontjának. Ha ezt a felhasználói vezérlőt olyan lapon használják, amely nem rendelkezik megfelelő <siteMapNode> bejegyzéssel, a rendszer visszaadja SiteMap.CurrentNode-t, és nem köti az adatokat a Repeaterhez. Feltéve, hogy van egy CurrentNode, annak ChildNodes gyűjteményét a Repeaterhez kötjük. Mivel a webhelytérkép úgy van beállítva, hogy az Default.aspx egyes szakaszok lapja az adott szakasz összes oktatóanyagának szülőcsomópontja, ez a kód a szakasz összes oktatóanyagára mutató hivatkozásokat és leírásokat jeleníti meg, ahogyan az az alábbi képernyőképen látható.

A Repeater létrehozása után nyissa meg az Default.aspx egyes mappák lapjait, lépjen a Tervező nézetre, és egyszerűen húzza a Felhasználói vezérlőt a Megoldáskezelőből a Tervező felületre, ahol meg szeretné jeleníteni az oktatóanyag-listát.

A felhasználói vezérlő hozzá lett adva a Default.aspx fájlhoz

14. ábra: A felhasználói vezérlő hozzá lett adva Default.aspx (kattintson ide a teljes méretű kép megtekintéséhez)

Az alapszintű jelentéskészítési oktatóanyagok listája

15. ábra: Az alapszintű jelentéskészítési oktatóanyagok listája (kattintson ide a teljes méretű kép megtekintéséhez)

Összefoglalás

A webhelytérkép definiálása és a mesterlap elkészülte után mostantól konzisztens lapelrendezéssel és navigációs sémával rendelkezünk az adatokkal kapcsolatos oktatóanyagainkhoz. Függetlenül attól, hogy hány lapot adunk hozzá a webhelyhez, a webhelyszintű lapelrendezés vagy a webhelynavigációs információk frissítése gyors és egyszerű folyamat, mivel ezek az információk központosítva lesznek. A lapelrendezés információi a mesterlapon Site.master és a helytérképen találhatók.Web.sitemap Nem kellett kódot írnunk a webhely egészére kiterjedő oldalelrendezéshez és navigációs mechanizmushoz, és a Visual Studióban továbbra is teljes körű WYSIWYG-tervezői támogatást biztosítunk.

Miután elvégezte az adatelérési réteget és az üzleti logikai réteget, és konzisztens lapelrendezést és webhely-navigációt definiált, készen állunk a gyakori jelentési minták feltárására. A következő három oktatóanyagban az alapszintű jelentéskészítési feladatokat tekintjük meg, amelyek a BLL-ből lekért adatokat jelenítik meg a GridView, a DetailsView és a FormView vezérlőkben.

Boldog programozást!

További olvasás

Az oktatóanyagban tárgyalt témakörökről az alábbi forrásokban talál további információt:

Tudnivalók a szerzőről

Scott Mitchell, hét ASP/ASP.NET-könyv szerzője és a 4GuysFromRolla.com alapítója, 1998 óta dolgozik a Microsoft webtechnológiáival. Scott független tanácsadóként, edzőként és íróként dolgozik. Legújabb könyve Sams Tanuld meg ASP.NET 2.0 24 óra alatt. Ő itt elérhető mitchell@4GuysFromRolla.com.

Külön köszönet

Ezt az oktatóanyag-sorozatot sok hasznos véleményező áttekintette. Az oktatóanyag vezető véleményezői Liz Shulok, Dennis Patterson és Hilton Giesenow voltak. Szeretné áttekinteni a közelgő MSDN-cikkeimet? Ha igen, írj egy sort a mitchell@4GuysFromRolla.com-ra.

ElőzőKövetkező

  • Last updated on