Aracılığıyla paylaş

Ana Sayfada Başlık, Meta Etiketler ve Diğer HTML Üst Bilgilerini Belirtme (C#)

tarafından Scott Mitchell

PDF’yi İndir

İçerik sayfasından Ana Sayfada çeşitli <baş> öğeleri tanımlamak için farklı tekniklere bakar.

Giriş

Visual Studio 2008'de oluşturulan yeni ana sayfalarda varsayılan olarak iki ContentPlaceHolder denetimi vardır: biri head adlı ve öğesinde <head> bulunan, diğeri ise Web Formu'na yerleştirilen adlı ContentPlaceHolder1. Amacı ContentPlaceHolder1 , Web Formunda sayfa sayfa özelleştirilebilen bir bölge tanımlamaktır. head ContentPlaceHolder, sayfaların bölüme özel içerik eklemesini <head> sağlar. (Elbette, bu iki ContentPlaceHolder değiştirilebilir veya kaldırılabilir ve ana sayfaya ek ContentPlaceHolder eklenebilir. Ana sayfamız olan Site.master, şu anda dört ContentPlaceHolder denetimine sahiptir.)

HTML <head> öğesi, belgenin kendi parçası olmayan web sayfası belgesi hakkında bilgi için bir depo görevi görür. Buna web sayfasının başlığı, arama altyapıları veya iç gezginler tarafından kullanılan meta bilgiler ve RSS akışları, JavaScript ve CSS dosyaları gibi dış kaynaklara bağlantılar dahildir. Bu bilgilerin bazıları web sitesindeki tüm sayfalara uygun olabilir. Örneğin, her ASP.NET sayfası için aynı CSS kurallarını ve JavaScript dosyalarını genel olarak içeri aktarmak isteyebilirsiniz. Ancak, öğenin sayfaya <head> özgü bölümleri vardır. Sayfa başlığı temel bir örnektir.

Bu öğreticide, ana sayfada ve içerik sayfalarında genel ve sayfaya özgü <head> bölüm işaretlemesini tanımlamayı inceleyeceğiz.

Ana Sayfanın<head>Bölümünü inceleme

Visual Studio 2008 tarafından oluşturulan varsayılan ana sayfa dosyası, bölümünde aşağıdaki işaretlemeyi <head> içerir:

<head runat="server">
 <title>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
</head>

öğesinin <head> bir sunucu denetimi (statik HTML yerine) olduğunu belirten bir runat="server" öznitelik içerdiğine dikkat edin. Tüm ASP.NET sayfaları, ad alanında bulunan sınıfından System.Web.UI türetilirPage. Bu sınıf, sayfanın <head> bölgesine erişim sağlayan bir Header özellik içerir. Header özelliğini kullanarak bir ASP.NET sayfasının başlığını ayarlayabilir veya işlenen <head> bölüme başka işaretlemeler ekleyebiliriz. Ardından, sayfanın olay işleyicisine bir miktar kod Page_Load yazarak içerik sayfasının <head> öğesini özelleştirmek mümkündür. 1. Adımda sayfanın başlığını program aracılığıyla ayarlamayı inceleyeceğiz.

Yukarıdaki öğede <head> gösterilen işaretleme, head adlı bir ContentPlaceHolder denetimi de içerir. İçerik sayfaları öğeye program aracılığıyla özel içerik ekleyebildiği için <head> bu ContentPlaceHolder denetimi gerekli değildir. Ancak, bir içerik sayfasının öğeye statik işaretleme eklemesi gerektiğinde yararlıdır çünkü statik işaretleme <head> program aracılığıyla değil ilgili İçerik denetimine bildirimli olarak eklenebilir.

öğesi ve head ContentPlaceHolder'a <title> ek olarak, ana sayfanın <head> öğesi tüm sayfalar için ortak olan herhangi bir <head>düzey işaretlemesi içermelidir. Web sitemizde, tüm sayfalar dosyada Styles.css tanımlanan CSS kurallarını kullanır. Sonuç olarak, Ana Sayfalarla Site-Wide Düzeni Oluşturma öğreticisindeki öğesini ilgili <link> öğeyi içerecek şekilde güncelleştirdik<head>. Ana sayfamızın Site.master geçerli <head> işaretlemesi aşağıda gösterilmiştir.

<head runat="server">
 <title>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
 <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>

1. Adım: İçerik Sayfasının Başlığını Ayarlama

Web sayfasının başlığı öğesi aracılığıyla <title> belirtilir. Her sayfanın başlığını uygun bir değere ayarlamak önemlidir. Sayfayı ziyaret ederken, sayfanın başlığı tarayıcının Başlık çubuğunda görüntülenir. Ayrıca, bir sayfaya yer işareti eklerken tarayıcılar sayfa başlığını yer işareti için önerilen ad olarak kullanır. Ayrıca, birçok arama motoru arama sonuçlarını görüntülerken sayfanın başlığını gösterir.

Not

Varsayılan olarak, Visual Studio ana sayfadaki öğeyi <title> "Adsız Sayfa" olarak ayarlar. Benzer şekilde, yeni ASP.NET sayfaları da "Adsız Sayfa" olarak ayarlanmıştır <title> . Sayfanın başlığını uygun bir değere ayarlamayı unutmak kolay olabileceğinden, İnternet'te "Adsız Sayfa" başlıklı birçok sayfa vardır. Bu başlıkla Google'da web sayfaları aranırken yaklaşık 2.460.000 sonuç döndürülüyor. Microsoft bile web sayfalarını "Adsız Sayfa" başlığıyla yayımlamaya açıktır. Bu yazının yazıldığı sırada, bir Google araması Microsoft.com etki alanında bu tür 236 web sayfası bildirdi.

bir ASP.NET sayfası başlığını aşağıdaki yollardan biriyle belirtebilir:

  • Değeri doğrudan öğesinin <title> içine yerleştirerek
  • yönergesinde Title özniteliğini <%@ Page %> kullanma
  • veya Page.Header.Title="title"gibi Page.Title="title" bir kod kullanarak sayfanın Title özelliğini program aracılığıyla ayarlama.

İçerik sayfalarının ana sayfada tanımlandığı gibi bir <title> öğesi yoktur. Bu nedenle, bir içerik sayfasının başlığını ayarlamak için yönergenin Title özniteliğini <%@ Page %> kullanabilir veya program aracılığıyla ayarlayabilirsiniz.

Sayfanın Başlığını Bildirimli Olarak Ayarlama

İçerik sayfasının başlığı yönergenin<%@ Page %>Title özniteliği aracılığıyla bildirim temelli olarak ayarlanabilir. Bu özellik doğrudan yönergesi <%@ Page %> değiştirilerek veya Özellikler penceresi aracılığıyla ayarlanabilir. Her iki yaklaşıma da göz atalım.

Kaynak görünümünde, sayfanın bildirim temelli işaretlemesinin en üstünde yer alan yönergesini bulun <%@ Page %> . için <%@ Page %> yönergesi Default.aspx şu şekildedir:

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>

yönergesi, <%@ Page %> sayfayı ayrıştırırken ve derlerken ASP.NET altyapısı tarafından kullanılan sayfaya özgü öznitelikleri belirtir. Bu, ana sayfa dosyasını, kod dosyasının konumunu ve başlığını ve diğer bilgileri içerir.

Varsayılan olarak, Visual Studio yeni bir içerik sayfası oluştururken özniteliği Adsız Sayfa olarak ayarlar Title . 'nin Title özniteliğini "Adsız Sayfa" yerine "Ana Sayfa Öğreticileri" olarak değiştirin Default.aspxve ardından sayfayı bir tarayıcı üzerinden görüntüleyin. Şekil 1'de, tarayıcının yeni sayfa başlığını yansıtan Başlık çubuğu gösterilir.

Tarayıcının Başlık Çubuğu artık

Şekil 01: Tarayıcının Başlık Çubuğu artık "Adsız Sayfa" yerine "Ana Sayfa Öğreticileri" gösteriyor

Sayfanın başlığı da Özellikler penceresi ayarlanabilir. Özellikler penceresi, özelliği içeren sayfa düzeyi özelliklerini yüklemek için açılan listeden BELGE'yi Title seçin. Şekil 2'de, "Ana Sayfa Öğreticileri" olarak ayarlandıktan sonra Title Özellikler penceresi gösterilmektedir.

Başlığı Özellikler Penceresinden de Yapılandırabilirsiniz

Şekil 02: Başlığı Özellikler Penceresinden de Yapılandırabilirsiniz

Sayfanın Başlığını Program Aracılığıyla Ayarlama

Ana sayfanın işaretlemesi <head runat="server"> , sayfa ASP.NET altyapısı tarafından işlendiğinde bir HtmlHead sınıf örneğine çevrilir. sınıfı, HtmlHead değeri işlenen <title> öğeye yansıtılan bir Title özelliğe sahiptir. Bu özelliğe aracılığıyla bir ASP.NET sayfasının arka kod sınıfından Page.Header.Titleerişilebilir; aynı özelliğe aracılığıyla Page.Titleda erişilebilir.

Sayfanın başlığını program aracılığıyla ayarlama alıştırması yapmak için, sayfanın arka planda kod sınıfına About.aspx gidin ve sayfanın Load olayı için bir olay işleyicisi oluşturun. Ardından, sayfanın başlığını "Ana Sayfa Öğreticileri :: Hakkında :: tarih" olarak ayarlayın; burada tarih geçerli tarihtir. Bu kodu ekledikten sonra olay işleyiciniz Page_Load aşağıdakine benzer görünmelidir:

protected void Page_Load(object sender, EventArgs e)
{
    Page.Title = string.Format("Master Page Tutorials :: About :: {0:d}", DateTime.Now);
}

Şekil 3'te sayfayı ziyaret ederken tarayıcının About.aspx başlık çubuğu gösterilir.

Sayfanın Başlığı Program Aracılığıyla Ayarlanır ve Geçerli Tarihi içerir

Şekil 03: Sayfanın Başlığı Program Aracılığıyla Ayarlanır ve Geçerli Tarihi Içerir

2. Adım: Sayfa Başlığını Otomatik Olarak Atama

1. Adımda gördüğümüz gibi, sayfanın başlığı bildirim temelli veya programlı olarak ayarlanabilir. Ancak başlığı daha açıklayıcı bir adla değiştirmeyi unutursanız, sayfanız varsayılan "Adsız Sayfa" başlığına sahip olur. İdeal olarak, değerini açıkça belirtmediğimiz durumlarda sayfanın başlığı bizim için otomatik olarak ayarlanır. Örneğin, çalışma zamanında sayfanın başlığı "Adsız Sayfa" ise, başlığın otomatik olarak ASP.NET sayfasının dosya adıyla aynı olacak şekilde güncelleştirilmesini isteyebiliriz. İyi haber, biraz ön çalışmayla başlığın otomatik olarak atanabilir olmasıdır.

Tüm ASP.NET web sayfaları ad alanında sınıfından PageSystem.Web.UI türetilir. sınıfı, Page bir ASP.NET sayfası için gereken en düşük işlevselliği tanımlar ve , IsValid, Requestve Responsegibi IsPostBacktemel özellikleri diğerlerinin yanında kullanıma sunar. Çoğu zaman, bir web uygulamasındaki her sayfa ek özellikler veya işlevler gerektirir. Bunu sağlamanın yaygın yollarından biri, özel bir temel sayfa sınıfı oluşturmaktır. Özel temel sayfa sınıfı, sınıfından Page türetilen ve ek işlevler içeren, oluşturduğunuz bir sınıftır. Bu temel sınıf oluşturulduktan sonra, ASP.NET sayfalarınızın (sınıf yerine Page ) türetilmiş olmasını sağlayabilir ve böylece ASP.NET sayfalarınıza genişletilmiş işlevsellik sunabilirsiniz.

Bu adımda, başlık açıkça ayarlanmamışsa sayfanın başlığını otomatik olarak ASP.NET sayfasının dosya adına ayarlayan bir temel sayfa oluştururuz. 3. adım, site haritasına göre sayfanın başlığını ayarlamaya bakar.

Not

Özel temel sayfa sınıfları oluşturma ve kullanmayla ilgili kapsamlı bir inceleme, bu öğretici serisinin kapsamının dışındadır.

Temel Sayfa Sınıfı Oluşturma

İlk görevimiz, sınıfını genişleten Page bir sınıf olan bir temel sayfa sınıfı oluşturmaktır. başlangıç olarak, Çözüm Gezgini proje adına sağ tıklayıp ASP.NET Klasör Ekle'yi ve ardından öğesini seçerek App_Codeprojenize bir App_Code klasör ekleyin. Ardından, klasöre App_Code sağ tıklayın ve adlı BasePage.csyeni bir sınıf ekleyin. Şekil 4'de klasör ve BasePage.cs sınıf eklendikten sonra Çözüm Gezgini App_Code gösterilmektedir.

App_Code Klasörü ve BasePage Adlı Bir Sınıf Ekleme

Şekil 04: Klasör App_Code ve Adlı Sınıf Ekleme BasePage

Not

Visual Studio iki proje yönetimi modunu destekler: Web Sitesi Projeleri ve Web Uygulaması Projeleri. Klasör App_Code , Web Sitesi Projesi modeliyle kullanılacak şekilde tasarlanmıştır. Web Uygulaması Projesi modelini kullanıyorsanız sınıfını BasePage.cs gibi Classesdışında App_Codebir adla adlandırılan bir klasöre yerleştirin. Bu konu hakkında daha fazla bilgi için bkz. Web Sitesi Projesini Web Uygulaması Projesine Geçirme.

Özel temel sayfa, ASP.NET sayfaların arka planda kod sınıfları için temel sınıf olarak hizmet ettiğinden, sınıfını genişletmesi Page gerekir.

public class BasePage : System.Web.UI.Page
{

}

bir ASP.NET sayfası istenildiğinde, bir dizi aşamada ilerler ve istenen sayfanın HTML olarak işlenmesini sağlar. Sınıfın OnEvent yöntemini geçersiz kılarak bir aşamaya Page dokunabiliriz. Temel sayfamız için, aşama tarafından LoadComplete açıkça belirtilmemişse başlığı otomatik olarak ayarlayalım (tahmin ettiğiniz gibi, aşamadan Load sonra gerçekleşir).

Bunu yapmak için yöntemini geçersiz kılın OnLoadComplete ve aşağıdaki kodu girin:

protected override void OnLoadComplete(EventArgs e)
{
    // Set the page's title, if necessary
    if (string.IsNullOrEmpty(Page.Title) || Page.Title == "Untitled Page")
    {
        // Determine the filename for this page
        string fileName = System.IO.Path.GetFileNameWithoutExtension(Request.PhysicalPath);

        Page.Title = fileName;
    }

    base.OnLoadComplete(e);
}

yöntemi, OnLoadComplete özelliğin Title henüz açıkça ayarlanmadığını belirleyerek başlar. Title özelliği nullboş bir dizeyse veya "Adsız Sayfa" değerine sahipse, istenen ASP.NET sayfasının dosya adına atanır. İstenen ASP.NET sayfasının fiziksel yoluna ( C:\MySites\Tutorial03\Login.aspxörneğin) özelliği aracılığıyla Request.PhysicalPath erişilebilir. Path.GetFileNameWithoutExtension yöntemi yalnızca dosya adı bölümünü çekmek için kullanılır ve bu dosya adı daha sonra özelliğine Page.Title atanır.

Not

Başlığın biçimini geliştirmek için sizi bu mantığı geliştirmeye davet ediyorum. Örneğin, sayfanın dosya adı ise Company-Products.aspxyukarıdaki kod "Şirket-Ürünler" başlığını üretir, ancak çizginin yerine "Şirket Ürünleri" gibi bir boşluk koyabilirsiniz. Ayrıca, büyük/küçük harf değişikliği olduğunda boşluk eklemeyi de göz önünde bulundurun. Yani, dosya adını OurBusinessHours.aspx "İş Saatlerimiz" başlığına dönüştüren kod eklemeyi göz önünde bulundurun.

İçerik Sayfalarının Temel Sayfa Sınıfını Devralması

Şimdi sitemizdeki ASP.NET sayfalarını sınıf yerine Page özel temel sayfadan (BasePage) türetecek şekilde güncelleştirmemiz gerekiyor. Bunu gerçekleştirmek için arka planda kod içeren her sınıfa gidin ve sınıf bildirimini şu şekilde değiştirin:

public partial class ClassName : System.Web.UI.Page

Hedef:

public partial class ClassName : BasePage

Bunu yaptıktan sonra, tarayıcı üzerinden siteyi ziyaret edin. Başlığı veya About.aspxgibi Default.aspx açıkça ayarlanmış bir sayfayı ziyaret ederseniz, açıkça belirtilen başlık kullanılır. Bununla birlikte, başlığı varsayılandan ("Adsız Sayfa") değiştirilmemiş bir sayfayı ziyaret ederseniz, temel sayfa sınıfı başlığı sayfanın dosya adına ayarlar.

Şekil 5'te MultipleContentPlaceHolders.aspx , bir tarayıcı üzerinden görüntülendiğinde sayfa gösterilir. Başlığın tam olarak sayfanın dosya adı (daha az uzantı), "MultipleContentPlaceHolders" olduğuna dikkat edin.

Başlık Açıkça Belirtilmezse, Sayfanın Dosya Adı Otomatik Olarak Kullanılır

Şekil 05: Başlık Açıkça Belirtilmezse, Sayfanın Dosya Adı Otomatik Olarak Kullanılır (Tam boyutlu görüntüyü görüntülemek için tıklayın)

3. Adım: Site Haritasında Sayfa Başlığını Temel Alma

ASP.NET, sayfa geliştiricilerinin bir dış kaynakta (XML dosyası veya veritabanı tablosu gibi) hiyerarşik bir site haritası tanımlamasını ve site haritası hakkındaki bilgileri görüntülemek için Web denetimlerini (SiteMapPath, Menü ve TreeView denetimleri gibi) sağlayan sağlam bir site haritası çerçevesi sunar.

Site haritası yapısına bir ASP.NET sayfasının arka planda kod sınıfından program aracılığıyla da erişilebilir. Bu şekilde, bir sayfanın başlığını otomatik olarak site haritasındaki ilgili düğümünün başlığına ayarlayabiliriz. Şimdi bu işlevselliği sunması için 2. Adımda oluşturulan sınıfı geliştirelim BasePage . Ancak önce sitemiz için bir site haritası oluşturmamız gerekiyor.

Not

Bu öğreticide okuyucunun ASP hakkında zaten bilgi sahibi olduğu varsayılır. NET'in site haritası özellikleri. Site haritasını kullanma hakkında daha fazla bilgi için ASP'yi inceleme başlıklı çok bölümlü makale serime bakın . NET'in Site Gezintisi.

Site Haritası Oluşturma

Site haritası sistemi, site haritası API'sini bellek ve kalıcı bir depo arasında site haritası bilgilerini seri hale getiren mantıktan ayıran sağlayıcı modelinin üzerinde oluşturulur. .NET Framework, varsayılan site haritası sağlayıcısı olan sınıfıyla birlikteXmlSiteMapProvider gösterilir. Adından da anlaşılacağı gibi, XmlSiteMapProvider site eşleme deposu olarak bir XML dosyası kullanır. Şimdi bu sağlayıcıyı site haritamızı tanımlamak için kullanalım.

Web sitesinin kök klasöründe adlı Web.sitemapbir site haritası dosyası oluşturarak başlayın. Bunu yapmak için, Çözüm Gezgini web sitesi adına sağ tıklayın, Yeni Öğe Ekle'yi seçin ve Site Haritası şablonunu seçin. Dosyanın adlandırılmış Web.sitemap olduğundan emin olun ve Ekle'ye tıklayın.

Web Sitesinin Kök Klasörüne Web.site haritası Adlı Bir Dosya Ekleme

Şekil 06: Web Sitesinin Kök Klasörüne Adlı Web.sitemap Bir Dosya Ekleme (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Dosyaya aşağıdaki XML'yi Web.sitemap ekleyin:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
 <siteMapNode url="~/Default.aspx" title="Home">
 <siteMapNode url="~/About.aspx" title="About the Author" />
 <siteMapNode url="~/MultipleContentPlaceHolders.aspx" title="Using Multiple ContentPlaceHolder Controls" />
 </siteMapNode>
</siteMap>

Bu XML, Şekil 7'de gösterilen hiyerarşik site eşleme yapısını tanımlar.

Site Haritası şu anda Üç Site Haritası Düğümünden oluşuyor

Şekil 07: Site Haritası şu anda Üç Site Haritası Düğümünden oluşuyor

Yeni örnekler eklerken sonraki öğreticilerde site haritası yapısını güncelleştireceğiz.

Ana Sayfayı Gezinti Web Denetimlerini Içerecek Şekilde Güncelleştirme

Artık tanımlanmış bir site haritasına sahip olduğumuza göre, ana sayfayı gezinti Web denetimlerini içerecek şekilde güncelleştirelim. Özellikle, Dersler bölümündeki sol sütuna, site haritasında tanımlanan her düğüm için bir liste öğesiyle sıralanmamış bir liste oluşturan bir ListView denetimi ekleyelim.

Not

ListView denetimi, ASP.NET sürüm 3.5'e yeni eklendi. ASP.NET önceki bir sürümünü kullanıyorsanız bunun yerine Repeater denetimini kullanın.

Dersler bölümünden mevcut sıralanmamış liste işaretlemesini kaldırarak başlayın. Ardından, Araç Kutusu'ndan bir ListView denetimini sürükleyin ve Dersler başlığının altına bırakın. ListView, Diğer görünüm denetimleriyle birlikte Araç Kutusu'nun Veri bölümünde bulunur: GridView, DetailsView ve FormView. ListView'un Id özelliğini olarak LessonsListayarlayın.

Veri Kaynağı Yapılandırma Sihirbazı'ndan ListView'u adlı LessonsDataSourceyeni bir Site HaritasıDataSource denetimine bağlamayı seçin. SiteMapDataSource denetimi, site haritası sisteminden hiyerarşik yapıyı döndürür.

LessonsList ListView Denetimine SiteMapDataSource Denetimi Bağlama

Şekil 08: SiteMapDataSource Denetimini ListView Denetimine LessonsList Bağlama (Tam boyutlu görüntüyü görüntülemek için tıklayın)

SiteMapDataSource denetimini oluşturduktan sonra, SiteMapDataSource denetimi tarafından döndürülen her düğüm için liste öğesiyle sıralanmamış bir liste oluşturacak şekilde ListView şablonlarını tanımlamamız gerekir. Bu, aşağıdaki şablon işaretlemesi kullanılarak gerçekleştirilebilir:

<asp:ListView ID="LessonsList" runat="server" DataSourceID="LessonsDataSource">
 <LayoutTemplate>
 <ul>
 <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
 </ul>
 </LayoutTemplate>
 
 <ItemTemplate>
 <li><asp:HyperLink runat="server" ID="lnkLesson" NavigateUrl='<%# Eval("Url") %>'
 Text='<%# Eval("Title") %>' /></li>
 </ItemTemplate>
</asp:ListView>

, LayoutTemplate sıralamasız liste (<ul>...</ul>) için işaretlemeyi oluştururken ItemTemplate , SiteMapDataSource tarafından döndürülen her öğeyi, belirli bir derse bağlantı içeren bir liste öğesi (<li>) olarak işler.

ListView şablonlarını yapılandırdıktan sonra web sitesini ziyaret edin. Şekil 9'da gösterildiği gibi, Dersler bölümünde tek bir madde işaretli öğe (Giriş) bulunur. Hakkında ve Birden Çok ContentPlaceHolder Denetimi Kullanma dersleri nerede? SiteMapDataSource hiyerarşik bir veri kümesi döndürecek şekilde tasarlanmıştır, ancak ListView denetimi hiyerarşinin yalnızca tek bir düzeyini görüntüleyebilir. Sonuç olarak, site haritası düğümlerinin yalnızca Site HaritasıDataSource tarafından döndürülen ilk düzeyi görüntülenir.

Dersler Bölümü Tek Bir Liste Öğesi İçerir

Şekil 09: Dersler Bölümü Tek Liste Öğesi İçerir (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Birden çok düzeyi görüntülemek için içinde birden çok ListView ItemTemplateiç içe yerleştirebiliriz. Bu teknik, Verilerle Çalışma öğreticisi seriminAna Sayfalar ve Site Gezintisi öğreticisinde incelendi. Ancak, bu öğretici serisi için site haritamız yalnızca iki düzey içerecektir: Giriş (en üst düzey); ve her dersi Ev'in bir çocuğu olarak. İç içe bir ListView oluşturmak yerine, SiteMapDataSource'a özelliğini falseolarak ayarlayarak başlangıç düğümünü ShowStartingNode döndürmemesi talimatını verebiliriz. Bunun net etkisi, SiteMapDataSource'un site haritası düğümlerinin ikinci katmanını döndürerek başlamasıdır.

Bu değişiklikle, ListView Hakkında ve Birden Çok ContentPlaceHolder Denetimi Kullanma derslerinin madde işaretlerini görüntüler, ancak Giriş için madde işareti öğesini atlar. Bunu düzeltmek için, içinde Giriş LayoutTemplateiçin açıkça bir madde işareti ekleyebiliriz:

<LayoutTemplate>
 <ul>
 <li><asp:HyperLink runat="server" ID="lnkLesson"
 NavigateUrl="~/Default.aspx" Text="Home" /></li>
 <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
 </ul>
</LayoutTemplate>

SiteMapDataSource'ı başlangıç düğümünü atacak şekilde yapılandırarak ve giriş madde işareti öğesini açıkça ekleyerek, Dersler bölümü artık istenen çıkışı görüntüler.

Dersler Bölümü Ev ve Her Alt Düğüm için Madde İşareti Öğesi İçerir

Şekil 10: Dersler Bölümü Ev ve Her Alt Düğüm için Madde İşareti Öğesi İçerir (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Site Haritasına Göre Başlık Ayarlama

Site haritası mevcutken, sınıfımızı BasePage site haritasında belirtilen başlığı kullanacak şekilde güncelleştirebiliriz. 2. Adımda yaptığımız gibi, yalnızca sayfanın başlığı sayfa geliştiricisi tarafından açıkça ayarlanmamışsa site haritası düğümünü kullanmak istiyoruz. İstenen sayfanın açıkça ayarlanmış bir sayfa başlığı yoksa ve site haritasında bulunamazsa, 2. Adımda yaptığımız gibi istenen sayfanın dosya adını (daha az uzantı) kullanmaya geri döneriz. Şekil 11'de bu karar süreci gösterilmektedir.

Açıkça Ayarlanmış Bir Sayfa Başlığı Olmadığında, İlgili Site Haritası Düğümünün Başlığı Kullanılır

Şekil 11: Açıkça Ayarlanmış Bir Sayfa Başlığı Olmadığında, İlgili Site Haritası Düğümünün Başlığı Kullanılır

Sınıfın BasePageOnLoadComplete yöntemini aşağıdaki kodu içerecek şekilde güncelleştirin:

protected override void OnLoadComplete(EventArgs e)
{
    // Set the page's title, if necessary
    if (string.IsNullOrEmpty(Page.Title) || Page.Title == "Untitled Page")
    {
        // Is this page defined in the site map?
        string newTitle = null;

        SiteMapNode current = SiteMap.CurrentNode;
        if (current != null)
        {
            newTitle = current.Title;
        }
        else
        {
            // Determine the filename for this page
            newTitle = System.IO.Path.GetFileNameWithoutExtension(Request.PhysicalPath);
        }

        Page.Title = newTitle;
    }

    base.OnLoadComplete(e);
}

Daha önce olduğu gibi yöntemi, OnLoadComplete sayfanın başlığının açıkça ayarlanıp ayarlanmadığını belirleyerek başlar. isenull, boş bir dizeyse veya "Adsız Sayfa" değeri atanmışsaPage.Title, kod otomatik olarak öğesine Page.Titlebir değer atar.

Kullanılacak başlığı belirlemek için kod, sınıfın CurrentNode özelliğineSiteMap başvurarak başlar. CurrentNode SiteMapNode, site haritasında şu anda istenen sayfaya karşılık gelen örneği döndürür. şu anda istenen sayfanın site haritasında bulunduğu varsayıldığında, SiteMapNode'nin Title özelliği sayfanın başlığına atanır. Şu anda istenen sayfa site haritasında değilse, CurrentNode döndürür null ve istenen sayfanın dosya adı başlık olarak kullanılır (2. Adımda olduğu gibi).

Şekil 12'de MultipleContentPlaceHolders.aspx , bir tarayıcı üzerinden görüntülendiğinde sayfa gösterilir. Bu sayfanın başlığı açıkça ayarlanmadığı için, bunun yerine ilgili site haritası düğümünü başlığı kullanılır.

MultipleContentPlaceHolders.aspx Sayfasının Başlığı Site Haritasından Çekilir

Şekil 12: MultipleContentPlaceHolders.aspx Sayfanın Başlığı Site Haritasından Çekilir

4. Adım: Bölüme Diğer Page-Specific İşaretlemeyi<head>Ekleme

1, 2 ve 3. adımlarda öğeyi <title> sayfa sayfa özelleştirme adımlarına bakılır. bölümüne ek olarak<title>, <head> bölümünde öğeler ve <link> öğeler bulunabilir<meta>. Bu öğreticide daha önce belirtildiği gibi' Site.master<head> bölümünde öğesine Styles.cssbir <link> öğesi yer almaktadır. Bu <link> öğe ana sayfa içinde tanımlandığından, tüm içerik sayfalarının <head> bölümüne eklenir. Peki ve öğelerini sayfa sayfa eklemeye <meta><link> nasıl devam edeceğiz?

Bölüme sayfaya özgü içerik eklemenin <head> en kolay yolu, ana sayfada contentplaceholder denetimi oluşturmaktır. Zaten böyle bir ContentPlaceHolder'a (adlı) headsahibiz. Bu nedenle, özel <head> işaretleme eklemek için sayfada karşılık gelen bir İçerik denetimi oluşturun ve işaretlemeyi buraya yerleştirin.

Bir sayfaya özel <head> işaretleme eklemeyi göstermek için geçerli içerik sayfalarımıza bir <meta> açıklama öğesi ekleyelim. <meta> description öğesi web sayfası hakkında kısa bir açıklama sağlar; çoğu arama motoru, arama sonuçlarını görüntülerken bu bilgileri bir biçimde birleştirir.

Bir <meta> description öğesi aşağıdaki forma sahiptir:

<meta name="description" content="description of the web page" />

Bu işaretlemeyi bir içerik sayfasına eklemek için, yukarıdaki metni ana sayfanın baş ContentPlaceHolder'ı ile eşleyen İçerik denetimine ekleyin. Örneğin, için bir <meta> açıklama öğesi tanımlamak için Default.aspxaşağıdaki işaretlemeyi ekleyin:

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
 <meta name="description" content="Welcome to Scott Mitchell's Master Page Tutorials series." />
</asp:Content>

Head ContentPlaceHolder HTML sayfasının gövdesinde olmadığından İçerik denetimine eklenen işaretleme Tasarım görünümünde görüntülenmez. Açıklama öğesini görmek <meta> için tarayıcıyı ziyaret Default.aspx edin. Sayfa yüklendikten sonra kaynağı görüntüleyin ve bölümün <head> İçerik denetiminde belirtilen işaretlemeyi içerdiğini unutmayın.

, MultipleContentPlaceHolders.aspxve Login.aspxöğesine açıklama öğeleri eklemek <meta> için About.aspxbiraz zaman ayırın.

ProgramaTik Olarak Bölgeye İşaretlemeyi<head>Ekleme

Head ContentPlaceHolder, ana sayfanın <head> bölgesine bildirimli olarak özel işaretleme eklememizi sağlar. Özel işaretleme program aracılığıyla da eklenebilir. Sınıfın özelliğinin Page ana sayfada (<head runat="server">the ) tanımlanan örneği döndürdüğünü HtmlHead hatırlayın.Header

Eklenecek içerik dinamik olduğunda bölgeye program aracılığıyla içerik <head> ekleyebilmek yararlıdır. Belki de sayfayı ziyaret eden kullanıcıyı temel alır; Belki de bir veritabanından çekiliyor. Nedeni ne olursa olsun, Denetimler koleksiyonuna HtmlHead aşağıdaki gibi denetimler ekleyerek öğesine içerik ekleyebilirsiniz:

// Programmatically add a <meta> element to the Header
HtmlMeta keywords = new HtmlMeta();
keywords.Name = "keywords";
keywords.Content = "master page,asp.net,tutorial";

Page.Header.Controls.Add(keywords);

Yukarıdaki kod, sayfayı <meta> açıklayan anahtar sözcüklerin <head> virgülle ayrılmış bir listesini sağlayan anahtar sözcükler öğesini bölgeye ekler. Etiket eklemek için bir <meta>HtmlMeta örnek oluşturduğunuza, ve ContentName özelliklerini ayarladığınıza ve ardından 'nin Controls koleksiyonuna eklediğinize Headerdikkat edin. Benzer şekilde, program aracılığıyla bir <link> öğe eklemek için bir HtmlLink nesne oluşturun, özelliklerini ayarlayın ve ardından öğesinin Controls koleksiyonuna Headerekleyin.

Not

Rastgele işaretleme eklemek için bir LiteralControl örnek oluşturun, özelliğini ayarlayın Text ve ardından 'nin Controls koleksiyonuna Headerekleyin.

Özet

Bu öğreticide, sayfa sayfa temelinde bölge işaretlemesi eklemenin <head> çeşitli yollarını inceledik. Ana sayfada ContentPlaceHolder içeren bir HtmlHead örnek (<head runat="server">) bulunmalıdır. Örnek HtmlHead , içerik sayfalarının <head> bölgeye program aracılığıyla erişmesine ve sayfanın başlığını bildirimli ve programlı olarak ayarlamasına olanak tanır. ContentPlaceHolder denetimi, özel işaretlemenin <head> bir İçerik denetimi aracılığıyla bölüme bildirim temelli olarak eklenmesini sağlar.

Mutlu Programlama!

Daha Fazla Bilgi

Bu öğreticide ele alınan konular hakkında daha fazla bilgi için aşağıdaki kaynaklara bakın:

Yazar hakkında

Birden çok ASP/ASP.NET kitabının yazarı ve 4GuysFromRolla.com kurucusu Scott Mitchell, 1998'den beri Microsoft Web teknolojileriyle çalışmaktadır. Scott bağımsız bir danışman, eğitmen ve yazar olarak çalışmaktadır. Son kitabı Sams Teach Yourself ASP.NET 3.5 in 24 Hours. Scott'a adresinden mitchell@4GuysFromRolla.com veya adresinden blogu http://ScottOnWriting.NETaracılığıyla ulaşılabilir.

Özel Teşekkürler

Bu öğretici serisi birçok yararlı gözden geçiren tarafından gözden geçirildi. Bu öğreticinin baş gözden geçirenleri Zack Jones ve Suchi Banerjee'ydi. Yaklaşan MSDN makalelerimi gözden geçirmek istiyor musunuz? Öyleyse, bana bir satır mitchell@4GuysFromRolla.combırakın.

ÖncekiSonraki