Ana Sayfalar ve Site Gezintisi (VB)Master Pages and Site Navigation (VB)

Scott Mitchell tarafındanby Scott Mitchell

Örnek uygulamayı indirin veya PDF 'yi indirinDownload Sample App or Download PDF

Kullanıcı dostu web sitelerinin yaygın bir özelliği, tutarlı, site genelinde sayfa düzeni ve gezinti şemasına sahip olmadıklarından oluşur.One common characteristic of user-friendly websites is that they have a consistent, site-wide page layout and navigation scheme. Bu öğreticide, kolayca güncelleştirilebilen tüm sayfalarda tutarlı bir görünüm oluşturma konusu ele alınabilir.This tutorial looks at how you can create a consistent look and feel across all pages that can easily be updated.

GirişIntroduction

Kullanıcı dostu web sitelerinin yaygın bir özelliği, tutarlı, site genelinde sayfa düzeni ve gezinti şemasına sahip olmadıklarından oluşur.One common characteristic of user-friendly websites is that they have a consistent, site-wide page layout and navigation scheme. ASP.NET 2,0, hem site genelinde sayfa düzeni hem de gezinti şeması uygulamayı büyük ölçüde kolaylaştıran iki yeni özellik sunar: Ana sayfalar ve site gezintisi.ASP.NET 2.0 introduces two new features that greatly simplify implementing both a site-wide page layout and navigation scheme: master pages and site navigation. Ana sayfalar, geliştiricilerin belirlenen düzenlenebilir bölgelerle site genelinde bir şablon oluşturmalarına olanak tanır.Master pages allow for developers to create a site-wide template with designated editable regions. Bu şablon daha sonra sitedeki ASP.NET sayfalara uygulanabilir.This template can then be applied to ASP.NET pages in the site. Bu ASP.NET sayfaların yalnızca ana sayfanın belirtilen düzenlenebilir bölgeleri için içerik sağlaması gerekir ana sayfadaki diğer tüm biçimlendirmeler ana sayfayı kullanan tüm ASP.NET sayfalarında aynıdır.Such ASP.NET pages need only provide content for the master page's specified editable regions all other markup in the master page is identical across all ASP.NET pages that use the master page. Bu model, geliştiricilerin site genelinde sayfa düzeni tanımlamasına ve merkezileştirmesine olanak tanır ve böylece kolayca güncelleştirilebilecek tüm sayfalarda tutarlı bir görünüm oluşturmayı kolaylaştırır.This model allows developers to define and centralize a site-wide page layout, thereby making it easier to create a consistent look and feel across all pages that can easily be updated.

Site gezinti sistemi , sayfa geliştiricileri için bir site haritası ve bu site haritası için program aracılığıyla SORGULANACAK bir API 'yi tanımlama mekanizması sağlar.The site navigation system provides both a mechanism for page developers to define a site map and an API for that site map to be programmatically queried. Yeni gezinti Web denetimi, TreeView ve IBU menü, site haritasının tümünü veya bir kısmını ortak bir gezinti kullanıcı arabirimi öğesinde işlemeyi kolaylaştırır.The new navigation Web controls the Menu, TreeView, and SiteMapPath make it easy to render all or part of the site map in a common navigation user interface element. Varsayılan site gezinti sağlayıcısını kullanacağız. Bu, site haritamız XML biçimli bir dosyada tanımlanacaktır.We'll be using the default site navigation provider, meaning that our site map will be defined in an XML-formatted file.

Bu kavramları göstermek ve Öğreticiler Web sitemizi daha kullanışlı hale getirmek için, bu dersi site genelinde sayfa düzeni tanımlama, bir site haritası uygulama ve gezinti kullanıcı arabirimini ekleme gibi bir adım harcaalım.To illustrate these concepts and make our tutorials website more usable, let's spend this lesson defining a site-wide page layout, implementing a site map, and adding the navigation UI. Bu öğreticinin sonuna kadar öğretici web sayfalarımızı oluşturmak için şık bir Web sitesi tasarlayacağız.By the end of this tutorial we'll have a polished website design for building our tutorial web pages.

Bu öğreticinin nihai sonucunu The End Result of This Tutorial

Şekil 1: Bu öğreticinin nihai sonucu (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 1: The End Result of This Tutorial (Click to view full-size image)

1. Adım: Ana sayfayı oluşturmaStep 1: Creating the Master Page

İlk adım, site için ana sayfayı oluşturmaktır.The first step is to create the master page for the site. Şu anda web sitemizden yalnızca yazılan veri kümesi (Northwind.xsd, App_Code klasörü), BLL sınıfları (ProductsBLL.vb, CategoriesBLL.vb, vb.), veritabanı (App_Code klasöründe), yapılandırma dosyası (NORTHWND.MDF) ve bir CSS stil sayfası dosyası (App_Data) oluşur.Web.config``Styles.cssRight now our website consists of only the Typed DataSet (Northwind.xsd, in the App_Code folder), the BLL classes (ProductsBLL.vb, CategoriesBLL.vb, and so on, all in the App_Code folder), the database (NORTHWND.MDF, in the App_Data folder), the configuration file (Web.config), and a CSS stylesheet file (Styles.css). Bu örnekleri gelecekteki öğreticilerde daha ayrıntılı bir şekilde incelenebilmemiz için ilk iki öğreticiden DAL ve BLL 'yi kullanarak bu sayfaları ve dosyaları temizlerdim.I cleaned out those pages and files demonstrating using the DAL and BLL from the first two tutorials since we will be reexamining those examples in greater detail in future tutorials.

Projemizdeki dosyalar

Şekil 2: projemizdeki dosyalarFigure 2: The Files in Our Project

Ana sayfa oluşturmak için Çözüm Gezgini proje adına sağ tıklayın ve yeni öğe Ekle ' yi seçin.To create a master page, right-click on the project name in the Solution Explorer and choose Add New Item. Ardından, şablon listesinden ana sayfa türünü seçin ve Site.masteradlandırın.Then select the Master Page type from the list of templates and name it Site.master.

Web sitesine yeni ana sayfa eklemek Add a New Master Page to the Website

Şekil 3: Web sitesine yeni bir ana sayfa ekleme (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 3: Add a New Master Page to the Website (Click to view full-size image)

Site genelinde sayfa mizanpajını ana sayfada tanımlayın.Define the site-wide page layout here in the master page. Tasarım görünümü kullanabilir ve gereken düzen veya Web denetimlerini ekleyebilir ya da biçimlendirmeyi el ile kaynak görünümüne ekleyebilirsiniz.You can use the Design view and add whatever Layout or Web controls you need, or you can manually add the markup by hand in the Source view. Ana sayfamda, dış dosya Style.csstanımlı CSS ayarlarıyla konumlandırma ve stiller için geçişli stil sayfaları kullanıyorum.In my master page I use cascading style sheets for positioning and styles with the CSS settings defined in the external file Style.css. Aşağıda gösterilen biçimlendirmeden söylemeirken, CSS kuralları, gezinti <div>içeriğinin solunda görünecek şekilde mutlak olarak konumlandırılması ve 200 piksel sabit genişliğine sahip olması gibi tanımlanır.While you cannot tell from the markup shown below, the CSS rules are defined such that the navigation <div>'s content is absolutely positioned so that it appears on the left and has a fixed width of 200 pixels.

Site. MasterSite.master

<%@ Master Language="VB" AutoEventWireup="true"
    CodeFile="Site.master.vb" 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>

Ana sayfa, hem statik sayfa mizanpajını hem de ana sayfayı kullanan ASP.NET sayfaları tarafından düzenlenebilecek bölgeleri tanımlar.A master page defines both the static page layout and the regions that can be edited by the ASP.NET pages that use the master page. Bu içerik düzenlenebilir bölgeler, içerik <div>içinde görünebilen ContentPlaceHolder denetimiyle belirtilir.These content editable regions are indicated by the ContentPlaceHolder control, which can be seen within the content <div>. Ana sayfamız tek bir ContentPlaceHolder (MainContent) içeriyor, ancak ana sayfanın birden çok Contentbir yer tutucu olabilir.Our master page has a single ContentPlaceHolder (MainContent), but master page's may have multiple ContentPlaceHolders.

Yukarıda girilen biçimlendirme ile, Tasarım görünümü geçiş ana sayfanın yerleşimini gösterir.With the markup entered above, switching to the Design view shows the master page's layout. Bu ana sayfayı kullanan tüm ASP.NET sayfaları, MainContent bölgenin işaretlemesini belirtmek için bu Tekdüzen düzenine sahip olacaktır.Any ASP.NET pages that use this master page will have this uniform layout, with the ability to specify the markup for the MainContent region.

Tasarım görünümü Ile görüntülenirken ana sayfayı The Master Page, When Viewed Through the Design View

Şekil 4: Ana sayfa, Tasarım görünümü ile görüntülenirken (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 4: The Master Page, When Viewed Through the Design View (Click to view full-size image)

2. Adım: Web sitesine bir giriş sayfası eklemeStep 2: Adding a Homepage to the Website

Ana sayfa tanımlı olarak, Web sitesi için ASP.NET sayfalarını eklemeye hazırız.With the master page defined, we're ready to add the ASP.NET pages for the website. Şimdi Web sitesinin giriş sayfasına Default.aspxekleyerek başlayalım.Let's start by adding Default.aspx, our website's homepage. Çözüm Gezgini proje adına sağ tıklayın ve yeni öğe Ekle ' yi seçin.Right-click on the project name in the Solution Explorer and choose Add New Item. Şablon listesinden Web formu seçeneğini belirleyin ve dosyayı Default.aspxolarak adlandırın.Pick the Web Form option from the template list and name the file Default.aspx. Ayrıca "Ana sayfa seç" onay kutusunu işaretleyin.Also, check the "Select master page" checkbox.

Yeni bir Web formu eklemek ana sayfa seç onay kutusunu IşaretleyerekAdd a New Web Form, Checking the Select master page Checkbox

Şekil 5: yeni bir Web formu ekleme, ana sayfa seç onay kutusu (tam boyutlu görüntüyü görüntülemek için tıklatın)Figure 5: Add a New Web Form, Checking the Select master page Checkbox (Click to view full-size image)

Tamam düğmesine tıkladıktan sonra bu yeni ASP.NET sayfasının kullanması gereken ana sayfayı seçmeniz istenir.After clicking the OK button, we're asked to choose what master page this new ASP.NET page should use. Projenizde birden çok ana sayfanız olabilir, ancak yalnızca bir tane var.While you can have multiple master pages in your project, we have only one.

bu ASP.NET sayfasının kullanması gereken ana sayfayı seçinChoose the Master Page this ASP.NET Page Should Use

Şekil 6: Bu ASP.net sayfasının kullanması gereken ana sayfayı seçin (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 6: Choose the Master Page this ASP.NET Page Should Use (Click to view full-size image)

Ana sayfa seçildikten sonra, yeni ASP.NET sayfaları aşağıdaki biçimlendirmeyi içerir:After picking the master page, the new ASP.NET pages will contain the following markup:

Default. aspxDefault.aspx

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

@Page yönergesinde, kullanılan ana sayfa dosyasına bir başvuru vardır (MasterPageFile="~/Site.master") ve ASP.NET sayfası biçimlendirmesi, ana sayfada tanımlanan ContentPlaceHolder denetimlerinin her biri için bir Içerik denetimi içerir ve bu denetimin Içerik denetimini belirli bir ContentPlaceHolder ile eşlemesiyle ContentPlaceHolderID.In the @Page directive there's a reference to the master page file used (MasterPageFile="~/Site.master"), and the ASP.NET page's markup contains a Content control for each of the ContentPlaceHolder controls defined in the master page, with the control's ContentPlaceHolderID mapping the Content control to a specific ContentPlaceHolder. Içerik denetimi, ilgili ContentPlaceHolder 'da görünmesini istediğiniz biçimlendirmeyi yerleştirdiğiniz yerdir.The Content control is where you place the markup you want to appear in the corresponding ContentPlaceHolder. @Page yönergesinin Title özniteliğini Home olarak ayarlayın ve Içerik denetimine bir miktar kaynaklı içerik ekleyin:Set the @Page directive's Title attribute to Home and add some welcoming content to the Content control:

Default. aspxDefault.aspx

<%@ Page Language="VB" MasterPageFile="~/Site.master"
    AutoEventWireup="true" CodeFile="Default.aspx.vb"
    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>

@Page yönergesindeki Title özniteliği, <title> öğesi ana sayfada tanımlansa bile sayfanın başlığını ASP.NET sayfasından ayarlayamamızı sağlar.The Title attribute in the @Page directive allows us to set the page's title from the ASP.NET page, even though the <title> element is defined in the master page. Ayrıca, Page.Titlekullanarak başlığı programlı bir şekilde ayarlayabiliriz.We can also set the title programmatically, using Page.Title. Ayrıca, ana sayfanın stil sayfaları (örneğin, Style.css) başvuruları, ASP.NET sayfasının ana sayfaya göreli olduğu dizinden bağımsız olarak, herhangi bir ASP.NET sayfasında çalışacak şekilde otomatik olarak güncelleştirildiğini unutmayın.Also note that the master page's references to stylesheets (such as Style.css) are automatically updated so that they work in any ASP.NET page, regardless of what directory the ASP.NET page is in relative to the master page.

Tasarım görünümü geçiş yaparken sayfamızın bir tarayıcıda nasıl görüneceğini görebiliriz.Switching to the Design view we can see how our page will look in a browser. ASP.NET sayfası için Tasarım görünümü, yalnızca içerik düzenlenebilir bölgelerin düzenlenebilir olduğunu, ana sayfada tanımlanan ContentPlaceHolder olmayan biçimlendirmenin gri olduğunu unutmayın.Note that in the Design view for the ASP.NET page that only the content editable regions are editable the non-ContentPlaceHolder markup defined in the master page is grayed out.

ASP.NET sayfasına ilişkin tasarım görünümünde hem düzenlenebilir hem de Düzenlenemeyen bölgeler gösterilirThe Design View for the ASP.NET Page Shows Both the Editable and Non-Editable Regions

Şekil 7: ASP.NET sayfası Için tasarım görünümü hem düzenlenebilir hem de düzenlenemeyen bölgeleri gösterir (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 7: The Design View for the ASP.NET Page Shows Both the Editable and Non-Editable Regions (Click to view full-size image)

Default.aspx sayfası bir tarayıcı tarafından ziyaret edildiğinde, ASP.NET altyapısı sayfanın ana sayfa içeriğini ve ASP 'yi otomatik olarak birleştirir. NET 'in içeriği ve birleştirilmiş içeriği, istenen tarayıcıya gönderilen son HTML ile işler.When the Default.aspx page is visited by a browser, the ASP.NET engine automatically merges the page's master page content and the ASP.NET's content, and renders the merged content into the final HTML that is sent down to the requesting browser. Ana sayfanın içeriği güncelleştirilirken, bu ana sayfayı kullanan tüm ASP.NET sayfalarının içeriği bir sonraki istendiklerinde yeni ana sayfa içeriğiyle yeniden birleştirilmesi gerekir.When the master page's content is updated, all ASP.NET pages that use this master page will have their content remerged with the new master page content the next time they are requested. Kısacası, ana sayfa modeli, değişiklikleri tüm sitede hemen yansıtılan tek sayfalı bir düzen şablonunun (Ana sayfa) tanımlanmasını sağlar.In short, the master page model allows for a single page layout template to be defined (the master page) whose changes are immediately reflected across the entire site.

Web sitesine ek ASP.NET sayfaları eklemeAdding Additional ASP.NET Pages to the Website

Daha kısa bir süre içinde, siteye en sonunda çeşitli raporlama tanıtımları tutacak ek ASP.NET sayfa saplamalarının eklenmesi biraz zaman atalım.Let's take a moment to add additional ASP.NET page stubs to the site that will eventually hold the various reporting demos. Toplam olarak 35 ' den fazla tanıtım olacaktır, bu nedenle tüm saplama sayfalarını oluşturmak yerine yalnızca ilk birkaç şey oluşturalım.There will be more than 35 demos in total, so rather than creating all of the stub pages let's just create the first few. Birçok tanıtımlar kategorisi de olacağı için gösterileri daha iyi yönetmek için kategoriler için bir klasör ekleyin.Since there will also be many categories of demos, to better manage the demos add a folder for the categories. Şimdilik aşağıdaki üç klasörü ekleyin:Add the following three folders for now:

  • BasicReporting
  • Filtering
  • CustomFormatting

Son olarak, Şekil 8 ' de Çözüm Gezgini gösterildiği gibi yeni dosyalar ekleyin.Finally, add new files as shown in the Solution Explorer in Figure 8. Her dosya eklenirken "Ana sayfa seç" onay kutusunu işaretleyin.When adding each file, remember to check the "Select master page" checkbox.

Aşağıdaki dosyaları ekleyin

Şekil 8: aşağıdaki dosyaları ekleyinFigure 8: Add the Following Files

2. Adım: site haritası oluşturmaStep 2: Creating a Site Map

Birden çok sayfadan oluşan bir Web sitesini yönetme sorunlarından biri, ziyaretçilerin sitede gezinme konusunda basit bir yol sağlamaktır.One of the challenges of managing a website composed of more than a handful of pages is providing a straightforward way for visitors to navigate through the site. İle başlamak için sitenin gezinti yapısı tanımlanmalıdır.To begin with, the site's navigational structure must be defined. Daha sonra, bu yapının menüler veya içerik haritaları gibi gezinilebilir Kullanıcı Arabirimi öğelerine çevrilmesi gerekir.Next, this structure must be translated into navigable user interface elements, such as menus or breadcrumbs. Son olarak, siteye yeni sayfa eklendikçe ve kaldırıldıkça bu bütün işlemin tutulması ve güncelleştirilmesi gerekir.Finally, this whole process needs to be maintained and updated as new pages are added to the site and existing ones removed. ASP.NET 2,0 ' den önce, geliştiriciler sitenin gezinti yapısını oluşturmak, sürdürmek ve gezilebilir Kullanıcı Arabirimi öğelerine çevirmek için kendi kendilerine aittir.Prior to ASP.NET 2.0, developers were on their own for creating the site's navigational structure, maintaining it, and translating it into navigable user interface elements. Ancak, ASP.NET 2,0 ile, geliştiriciler çok esnek yerleşik site gezinti sistemini kullanabilir.With ASP.NET 2.0, however, developers can utilize the very flexible built in site navigation system.

ASP.NET 2,0 site gezinti sistemi, bir geliştiricinin bir site haritası tanımlamasına ve sonra bu bilgilere programlı bir API aracılığıyla erişmelerine yönelik bir yol sağlar.The ASP.NET 2.0 site navigation system provides a means for a developer to define a site map and to then access this information through a programmatic API. ASP.NET, site haritası verilerinin belirli bir şekilde biçimlendirilen bir XML dosyasında depolanmasını bekleyen bir site haritası sağlayıcısıyla birlikte gelir.ASP.NET ships with a site map provider that expects site map data to be stored in an XML file formatted in a particular way. Ancak, site gezinti sistemi sağlayıcı modelinde oluşturulduğundan, site haritası bilgilerini serileştirmek için alternatif yolları desteklemek üzere genişletilebilir.But, since the site navigation system is built on the provider model it can be extended to support alternative ways for serializing the site map information. Jeff Prosise 'ın makalesi, BEKLEDIĞINIZ SQL site eşleme sağlayıcısı , site haritasını bir SQL Server veritabanında depolayan bir site haritası sağlayıcısı oluşturmayı gösterir; başka bir seçenek de dosya sistemi yapısına dayalı bir site haritası sağlayıcısıoluşturmaktır.Jeff Prosise's article, The SQL Site Map Provider You've Been Waiting For shows how to create a site map provider that stores the site map in a SQL Server database; another option is to create a site map provider based on the file system structure.

Bununla birlikte, bu öğretici için ASP.NET 2,0 ile birlikte gelen varsayılan site haritası sağlayıcısını kullanalım.For this tutorial, however, let's use the default site map provider that ships with ASP.NET 2.0. Site haritasını oluşturmak için Çözüm Gezgini proje adına sağ tıklayın, yeni öğe Ekle ' yi seçin ve site haritası seçeneğini belirleyin.To create the site map, simply right-click on the project name in the Solution Explorer, choose Add New Item, and choose the Site Map option. Adı Web.sitemap olarak bırakın ve Ekle düğmesine tıklayın.Leave the name as Web.sitemap and click the Add button.

projenize bir site haritası ekleyinAdd a Site Map to Your Project

Şekil 9: projenize bir site haritası ekleme (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 9: Add a Site Map to Your Project (Click to view full-size image)

Site eşleme dosyası bir XML dosyasıdır.The site map file is an XML file. Visual Studio 'Nun site haritası yapısı için IntelliSense 'i sağladığını unutmayın.Note that Visual Studio provides IntelliSense for the site map structure. Site Haritası dosyası, tam olarak bir <siteMapNode> alt öğesi içermesi gereken kök düğümü olarak <siteMap> düğümüne sahip olmalıdır.The site map file must have the <siteMap> node as its root node, which must contain precisely one <siteMapNode> child element. Bu ilk <siteMapNode> öğesi, daha sonra rastgele sayıda alt öğe <siteMapNode> öğesi içerebilir.That first <siteMapNode> element can then contain an arbitrary number of descendent <siteMapNode> elements.

Dosya sistemi yapısını taklit etmek için site haritasını tanımlayın.Define the site map to mimic the file system structure. Diğer bir deyişle, üç klasörün her biri için bir <siteMapNode> öğesi ve bu klasörlerdeki her bir ASP.NET sayfası için alt <siteMapNode> öğeleri ekleyin, örneğin:That is, add a <siteMapNode> element for each of the three folders, and child <siteMapNode> elements for each of the ASP.NET pages in those folders, like so:

Web. sitemapWeb.sitemap

<?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>

Site Haritası, sitenin çeşitli bölümlerini açıklayan bir hiyerarşi olan Web sitesinin gezinme yapısını tanımlar.The site map defines the website's navigational structure, which is a hierarchy that describes the various sections of the site. Web.sitemap her <siteMapNode> öğesi, sitenin gezinti yapısındaki bir bölümü temsil eder.Each <siteMapNode> element in Web.sitemap represents a section in the site's navigational structure.

Site Haritası hiyerarşik bir gezinti yapısını temsil The Site Map Represents a Hierarchical Navigational Structure

Şekil 10: site haritası hiyerarşik bir gezinti yapısını temsil eder (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 10: The Site Map Represents a Hierarchical Navigational Structure (Click to view full-size image)

ASP.NET, .NET Framework SiteMap sınıfıaracılığıyla site haritasının yapısını gösterir.ASP.NET exposes the site map's structure through the .NET Framework's SiteMap class. Bu sınıf, kullanıcının şu anda ziyaret ettiği bölüm hakkında bilgi döndüren bir CurrentNode özelliğine sahiptir; RootNode özelliği, site haritasının kökünü döndürür (ana, site haritamızda).This class has a CurrentNode property, which returns information about the section the user is currently visiting; the RootNode property returns the root of the site map (Home, in our site map). Hem CurrentNode hem de RootNode özellikleri, site haritası hiyerarşisinin eklenmesine izin veren ParentNode, ChildNodes, NextSibling, PreviousSibling, vb. gibi özelliklere sahip SiteMapNode örnekleri döndürür.Both the CurrentNode and RootNode properties return SiteMapNode instances, which have properties like ParentNode, ChildNodes, NextSibling, PreviousSibling, and so on, that allow for the site map hierarchy to be walked.

3. Adım: site haritasını temel alan bir menü görüntülemeStep 3: Displaying a Menu Based on the Site Map

ASP.NET 2,0 ' deki verilere erişim, yeni veri kaynağı denetimleriaracılığıyla ASP.NET 1. x veya bildirimli olarak, programlı bir şekilde gerçekleştirilebilir.Accessing data in ASP.NET 2.0 can be accomplished programmatically, like in ASP.NET 1.x, or declaratively, through the new data source controls. İlişkisel veritabanı verilerine erişim, ObjectDataSource denetimi, sınıflardan verilere erişim için ve diğer bir deyişle, SqlDataSource denetimi gibi çeşitli yerleşik veri kaynağı denetimleri vardır.There are several built-in data source controls such as the SqlDataSource control, for accessing relational database data, the ObjectDataSource control, for accessing data from classes, and others. Kendi özel veri kaynağı denetimlerinizibile oluşturabilirsiniz.You can even create your own custom data source controls.

Veri kaynağı denetimleri, ASP.NET sayfanız ile temel alınan veriler arasında bir ara sunucu olarak görev yapar.The data source controls serve as a proxy between your ASP.NET page and the underlying data. Veri kaynağı denetiminin alınan verilerini göstermek için, sayfada genellikle başka bir Web denetimi ekleyecek ve bunu veri kaynağı denetimine bağlayacağız.In order to display a data source control's retrieved data, we'll typically add another Web control to the page and bind it to the data source control. Bir Web denetimini bir veri kaynağı denetimine bağlamak için, Web denetiminin DataSourceID özelliğini veri kaynağı denetiminin ID özelliğinin değerine ayarlamanız yeterlidir.To bind a Web control to a data source control, simply set the Web control's DataSourceID property to the value of the data source control's ID property.

ASP.NET, site haritasının verileriyle çalışmaya yardımcı olmak için, Web sitesinin site haritasında bir Web denetimi bağlamamızı sağlayan SiteMapDataSource denetimini içerir.To aid in working with the site map's data, ASP.NET includes the SiteMapDataSource control, which allows us to bind a Web control against our website's site map. İki Web denetimi, ağaç ve menü genellikle bir gezinti kullanıcı arabirimi sağlamak için kullanılır.Two Web controls the TreeView and Menu are commonly used to provide a navigation user interface. Site Haritası verilerini bu iki denetimden birine bağlamak için, DataSourceID özelliği uygun şekilde ayarlanmış bir TreeView veya menü denetimiyle birlikte sayfaya bir SiteMapDataSource eklemeniz yeterlidir.To bind the site map data to one of these two controls, simply add a SiteMapDataSource to the page along with a TreeView or Menu control whose DataSourceID property is set accordingly. Örneğin, ana sayfaya aşağıdaki biçimlendirmeyi kullanarak bir menü denetimi ekleyebiliriz:For example, we could add a Menu control to the master page using the following markup:

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

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

Yayınlanan HTML üzerinde daha ayrıntılı bir denetim için, SiteMapDataSource denetimini Yineleyici denetimine bağlayabiliriz, örneğin şöyle olabilir:For a finer degree of control over the emitted HTML, we can bind the SiteMapDataSource control to the Repeater control, like so:

<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>

SiteMapDataSource denetimi, site haritası hiyerarşisini tek seferde, kök site haritası düğümünden (ana, site haritamızda), ardından bir sonraki düzeye (temel raporlama, filtreleme raporları ve özelleştirilmiş biçimlendirme) başlayarak bir düzey döndürür.The SiteMapDataSource control returns the site map hierarchy one level at a time, starting with the root site map node (Home, in our site map), then the next level (Basic Reporting, Filtering Reports, and Customized Formatting), and so on. SiteMapDataSource, bir yineleyici öğesine bağlanırken döndürülen ilk düzeyi numaralandırır ve bu ilk düzeydeki her bir SiteMapNode örneği için ItemTemplate başlatır.When binding the SiteMapDataSource to a Repeater, it enumerates the first level returned and instantiates the ItemTemplate for each SiteMapNode instance in that first level. SiteMapNodebelirli bir özelliğine erişmek için, her bir SiteMapNode``Url ve Title özelliklerini köprü denetimi için alma biçimimiz olan Eval(propertyName)kullanabiliriz.To access a particular property of the SiteMapNode, we can use Eval(propertyName), which is how we get each SiteMapNode's Url and Title properties for the HyperLink control.

Yukarıdaki Yineleyici örnek aşağıdaki biçimlendirmeyi işleyecek:The Repeater example above will render the following markup:

<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>

Bu site haritası düğümleri (temel raporlama, filtreleme raporları ve özelleştirilmiş biçimlendirme), ilk olarak değil, işlenen site eşlemesinin ikinci düzeyini oluşturur.These site map nodes (Basic Reporting, Filtering Reports, and Customized Formatting) comprise the second level of the site map being rendered, not the first. Bunun nedeni, SiteMapDataSource 'un ShowStartingNode özelliğinin false olarak ayarlanması, SiteMapDataSource 'un kök site haritası düğümünü atlaması ve bunun yerine site haritası hiyerarşisinde ikinci düzeyi döndürmesinin başlamasını sağlar.This is because the SiteMapDataSource's ShowStartingNode property is set to False, causing the SiteMapDataSource to bypass the root site map node and instead begin by returning the second level in the site map hierarchy.

Temel raporlama, filtreleme raporları ve özelleştirilmiş biçimlendirme SiteMapNode s için alt öğeleri göstermek üzere ilk yineleyicisi 'nin ItemTemplatebaşka bir yineleyici ekleyebiliriz.To display the children for the Basic Reporting, Filtering Reports, and Customized Formatting SiteMapNode s, we can add another Repeater to the initial Repeater's ItemTemplate. Bu ikinci Yineleyici, SiteMapNode örneğinin ChildNodes özelliğine bağlanacak, şöyle olacaktır:This second Repeater will be bound to the SiteMapNode instance's ChildNodes property, like so:

<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="<%# CType(Container.DataItem,
             SiteMapNode).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>

Bu iki repeaters, aşağıdaki İşaretlemede sonuç (kısaltma için bazı biçimlendirmeler kaldırılmıştır):These two Repeaters result in the following markup (some markup has been removed for brevity):

<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>

The Kchel Andrew'ıN, CSS antholoju tarafından seçilen CSS stillerinin kullanılması: 101 önemli Ipuçları, püf noktaları, & hacimler, <ul> ve <li> öğeleri, biçimlendirme aşağıdaki görsel çıktıyı üreten şekilde stillendirilemedir:Using CSS styles chosen from Rachel Andrew's book The CSS Anthology: 101 Essential Tips, Tricks, & Hacks, the <ul> and <li> elements are styled such that the markup produces the following visual output:

Iki repeaters ve bazı CSS 'lerden oluşan bir menü

Şekil 11: iki repeaters ve bazı CSS 'lerden oluşan bir menüFigure 11: A Menu Composed from Two Repeaters and Some CSS

Bu menü, ana sayfada ve Web.sitemaptanımlanan site haritasına bağlı olarak, site haritasında yapılan herhangi bir değişiklik, Site.master ana sayfasını kullanan tüm sayfalarda hemen yansıtılacaktır.This menu is in the master page and bound to the site map defined in Web.sitemap, meaning that any change to the site map will be immediately reflected on all pages that use the Site.master master page.

ViewState devre dışı bırakılıyorDisabling ViewState

Tüm ASP.NET denetimleri isteğe bağlı olarak, işlenmiş HTML 'de gizli form alanı olarak serileştirilmiş olan görünüm durumunakalıcı olarak devam edebilir.All ASP.NET controls can optionally persist their state to the view state, which is serialized as a hidden form field in the rendered HTML. Görünüm durumu, denetimler tarafından, bir veri Web denetimine yönelik veriler gibi geri göndermeler genelinde program aracılığıyla değiştirilen durumlarını anımsamak için kullanılır.View state is used by controls to remember their programmatically-changed state across postbacks, such as the data bound to a data Web control. Görünüm durumu bilgilerin geri göndermeler arasında hatırlanmasına izin verdiğinden, bu, istemciye gönderilmesi gereken biçimlendirmenin boyutunu artırır ve yakından izlenmezse önemli sayfa blobuna yol açabilir.While view state permits information to be remembered across postbacks, it increases the size of the markup that must be sent to the client and can lead to severe page bloat if not closely monitored. Veri Web denetimleri özellikle GridView, bir sayfaya onlarca fazladan kilobayt kadar biçimlendirme eklemek için özellikle ntoriou 'lar.Data Web controls especially the GridView are particularly notorious for adding dozens of extra kilobytes of markup to a page. Bu tür bir artış geniş bant veya intranet kullanıcıları için göz ardı edilebilir olsa da, Görünüm durumu çevirmeli kullanıcılara gidiş dönüş için birkaç saniye ekleyebilir.While such an increase may be negligible for broadband or intranet users, view state can add several seconds to the round trip for dial-up users.

Görünüm durumunun etkisini görmek için, tarayıcıda bir sayfayı ziyaret edin ve Web sayfası tarafından gönderilen kaynağı görüntüleyin (Internet Explorer 'da Görünüm menüsüne gidin ve kaynak seçeneğini belirleyin).To see the impact of view state, visit a page in a browser and then view the source sent by the web page (in Internet Explorer, go to the View menu and choose the Source option). Sayfadaki denetimlerin her biri tarafından kullanılan görünüm durumu ayırmayı görmek için Sayfa izlemeyi da açabilirsiniz.You can also turn on page tracing to see the view state allocation used by each of the controls on the page. Görünüm durumu bilgileri, açma <form> etiketinden hemen sonra <div> öğesinde bulunan __VIEWSTATEadlı gizli bir form alanında serileştirilir.The view state information is serialized in a hidden form field named __VIEWSTATE, located in a <div> element immediately after the opening <form> tag. Görünüm durumu yalnızca kullanılmakta olan bir Web formu olduğunda kalıcıdır; ASP.NET sayfanız bildirime dayalı sözdiziminde bir <form runat="server"> içermiyorsa, işlenmiş İşaretlemede __VIEWSTATE gizli form alanı olmayacaktır.View state is only persisted when there is a Web Form being used; if your ASP.NET page does not include a <form runat="server"> in its declarative syntax there won't be a __VIEWSTATE hidden form field in the rendered markup.

Ana sayfa tarafından oluşturulan __VIEWSTATE form alanı, sayfanın oluşturulan biçimlendirmesine kabaca 1.800 bayt ekler.The __VIEWSTATE form field generated by the master page adds roughly 1,800 bytes to the page's generated markup. Bu ek blobunun nedeni, SiteMapDataSource denetiminin içerikleri görünüm durumu ' nu kalıcı olduğundan birincil olarak Yineleyici denetimine yöneliktir.This extra bloat is due primarily to the Repeater control, as the contents of the SiteMapDataSource control are persisted to view state. Çok sayıda alan ve kayıt içeren bir GridView kullanırken, ek 1.800 baytları heyecanlanabilecek kadar çok görünmeyebilir, Görünüm durumu 10 veya daha fazla bir faktörle kolayca görünebilir.While an extra 1,800 bytes may not seem like much to get excited about, when using a GridView with many fields and records, the view state can easily swell by a factor of 10 or more.

Görünüm durumu, EnableViewState özelliği Falseolarak ayarlanarak, sayfa veya Denetim düzeyinde devre dışı bırakılabilir ve böylece işlenmiş biçimlendirmenin boyutu azalır.View state can be disabled at the page or control level by setting the EnableViewState property to False, thereby reducing the size of the rendered markup. Bir veri Web denetiminin görünüm durumu, geri göndermeler genelinde veri Web denetimine bağlı verilerin devam ettiğinden, bir veri Web denetimi için görünüm durumunu devre dışı bırakırken verilerin her geri göndermede ve her geri göndermede bağlı olması gerekir.Since the view state for a data Web control persists the data bound to the data Web control across postbacks, when disabling the view state for a data Web control the data must be bound on each and every postback. ASP.NET sürüm 1. x ' de, bu sorumluluk sayfa geliştiricisi Shoulders üzerinde. Ancak, ASP.NET 2,0 ile veri Web denetimleri, gerektiğinde her geri göndermede veri kaynağı denetimlerine yeniden bağlanmaya çalışır.In ASP.NET version 1.x this responsibility fell on the shoulders of the page developer; with ASP.NET 2.0, however, the data Web controls will rebind to their data source control on each postback if needed.

Sayfanın görünüm durumunu azaltmak için, yineleyici denetiminin EnableViewState özelliğini Falseolarak ayarlayalim.To reduce the page's view state let's set the Repeater control's EnableViewState property to False. Bu, tasarımcıda Özellikler penceresi veya kaynak görünümünde bildirimli olarak yapılabilir.This can be done through the Properties window in the Designer or declaratively in the Source view. Bu değişikliği yaptıktan sonra, yineleyicisi 'nin bildirim temelli işaretleme şöyle görünmelidir:After making this change the Repeater's declarative markup should look like:

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

Bu değişiklikten sonra, sayfanın işlenmiş görünüm durumu boyutu bir boyutundaydı 52 bayta küçültülebilir, bu da görünüm durumu boyutunda %97 tasarruf sağlar!After this change, the page's rendered view state size has shrunk to a mere 52 bytes, a 97% savings in view state size! Bu dizideki öğreticilerde, oluşturulan biçimlendirmenin boyutunu azaltmak için varsayılan olarak veri Web denetimlerinin görünüm durumunu devre dışı bırakacağız.In the tutorials throughout this series we'll disable the view state of the data Web controls by default in order to reduce the size of the rendered markup. Örneklerin çoğunluğunda EnableViewState özelliği False olarak ayarlanacak ve bunu bahsetmeden yapmış olacak.In the majority of the examples the EnableViewState property will be set to False and done so without mention. Tek zaman görünümü durumu, veri Web denetimi 'nin beklenen işlevselliğini sağlaması için etkin olması gereken senaryolarda ele alınacaktır.The only time view state will be discussed is in scenarios where it must be enabled in order for the data Web control to provide its expected functionality.

4. Adım: Içerik Haritası gezintisi eklemeStep 4: Adding Breadcrumb Navigation

Ana sayfayı tamamlayabilmeniz için her sayfaya bir içerik haritası gezintisi kullanıcı arabirimi öğesi ekleyelim.To complete the master page, let's add a breadcrumb navigation UI element to each page. İçerik haritası, kullanıcıları site hiyerarşisi içindeki geçerli konumlarını hızlı bir şekilde gösterir.The breadcrumb quickly shows users their current position within the site hierarchy. ASP.NET 2,0 ' de bir içerik haritası eklemenin kolay bir şekilde sayfaya bir e-bir denetim eklemesi yeterlidir; kod gerekmez.Adding a breadcrumb in ASP.NET 2.0 is easy just add a SiteMapPath control to the page; no code is needed.

Sitemiz için bu denetimi üstbilgiye <div>ekleyin:For our site, add this control to the header <div>:

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

İçerik haritası, kullanıcının site haritası hiyerarşisinde ziyaret ettiği geçerli sayfayı ve bu site eşleme düğümünün "üst öğeleri", köke (sitem haritamızda ana) kadar tüm şekilde olduğunu gösterir.The breadcrumb shows the current page the user is visiting in the site map hierarchy as well as that site map node's "ancestors," all the way up to the root (Home, in our site map).

Içerik Haritası, geçerli sayfayı ve onun üst öğelerini site haritası hiyerarşisinde görüntüler

Şekil 12: içerik haritası, geçerli sayfayı ve onun üst öğelerini site haritası hiyerarşisinde görüntülerFigure 12: The Breadcrumb Displays the Current Page and its Ancestors in the Site Map Hierarchy

5. Adım: her bölüm için varsayılan sayfayı eklemeStep 5: Adding the Default Page for Each Section

Sitemizdeki öğreticiler, her kategori için bir klasör ve bu klasördeki ASP.NET sayfaları gibi ilgili öğreticiler için temel raporlama, filtreleme, özel biçimlendirme gibi farklı kategorilere ayrılmıştır.The tutorials in our site are broken down into different categories Basic Reporting, Filtering, Custom Formatting, and so on with a folder for each category and the corresponding tutorials as ASP.NET pages within that folder. Ayrıca, her klasör bir Default.aspx sayfası içerir.Additionally, each folder contains a Default.aspx page. Bu varsayılan sayfa için geçerli bölüm için tüm öğreticilerin görüntülenmesini görelim.For this default page, let's display all of the tutorials for the current section. Diğer bir deyişle, BasicReporting klasöründeki Default.aspx için SimpleDisplay.aspx, DeclarativeParams.aspxve ProgrammaticParams.aspxbağlantıları vardır.That is, for the Default.aspx in the BasicReporting folder we'd have links to SimpleDisplay.aspx, DeclarativeParams.aspx, and ProgrammaticParams.aspx. Burada, SiteMap sınıfını ve bir veri Web denetimini kullanarak bu bilgileri Web.sitemaptanımlanan site haritasına göre görüntüleyebilirsiniz.Here, again, we can use the SiteMap class and a data Web control to display this information based upon the site map defined in Web.sitemap.

Yineleyicisi 'ni tekrar kullanarak sıralanmamış bir liste gösterelim, ancak bu kez öğreticilerin başlığını ve açıklamasını görüntüleyeceğiz.Let's display an unordered list using a Repeater again, but this time we'll display the title and description of the tutorials. Bunu gerçekleştirmeye yönelik biçimlendirme ve kodun her bir Default.aspx sayfası için yinelenmesi gerektiğinden, bu UI mantığını bir Kullanıcı denetimindekapsülleyebilirsiniz.Since the markup and code to accomplish this will need to be repeated for each Default.aspx page, we can encapsulate this UI logic in a User Control. UserControls adlı Web sitesinde bir klasör oluşturun ve SectionLevelTutorialListing.ascxadlı Web Kullanıcı denetimi türünde yeni bir öğeye ekleyin ve aşağıdaki biçimlendirmeyi ekleyin:Create a folder in the website called UserControls and add to that a new item of type Web User Control named SectionLevelTutorialListing.ascx, and add the following markup:

UserControls klasörüne yeni bir Web Kullanıcı denetimi EkleAdd a New Web User Control to the UserControls Folder

Şekil 13: UserControls klasöre yeni bir Web Kullanıcı denetimi ekleme (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 13: Add a New Web User Control to the UserControls Folder (Click to view full-size image)

SectionLevelTutorialListing. ascxSectionLevelTutorialListing.ascx

<%@ Control Language="VB" AutoEventWireup="true"
    CodeFile="SectionLevelTutorialListing.ascx.vb"
    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.vbSectionLevelTutorialListing.ascx.vb

Partial Class UserControls_SectionLevelTutorialListing 
    Inherits UserControl

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If SiteMap.CurrentNode IsNot Nothing Then
            TutorialList.DataSource = SiteMap.CurrentNode.ChildNodes
            TutorialList.DataBind()
        End If
    End Sub
End Class

Önceki Yineleyici örneğinde, SiteMap verilerini yineleyicisi 'ne bildirimli olarak bağladık; Ancak SectionLevelTutorialListing Kullanıcı denetimi, programlı olarak bunu yapar.In the previous Repeater example we bound the SiteMap data to the Repeater declaratively; the SectionLevelTutorialListing User Control, however, does so programmatically. Page_Load olay işleyicisinde, bu sayfanın URL 'sinin site eşlemesindeki bir düğüme eşlendiğinden emin olmak için bir denetim yapılır.In the Page_Load event handler, a check is made to ensure that this page s URL maps to a node in the site map. Bu Kullanıcı denetimi karşılık gelen bir <siteMapNode> girişi olmayan bir sayfada kullanılıyorsa, SiteMap.CurrentNode Nothing döndürür ve hiçbir veri yineleyicisi 'ne bağlanmayacak.If this User Control is used in a page that does not have a corresponding <siteMapNode> entry, SiteMap.CurrentNode will return Nothing and no data will be bound to the Repeater. CurrentNodeolduğunu varsayarsak, ChildNodes koleksiyonunu Repeater 'a bağladık.Assuming we have a CurrentNode, we bind its ChildNodes collection to the Repeater. Site Haritamız, her bölümdeki Default.aspx sayfası bu bölümdeki tüm öğreticilerin üst düğümüdür, bu kod, aşağıdaki ekran görüntüsünde gösterildiği gibi tüm bölüm öğreticilerinin bağlantılarını ve açıklamalarını görüntüler.Since our site map is set up such that the Default.aspx page in each section is the parent node of all of the tutorials within that section, this code will display links to and descriptions of all of the section's tutorials, as shown in the screen shot below.

Bu Yineleyici oluşturulduktan sonra, her bir klasördeki Default.aspx sayfaları açın, Tasarım görünümü gidin ve Çözüm Gezgini Kullanıcı denetimini, öğretici listesinin görüntülenmesini istediğiniz tasarım yüzeyine sürüklemeniz yeterlidir.Once this Repeater has been created, open the Default.aspx pages in each of the folders, go to the Design view, and simply drag the User Control from the Solution Explorer onto the Design surface where you want the tutorial list to appear.

Kullanıcı denetimi varsayılan. aspx 'e eklenmiştir The User Control has Been Added to Default.aspx

Şekil 14: kullanıcı denetimi Default.aspx eklendi (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 14: The User Control has Been Added to Default.aspx (Click to view full-size image)

Temel raporlama öğreticilerinin listeleniyorThe Basic Reporting Tutorials are Listed

Şekil 15: temel raporlama öğreticileri listelenir (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 15: The Basic Reporting Tutorials are Listed (Click to view full-size image)

ÖzetSummary

Site Haritası tanımlı ve ana sayfa tamamlandığına göre artık, verilerle ilgili öğreticilerimiz için tutarlı bir sayfa düzeni ve gezinti düzeni sunuyoruz.With the site map defined and the master page complete, we now have a consistent page layout and navigation scheme for our data-related tutorials. Sitemizi eklediğimiz sayfa sayısına bakılmaksızın, site genelinde sayfa düzeni veya site gezinti bilgilerini güncelleştirmek, bu bilgiler merkezi hale gelmiş olduğundan hızlı ve basit bir işlemdir.Regardless of how many pages we add to our site, updating the site-wide page layout or site navigation information is a quick and simple process due to this information being centralized. Özellikle, sayfa düzeni bilgileri Ana sayfa Site.master ve Web.sitemapsite haritasında tanımlanmıştır.Specifically, the page layout information is defined in the master page Site.master and the site map in Web.sitemap. Bu site genelinde sayfa düzenine ve gezinti mekanizmasına ulaşmak için herhangi bir kod yazmak zorunda kalmadık ve Visual Studio 'DA Tam WYSIWYG Designer desteğini koruduk.We didn't need to write any code to achieve this site-wide page layout and navigation mechanism, and we retain full WYSIWYG designer support in Visual Studio.

Veri erişimi katmanını ve Iş mantığı katmanını tamamladığınıza göre, tutarlı bir sayfa düzeni ve site gezintisi tanımlanmış, ortak raporlama desenlerini keşfetmeye başlamaya hazırız.Having completed the Data Access Layer and Business Logic Layer and having a consistent page layout and site navigation defined, we're ready to begin exploring common reporting patterns. Sonraki üç öğreticilerde, GridView, DetailsView ve FormView denetimlerinde BLL 'lerden alınan verileri görüntüleyen temel raporlama görevlerine bakacağız.In the next three tutorials we'll look at basic reporting tasks displaying data retrieved from the BLL in the GridView, DetailsView, and FormView controls.

Programlamanın kutlu olsun!Happy Programming!

Daha Fazla BilgiFurther Reading

Bu öğreticide ele alınan konular hakkında daha fazla bilgi için aşağıdaki kaynaklara bakın:For more information on the topics discussed in this tutorial, refer to the following resources:

Yazar hakkındaAbout the Author

4GuysFromRolla.com 'in, Scott Mitchell, yedi ASP/ASP. net books ve 'in yazarı, 1998 sürümünden bu yana Microsoft Web teknolojileriyle çalışmaktadır.Scott Mitchell, author of seven ASP/ASP.NET books and founder of 4GuysFromRolla.com, has been working with Microsoft Web technologies since 1998. Scott bağımsız danışman, Trainer ve yazıcı olarak çalışıyor.Scott works as an independent consultant, trainer, and writer. En son kitabı, 24 saat içinde ASP.NET 2,0 kendi kendinize eğitimister.His latest book is Sams Teach Yourself ASP.NET 2.0 in 24 Hours. mitchell@4GuysFromRolla.comadresinden erişilebilir .He can be reached at mitchell@4GuysFromRolla.com. ya da blog aracılığıyla http://ScottOnWriting.NETbulabilirsiniz.or via his blog, which can be found at http://ScottOnWriting.NET.

Özel olarak teşekkürlerSpecial Thanks To

Bu öğretici serisi birçok yararlı gözden geçirenler tarafından incelendi.This tutorial series was reviewed by many helpful reviewers. Bu öğreticide lider gözden geçirenler Liz Shulok, dennıs Patterson ve Tepton Giesenow.Lead reviewers for this tutorial were Liz Shulok, Dennis Patterson, and Hilton Giesenow. Yaklaşan MSDN makalelerimi gözden geçiriyor musunuz?Interested in reviewing my upcoming MSDN articles? Öyleyse, benimitchell@4GuysFromRolla.combir satır bırakın .If so, drop me a line at mitchell@4GuysFromRolla.com.