Bagikan melalui

Halaman Master dan Navigasi Situs (VB)

oleh Scott Mitchell

Unduh PDF

Salah satu karakteristik umum situs web yang mudah digunakan adalah bahwa mereka memiliki tata letak halaman dan skema navigasi di seluruh situs yang konsisten. Tutorial ini melihat bagaimana Anda dapat membuat tampilan dan nuansa yang konsisten di semua halaman yang dapat dengan mudah diperbarui.

Pendahuluan

Salah satu karakteristik umum situs web yang mudah digunakan adalah bahwa mereka memiliki tata letak halaman dan skema navigasi di seluruh situs yang konsisten. ASP.NET 2.0 memperkenalkan dua fitur baru yang sangat menyederhanakan penerapan tata letak halaman seluruh situs dan skema navigasi: halaman master dan navigasi situs. Halaman master memungkinkan pengembang membuat templat di seluruh situs dengan wilayah yang dapat diedit yang ditunjuk. Templat ini kemudian dapat diterapkan ke halaman ASP.NET di situs. Halaman ASP.NET tersebut hanya perlu menyediakan konten untuk wilayah yang dapat diedit halaman master yang ditentukan semua markup lain di halaman master identik di semua halaman ASP.NET yang menggunakan halaman master. Model ini memungkinkan pengembang untuk menentukan dan mempusatkan tata letak halaman di seluruh situs, sehingga memudahkan untuk membuat tampilan dan nuansa yang konsisten di semua halaman yang dapat dengan mudah diperbarui.

Sistem navigasi situs menyediakan mekanisme bagi pengembang halaman untuk menentukan peta situs dan API agar peta situs tersebut dikueri secara terprogram. Kontrol Web navigasi baru untuk Menu, TreeView, dan SiteMapPath mempermudah render seluruh atau sebagian peta situs dalam elemen antarmuka pengguna navigasi umum. Kita akan menggunakan penyedia navigasi situs default, yang berarti bahwa peta situs kita akan ditentukan dalam file berformat XML.

Untuk mengilustrasikan konsep-konsep ini dan membuat situs web tutorial kami lebih dapat digunakan, mari kita habiskan pelajaran ini mendefinisikan tata letak halaman di seluruh situs, menerapkan peta situs, dan menambahkan antarmuka pengguna navigasi. Pada akhir tutorial ini, kita akan memiliki desain situs web yang dipolihkan untuk membangun halaman web tutorial kami.

Hasil Akhir Tutorial Ini

Gambar 1: Hasil Akhir Tutorial Ini (Klik untuk melihat gambar ukuran penuh)

Langkah 1: Membuat Halaman Master

Langkah pertama adalah membuat halaman master untuk situs. Saat ini situs web kami hanya terdiri dari Himpunan Data Yang Diketik (, di Northwind.xsd folder), kelas BLL (App_Code, ProductsBLL.vb, dan sebagainya, semua dalam CategoriesBLL.vb folder), database (App_Code, dalam NORTHWND.MDF folder), file konfigurasi (App_Data), dan file lembar gaya CSS (Web.config).Styles.css Saya membersihkan halaman dan file-file yang menunjukkan menggunakan DAL dan BLL dari dua tutorial pertama karena kita akan mengeluarkan kembali contoh-contoh tersebut secara lebih rinci dalam tutorial di masa mendatang.

File-File dalam Proyek Kami

Gambar 2: File dalam Proyek Kami

Untuk membuat halaman master, klik kanan nama proyek di Penjelajah Solusi dan pilih Tambahkan Item Baru. Lalu pilih jenis Halaman Master dari daftar templat dan beri nama Site.master.

Menambahkan Halaman Master Baru ke Situs Web

Gambar 3: Tambahkan Halaman Master Baru ke Situs Web (Klik untuk melihat gambar ukuran penuh)

Tentukan tata letak halaman seluruh situs di sini di halaman master. Anda dapat menggunakan tampilan Desain dan menambahkan kontrol Tata Letak atau Web apa pun yang Anda butuhkan, atau Anda dapat menambahkan markup secara manual secara manual di tampilan Sumber. Di halaman master saya, saya menggunakan lembar gaya berlapis untuk penempatan dan gaya dengan pengaturan CSS yang ditentukan dalam file Style.css eksternal. Meskipun Anda tidak dapat mengetahui dari markup yang ditunjukkan di bawah ini, aturan CSS didefinisikan sedemikian rupa agar konten navigasi <div> benar-benar diposisikan sehingga muncul di sebelah kiri dan memiliki lebar tetap 200 piksel.

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

Halaman master menentukan tata letak halaman statis dan wilayah yang dapat diedit oleh halaman ASP.NET yang menggunakan halaman master. Wilayah yang dapat diedit konten ini ditunjukkan oleh kontrol ContentPlaceHolder, yang dapat dilihat dalam konten <div>. Halaman master kami memiliki satu ContentPlaceHolder (MainContent), tetapi halaman master mungkin memiliki beberapa ContentPlaceHolders.

Dengan markup yang dimasukkan di atas, beralih ke tampilan Desain memperlihatkan tata letak halaman master. Setiap halaman ASP.NET yang menggunakan halaman master ini akan memiliki tata letak seragam ini, dengan kemampuan untuk menentukan markup untuk wilayah tersebut MainContent .

Halaman Master, Saat Dilihat Melalui Tampilan Desain

Gambar 4: Halaman Master, Saat Dilihat Melalui Tampilan Desain (Klik untuk melihat gambar ukuran penuh)

Langkah 2: Menambahkan Beranda ke Situs Web

Dengan halaman master yang ditentukan, kami siap untuk menambahkan halaman ASP.NET untuk situs web. Mari kita mulai dengan menambahkan Default.aspx, beranda situs web kami. Klik kanan pada nama proyek di Penjelajah Solusi dan pilih Tambahkan Item Baru. Pilih opsi Formulir Web dari daftar templat dan beri nama file Default.aspx. Selain itu, centang kotak centang "Pilih halaman master".

Tambahkan Formulir Web Baru, Mencentang Kotak Centang Pilih halaman master

Gambar 5: Tambahkan Formulir Web Baru, Memeriksa Kotak Centang Pilih halaman master (Klik untuk melihat gambar ukuran penuh)

Setelah mengklik tombol OK, kami diminta untuk memilih halaman master apa yang harus digunakan halaman ASP.NET baru ini. Meskipun Anda dapat memiliki beberapa halaman master dalam proyek Anda, kami hanya memiliki satu.

Pilih Halaman Master yang Harus Digunakan halaman ASP.NET ini

Gambar 6: Pilih Halaman Master yang Harus Digunakan halaman ASP.NET ini (Klik untuk melihat gambar ukuran penuh)

Setelah memilih halaman master, halaman ASP.NET baru akan berisi markup berikut:

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

Dalam direktif @Page ada referensi ke file halaman master yang digunakan (MasterPageFile="~/Site.master"), dan markup halaman ASP.NET berisi kontrol Konten untuk setiap kontrol ContentPlaceHolder yang ditentukan di halaman master, dengan kontrol kontrol ContentPlaceHolderID pemetaan Konten ke ContentPlaceHolder tertentu. Kontrol Konten adalah tempat Anda menempatkan markup yang ingin Anda munculkan di ContentPlaceHolder yang sesuai. Atur atribut direktif @PageTitle ke Beranda dan tambahkan beberapa konten yang menyambut ke kontrol Konten:

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

Atribut Title dalam direktif @Page memungkinkan kita untuk mengatur judul halaman dari halaman ASP.NET, meskipun <title> elemen ditentukan di halaman master. Kita juga dapat mengatur judul secara terprogram, menggunakan Page.Title. Perhatikan juga bahwa referensi halaman master ke lembar gaya (seperti Style.css) diperbarui secara otomatis sehingga dapat berfungsi di halaman ASP.NET mana pun, terlepas dari direktori tempat halaman ASP.NET tersebut berada relatif terhadap halaman master.

Beralih ke tampilan Desain, kita dapat melihat bagaimana halaman kita akan terlihat di browser. Catat bahwa di tampilan Desain untuk halaman ASP.NET, hanya wilayah yang dapat diedit dari konten yang bisa diubah. Sementara itu, markup non-ContentPlaceHolder yang ditentukan di halaman master akan berwarna abu-abu.

Tampilan Desain untuk Halaman ASP.NET Memperlihatkan Wilayah yang Dapat Diedit dan Tidak Dapat Diedit

Gambar 7: Tampilan Desain untuk Halaman ASP.NET Memperlihatkan Wilayah yang Dapat Diedit dan Tidak Dapat Diedit (Klik untuk melihat gambar ukuran penuh)

Default.aspx Ketika halaman dikunjungi oleh browser, mesin ASP.NET secara otomatis menggabungkan konten halaman master dan konten ASP.NET, serta merender konten yang sudah digabungkan menjadi HTML final yang dikirim ke browser yang meminta. Ketika konten halaman master diperbarui, semua halaman ASP.NET yang menggunakan halaman master ini akan diperbarui kontennya dengan digabungkan kembali dengan konten halaman master baru saat permintaan berikutnya dilakukan. Singkatnya, model halaman master memungkinkan templat tata letak satu halaman ditentukan (halaman master) yang perubahannya segera tercermin di seluruh situs.

Menambahkan Halaman ASP.NET Tambahan ke Situs Web

Mari kita luangkan waktu sejenak untuk menambahkan stub halaman ASP.NET tambahan ke situs yang akhirnya akan menyimpan berbagai demo pelaporan. Total akan ada lebih dari 35 demo, jadi daripada membuat semua halaman stub mari kita buat beberapa yang pertama. Karena juga akan ada banyak kategori demo, untuk mengelola demo dengan lebih baik menambahkan folder untuk kategori. Tambahkan tiga folder berikut untuk saat ini:

  • BasicReporting
  • Filtering
  • CustomFormatting

Terakhir, tambahkan file baru seperti yang ditunjukkan di Penjelajah Solusi di Gambar 8. Saat menambahkan setiap file, ingatlah untuk mencentang kotak centang "Pilih halaman master".

Tambahkan File Berikut

Gambar 8: Tambahkan File Berikut

Langkah 2: Membuat Peta Situs

Salah satu tantangan dalam mengelola situs web yang terdiri dari lebih dari segelintir halaman adalah memberikan cara mudah bagi pengunjung untuk menavigasi melalui situs. Untuk memulainya, struktur navigasi situs harus ditentukan. Selanjutnya, struktur ini harus diterjemahkan ke dalam elemen antarmuka pengguna yang dapat dinavigasi, seperti menu atau remah roti. Akhirnya, seluruh proses ini perlu dipertahankan dan diperbarui karena halaman baru ditambahkan ke situs dan yang sudah ada dihapus. Sebelum ASP.NET 2.0, pengembang berada sendiri untuk membuat struktur navigasi situs, mempertahankannya, dan menerjemahkannya ke dalam elemen antarmuka pengguna yang dapat dinavigasi. Namun, dengan ASP.NET 2.0, pengembang dapat menggunakan sistem navigasi situs bawaan yang sangat fleksibel.

Sistem navigasi situs ASP.NET 2.0 menyediakan sarana bagi pengembang untuk menentukan peta situs dan kemudian mengakses informasi ini melalui API terprogram. ASP.NET dikirim dengan penyedia peta situs yang mengharapkan data peta situs disimpan dalam file XML yang diformat dengan cara tertentu. Tetapi, karena sistem navigasi situs dibangun pada model penyedia , sistem dapat diperluas untuk mendukung cara alternatif untuk menserialisasikan informasi peta situs. Artikel Jeff Prosise, Penyedia Peta Situs SQL yang Sudah Anda Tunggu menunjukkan cara membuat penyedia peta situs yang menyimpan peta situs dalam database SQL Server.

Namun, untuk tutorial ini, mari kita gunakan penyedia peta situs default yang dikirim dengan ASP.NET 2.0. Untuk membuat peta situs, cukup klik kanan pada nama proyek di Penjelajah Solusi, pilih Tambahkan Item Baru, dan pilih opsi Peta Situs. Biarkan nama sebagai Web.sitemap dan klik tombol Tambahkan.

Menambahkan Peta Situs ke Proyek Anda

Gambar 9: Tambahkan Peta Situs ke Proyek Anda (Klik untuk melihat gambar ukuran penuh)

File peta situs adalah file XML. Perhatikan bahwa Visual Studio menyediakan IntelliSense untuk struktur peta situs. File peta situs harus memiliki simpul <siteMap> sebagai simpul akarnya, yang harus berisi tepat satu <siteMapNode> elemen anak. Elemen pertama <siteMapNode> tersebut kemudian dapat berisi jumlah elemen keturunan <siteMapNode> yang tidak terbatas.

Tentukan peta situs untuk meniluki struktur sistem file. Artinya, tambahkan <siteMapNode> elemen untuk masing-masing dari tiga folder, dan elemen turunan <siteMapNode> untuk setiap halaman ASP.NET di folder tersebut, seperti:

Peta Situs

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

Peta situs menentukan struktur navigasi situs web, yang merupakan hierarki yang menjelaskan berbagai bagian situs. Setiap <siteMapNode> elemen dalam Web.sitemap mewakili bagian dalam struktur navigasi situs.

Peta Situs Mewakili Struktur Navigasi Hierarkis

Gambar 10: Peta Situs Mewakili Struktur Navigasi Hierarkis (Klik untuk melihat gambar ukuran penuh)

ASP.NET mengekspos struktur peta situs melalui kelas SiteMap .NET Framework. Kelas ini memiliki CurrentNode properti, yang mengembalikan informasi tentang bagian yang saat ini dikunjungi pengguna; RootNode properti mengembalikan akar peta situs (Beranda, di peta situs kami). CurrentNode dan RootNode properti mengembalikan instans SiteMapNode, yang memiliki properti seperti ParentNode, ChildNodes, NextSibling, PreviousSibling, dan sebagainya, yang memungkinkan hierarki peta situs diikuti.

Langkah 3: Menampilkan Menu Berdasarkan Peta Situs

Mengakses data di ASP.NET 2.0 dapat dicapai secara terprogram, seperti di ASP.NET 1.x, atau secara deklaratif, melalui kontrol sumber data baru. Ada beberapa kontrol sumber data bawaan seperti kontrol SqlDataSource, untuk mengakses data database relasional, kontrol ObjectDataSource, untuk mengakses data dari kelas, dan lainnya. Anda bahkan dapat membuat kontrol sumber data kustom Anda sendiri.

Kontrol sumber data berfungsi sebagai proksi antara halaman ASP.NET Anda dan data yang mendasar. Untuk menampilkan data yang diambil kontrol sumber data, kami biasanya akan menambahkan kontrol Web lain ke halaman dan mengikatnya ke kontrol sumber data. Untuk mengikat kontrol Web ke kontrol sumber data, cukup atur properti kontrol DataSourceID Web ke nilai properti kontrol ID sumber data.

Untuk membantu bekerja dengan data peta situs, ASP.NET menyertakan kontrol SiteMapDataSource, yang memungkinkan kami untuk mengikat kontrol Web terhadap peta situs situs web kami. Dua kontrol Web TreeView dan Menu umumnya digunakan untuk menyediakan antarmuka pengguna navigasi. Untuk mengikat data peta situs ke salah satu dari dua kontrol ini, cukup tambahkan SiteMapDataSource ke halaman bersama dengan kontrol TreeView atau Menu yang propertinya DataSourceID diatur sesuai. Misalnya, kita dapat menambahkan kontrol Menu ke halaman master menggunakan markup berikut:

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

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

Untuk tingkat kontrol yang lebih baik atas HTML yang dipancarkan, kita dapat mengikat kontrol SiteMapDataSource ke kontrol Repeater, seperti:

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

Kontrol SiteMapDataSource mengembalikan hierarki peta situs satu tingkat sekaligus, dimulai dengan simpul peta situs akar (Beranda, di peta situs kami), lalu tingkat berikutnya (Pelaporan Dasar, Laporan Pemfilteran, dan Pemformatan yang Dikustomisasi), dan sebagainya. Saat mengikat SiteMapDataSource ke Repeater, itu mendata tingkat pertama yang dikembalikan dan menginisialisasi ItemTemplate untuk setiap objek SiteMapNode di tingkat pertama tersebut. Untuk mengakses properti tertentu dari SiteMapNode, kita dapat menggunakan Eval(propertyName), yang memungkinkan kita mendapatkan masing-masing properti SiteMapNode dan Url dari kontrol HyperLink.

Contoh Repeater di atas akan merender markup berikut:

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

Simpul peta situs ini (Pelaporan Dasar, Laporan Pemfilteran, dan Pemformatan yang Dikustomisasi) terdiri dari tingkat kedua peta situs yang dirender, bukan yang pertama. Ini karena properti ShowStartingNode dari SiteMapDataSource diatur ke False, menyebabkan SiteMapDataSource melewati simpul peta situs akar dan memulai dari tingkat kedua dalam hierarki peta situs.

Untuk menampilkan turunan untuk Pelaporan Dasar, Laporan Pemfilteran, dan Pemformatan yang dikustomisasi, kita bisa menambahkan Repeater lain ke Repeater awal. Repeater kedua ini akan terikat ke properti SiteMapNode pada instans ChildNodes, seperti:

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

Kedua Pengulang ini menghasilkan markup berikut (beberapa markup telah dihapus untuk kejelasan):

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

Menggunakan gaya CSS yang dipilih dari buku Rachel AndrewThe CSS Anthology: 101 Essential Tips, Tricks, & Hacks, elemen <ul> dan <li> ditata sedemikian rupa sehingga markup menghasilkan output visual berikut:

Menu Yang Terdiri dari Dua Pengulang dan Beberapa CSS

Gambar 11: Menu yang Terdiri dari Dua Pengulang dan Beberapa CSS

Menu ini berada di halaman master dan terikat ke peta situs yang ditentukan dalam Web.sitemap, yang berarti bahwa setiap perubahan pada peta situs akan segera tercermin pada semua halaman yang menggunakan Site.master halaman master.

Menonaktifkan ViewState

Semua kontrol ASP.NET dapat secara opsional mempertahankan statusnya ke status tampilan, yang diserialisasikan sebagai bidang formulir tersembunyi di HTML yang dirender. Status tampilan digunakan oleh kontrol untuk mengingat keadaan yang telah diubah secara terprogram saat proses postback, seperti data yang diikat ke kontrol Web data. Meskipun status tampilan mengizinkan informasi untuk diingat di seluruh postback, itu meningkatkan ukuran markup yang harus dikirim ke klien dan dapat menyebabkan kembung halaman yang parah jika tidak dipantau dengan cermat. Kontrol Web Data terutama GridView sangat terkenal untuk menambahkan puluhan kilobyte markup ekstra ke halaman. Meskipun peningkatan tersebut dapat diabaikan untuk pengguna broadband atau intranet, view state dapat menambahkan beberapa detik ke waktu transmisi bolak-balik untuk pengguna dial-up.

Untuk melihat dampak status tampilan, kunjungi halaman di browser lalu lihat sumber yang dikirim oleh halaman web (di Internet Explorer, buka menu Tampilan dan pilih opsi Sumber). Anda juga dapat mengaktifkan pelacakan halaman untuk melihat alokasi status tampilan yang digunakan oleh setiap kontrol di halaman. Informasi status tampilan diserialisasikan dalam bidang formulir tersembunyi bernama __VIEWSTATE, dalam elemen <div> yang terletak segera setelah tag pembuka <form>. Status tampilan hanya bertahan ketika ada Formulir Web yang digunakan; jika halaman ASP.NET Anda tidak menyertakan <form runat="server"> dalam sintaks deklaratifnya, tidak akan __VIEWSTATE ada bidang formulir tersembunyi dalam markup yang dirender.

Bidang __VIEWSTATE formulir yang dihasilkan oleh halaman induk menambahkan sekitar 1.800 byte ke kode yang dihasilkan halaman. Kelebihan beban ini terutama disebabkan oleh kontrol Repeater, karena konten kontrol SiteMapDataSource dipertahankan dalam status tampilan. Meskipun tambahan 1.800 byte mungkin tidak terlihat signifikan, pada penggunaan GridView dengan banyak bidang dan catatan, status tampilan dapat dengan mudah meningkat sepuluh kali lipat atau lebih.

Status tampilan dapat dinonaktifkan di halaman atau tingkat kontrol dengan mengatur EnableViewState properti ke False, sehingga mengurangi ukuran markup yang dirender. Karena status tampilan untuk kontrol Web data mempertahankan data yang terikat ke kontrol Web data di seluruh postback, saat menonaktifkan status tampilan untuk kontrol Web data, data harus terikat pada setiap postback. Dalam ASP.NET versi 1.x tanggung jawab ini jatuh di pundak pengembang halaman; namun, dengan ASP.NET 2.0, kontrol Web data akan digabungkan kembali ke kontrol sumber data mereka pada setiap postback jika diperlukan.

Untuk mengurangi status tampilan halaman, mari atur properti kontrol EnableViewState Pengulang ke False. Ini dapat dilakukan melalui jendela Properti di Perancang atau secara deklaratif dalam tampilan Sumber. Setelah membuat perubahan ini, markup deklaratif Repeater akan terlihat seperti:

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

Setelah perubahan ini, ukuran status tampilan halaman yang dirender telah menyusut menjadi hanya 52 byte, penghematan 97% dalam ukuran status tampilan! Dalam tutorial di seluruh seri ini kita akan menonaktifkan status tampilan kontrol Web data secara default untuk mengurangi ukuran markup yang dirender. Dalam sebagian besar contoh, properti EnableViewState akan diatur ke False dan tidak disebutkan. Satu-satunya status tampilan waktu yang akan dibahas adalah dalam skenario di mana ia harus diaktifkan agar kontrol Web data menyediakan fungsionalitas yang diharapkan.

Langkah 4: Menambahkan Navigasi Breadcrumb

Untuk menyelesaikan halaman master, mari kita tambahkan elemen antarmuka pengguna navigasi breadcrumb ke setiap halaman. Jejak navigasi dengan cepat menunjukkan posisi saat ini untuk pengguna dalam hierarki situs. Menambahkan breadcrumb di ASP.NET 2.0 mudah hanya dengan menambahkan kontrol SiteMapPath ke halaman; tidak ada kode yang diperlukan.

Untuk situs kami, tambahkan kontrol ini ke header <div>:

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

Breadcrumb menunjukkan halaman saat ini yang dikunjungi pengguna dalam hierarki peta situs serta "leluhur" node peta situs tersebut, hingga ke akar (Beranda, di peta situs kami).

Breadcrumb Menampilkan Halaman Saat Ini dan Leluhurnya dalam Hierarki Peta Situs

Gambar 12: Breadcrumb Menampilkan Halaman Saat Ini dan Leluhurnya dalam Hierarki Peta Situs

Langkah 5: Menambahkan Halaman Default untuk Setiap Bagian

Tutorial di situs kami dipecah menjadi berbagai kategori Pelaporan Dasar, Pemfilteran, Pemformatan Kustom, dan sebagainya dengan folder untuk setiap kategori dan tutorial yang sesuai sebagai halaman ASP.NET dalam folder tersebut. Selain itu, setiap folder berisi halaman Default.aspx . Untuk halaman default ini, mari kita tampilkan semua tutorial untuk bagian saat ini. Artinya, untuk Default.aspx di BasicReporting folder kita akan memiliki tautan ke SimpleDisplay.aspx, , DeclarativeParams.aspxdan ProgrammaticParams.aspx. Di sini, sekali lagi, kita dapat menggunakan SiteMap kelas dan kontrol Web data untuk menampilkan informasi ini berdasarkan peta situs yang ditentukan dalam Web.sitemap.

Mari kita tampilkan daftar yang tidak diurutkan menggunakan Repeater lagi, tetapi kali ini kita akan menampilkan judul dan deskripsi tutorial. Karena markup dan kode untuk mencapai hal ini perlu diulang untuk setiap Default.aspx halaman, kita dapat merangkum logika UI ini dalam Kontrol Pengguna. Buat folder di situs web yang disebut UserControls dan tambahkan ke item baru tipe Kontrol Pengguna Web bernama SectionLevelTutorialListing.ascx, dan tambahkan markup berikut:

Menambahkan Kontrol Pengguna Web Baru ke Folder UserControls

Gambar 13: Tambahkan Kontrol Pengguna Web Baru ke UserControls Folder (Klik untuk melihat gambar ukuran penuh)

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

Dalam contoh Repeater sebelumnya, kami mengikat SiteMap data ke Repeater secara deklaratif; SectionLevelTutorialListing Kontrol Pengguna, namun, melakukannya secara terprogram. Di penanganan kejadian Page_Load, pemeriksaan dilakukan untuk memastikan bahwa URL halaman ini dipetakan ke simpul di struktur situs. Jika Kontrol Pengguna ini digunakan di halaman yang tidak memiliki entri yang <siteMapNode> sesuai, SiteMap.CurrentNode akan mengembalikan Nothing dan tidak ada data yang akan diikatkan ke Repeater. Dengan asumsi kami memiliki CurrentNode, kami mengikat koleksi ChildNodes ke Repeater. Karena peta situs kami disiapkan sehingga halaman Default.aspx di setiap bagian adalah simpul induk dari semua tutorial di dalam bagian tersebut, kode ini akan menampilkan tautan dan deskripsi semua tutorial di bagian tersebut, seperti yang ditunjukkan pada cuplikan layar di bawah ini.

Setelah Pengulang ini dibuat, buka halaman Default.aspx di setiap folder, kemudian buka tampilan Desain, dan cukup seret Kontrol Pengguna dari Penjelajah Solusi ke permukaan Desain di lokasi yang Anda inginkan untuk menampilkan daftar tutorial.

Kontrol Pengguna telah Ditambahkan ke Default.aspx

Gambar 14: Kontrol Pengguna telah Ditambahkan ke Default.aspx (Klik untuk melihat gambar ukuran penuh)

Daftar Tutorial Pelaporan Dasar

Gambar 15: Tutorial Pelaporan Dasar tercantum (Klik untuk melihat gambar ukuran penuh)

Ringkasan

Dengan peta situs yang ditentukan dan halaman master selesai, kami sekarang memiliki tata letak halaman yang konsisten dan skema navigasi untuk tutorial terkait data kami. Terlepas dari berapa banyak halaman yang kami tambahkan ke situs kami, memperbarui tata letak halaman seluruh situs atau informasi navigasi situs adalah proses yang cepat dan sederhana karena informasi ini sedang dipusatkan. Secara khusus, informasi tata letak halaman ditentukan di halaman Site.master master dan peta situs di Web.sitemap. Kami tidak perlu menulis kode apa pun untuk mencapai tata letak halaman dan mekanisme navigasi di seluruh situs ini, dan kami mempertahankan dukungan desainer WYSIWYG penuh di Visual Studio.

Setelah menyelesaikan Lapisan Akses Data dan Lapisan Logika Bisnis dan memiliki tata letak halaman yang konsisten dan navigasi situs yang ditentukan, kami siap untuk mulai menjelajahi pola pelaporan umum. Dalam tiga tutorial berikutnya kita akan melihat tugas pelaporan dasar yang menampilkan data yang diambil dari BLL di kontrol GridView, DetailsView, dan FormView.

Selamat Pemrograman!

Bacaan Lebih Lanjut

Untuk informasi selengkapnya tentang topik yang dibahas dalam tutorial ini, lihat sumber daya berikut:

Tentang Penulis

Scott Mitchell, penulis tujuh buku ASP/ASP.NET dan pendiri 4GuysFromRolla.com, telah bekerja sama dengan teknologi Microsoft Web sejak 1998. Scott bekerja sebagai konsultan, pelatih, dan penulis independen. Buku terbarunya adalah Sams Teach Yourself ASP.NET 2.0 dalam 24 Jam. Dia dapat dijangkau di mitchell@4GuysFromRolla.com.

Ucapan terima kasih khusus kepada

Seri tutorial ini ditinjau oleh banyak peninjau yang bermanfaat. Peninjau utama untuk tutorial ini adalah Liz Shulok, Dennis Patterson, dan Hilton Giesenow. Tertarik untuk meninjau artikel MSDN saya yang akan datang? Jika demikian, hubungi saya di mitchell@4GuysFromRolla.com.

Sebelumnya