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

Scott Mitchell tarafından

Kodu indirin veya PDF 'yi indirin

, İçerik sayfasından ana sayfada assıralanmış <Head> öğelerini tanımlamaya yönelik farklı tekniklere bakar.

Giriş

Visual Studio 2008 ' de oluşturulan yeni ana sayfalar, varsayılan olarak iki ContentPlaceHolder denetimine sahiptir: bir adlandırılmış baş ve <head> öğesinde bulunur; ve bir adlandırılmış ContentPlaceHolder1, Web formu içine yerleştirilmiş. ContentPlaceHolder1 amacı, Web formunda sayfa temelinde özelleştirilebilecek bir bölge tanımlamaktır. ContentPlaceHolder head, sayfaların <head> bölümüne özel içerik eklemesini sağlar. (Kuşkusuz, bu iki Içerik yer tutucusu değiştirilebilir veya kaldırılabilir ve ana sayfaya ek ContentPlaceHolder eklenebilir. Site.masterana sayfamız Şu anda dört ContentPlaceHolder denetimine sahip.)

HTML <head> öğesi, belgenin kendisinin parçası olmayan Web sayfası belgesiyle ilgili bilgiler için bir depo görevi görür. Bu, Web sayfası başlığı, arama motorları veya iç gezginler tarafından kullanılan meta bilgiler ve RSS akışları, JavaScript ve CSS dosyaları gibi dış kaynakların bağlantıları gibi bilgileri içerir. Bu bilgilerden bazıları Web sitesindeki tüm sayfalarla ilgili olabilir. Örneğin, her ASP.NET sayfası için aynı CSS kurallarını ve JavaScript dosyalarını Global olarak içeri aktarmak isteyebilirsiniz. Ancak, sayfaya özgü <head> öğesinin bölümleri vardır. Sayfa başlığı ana bir örnektir.

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

Ana sayfanın<head>bölümü inceleniyor

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

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

<head> öğesinin, bir sunucu denetimi olduğunu (statik HTML yerine) belirten bir runat="server" özniteliği içerdiğine dikkat edin. Tüm ASP.NET sayfaları, System.Web.UI ad alanında bulunan Page sınıfındantüretilir. Bu sınıf, sayfanın <head> bölgesine erişim sağlayan bir Header özelliği içerir. Header özelliğini kullanarak, bir ASP.net sayfanın başlığını ayarlayabilir veya işlenmiş <head> bölümüne ek biçimlendirme ekleyebilirsiniz. Daha sonra, sayfanın Page_Load olay işleyicisine bir kod yazarak bir içerik sayfasının <head> öğesini özelleştirmek mümkündür. Adım 1 ' de sayfanın başlığını programlı olarak ayarlamayı inceleyeceğiz.

Yukarıdaki <head> öğesinde gösterilen biçimlendirme baş adlı bir ContentPlaceHolder denetimi de içerir. İçerik sayfaları program aracılığıyla <head> öğesine özel içerik ekleye, bu ContentPlaceHolder denetimi gerekli değildir. Ancak, bir içerik sayfasının <head> öğesine statik biçimlendirme eklemesi gereken durumlarda, statik biçimlendirme, programlı olarak değil, karşılık gelen Içerik denetimine bildirimli olarak eklenebildiği durumlarda faydalıdır.

<title> öğesine ve baş ContentPlaceHolder 'a ek olarak, ana sayfanın <head> öğesi tüm sayfalarda ortak olan <head>düzeyinde biçimlendirme içermelidir. Web sitemizden tüm sayfalar Styles.css dosyasında tanımlanan CSS kurallarını kullanır. Sonuç olarak, ana sayfalar Ile site genelinde düzen oluşturma öğreticisindeki <head> öğesini, karşılık gelen bir <link> öğesini içerecek şekilde güncelleştirdik. Site.master ana sayfanın geçerli <head> biçimlendirmesi aşağıda gösterilmektedir.

<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: Içerik sayfasının başlığını ayarlama

Web sayfasının başlığı <title> öğesi ile belirtilir. Her bir sayfanın başlığını uygun bir değere ayarlamanız önemlidir. Bir sayfa ziyaret edildiğinde, başlığı tarayıcının başlık çubuğunda görüntülenir. Buna ek olarak, bir sayfanın işaretini kaldırdığınızda, tarayıcılar sayfanın başlığını yer işareti için önerilen ad olarak kullanır. Ayrıca, birçok arama altyapısı, arama sonuçlarını görüntülerken sayfanın başlığını gösterir.

Note

Varsayılan olarak, Visual Studio ana sayfadaki <title> öğesini "Başlıksız sayfa" olarak ayarlar. Benzer şekilde, yeni ASP.NET sayfaları, <title> "Başlıksız sayfa" olarak ayarlanmıştır. Sayfanın başlığını uygun bir değere ayarlamayı kolayca unutabileceğinden, Internet üzerinde "Başlıksız sayfa" başlıklı birçok sayfa vardır. Bu başlıkla Google for Web sayfalarını aramak kabaca 2.460.000 sonuç döndürüyor. Microsoft, "adsız sayfa" başlıklı web sayfalarını yayımlamaya açıktır. Bu yazma sırasında, bir Google Search, Microsoft.com etki alanında 236 Web sayfası raporladı.

Bir ASP.NET sayfası başlığını aşağıdaki yollarla belirtebilir:

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

İçerik sayfalarında, ana sayfada tanımlandığı gibi <title> öğesi yoktur. Bu nedenle, bir içerik sayfasının başlığını ayarlamak için <%@ Page %> yönergesinin Title özniteliğini kullanabilir ya da programlı bir şekilde ayarlayabilirsiniz.

Sayfanın başlığını bildirimli olarak ayarlama

Bir içerik sayfasının başlığı, <%@ Page %> yönergesininTitle özniteliği aracılığıyla bildirimli olarak ayarlanabilir. Bu özellik, <%@ Page %> yönergesinin doğrudan değiştirilerek veya Özellikler penceresi aracılığıyla ayarlanabilir. Her iki yaklaşımdan de bakalım.

Kaynak görünümünden, sayfanın bildirim temelli biçimlendirmesinin en üstünde bulunan <%@ Page %> yönergesini bulun. Default.aspx için <%@ Page %> yönergesi aşağıdadır:

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

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

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

Tarayıcının başlık çubuğunda artık "başlıksız sayfa yerine "ana sayfa öğreticileri" gösteriliyor"

Şekil 01: tarayıcının başlık çubuğu artık "Başlıksız sayfa" yerine "Ana sayfa öğreticileri" gösteriyor

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

Başlığı Özellikler penceresinden de yapılandırabilirsiniz

Şekil 02: başlığı Özellikler penceresinden, aynı şekilde yapılandırabilirsiniz

Sayfanın başlığını programlama yoluyla ayarlama

Ana sayfanın <head runat="server"> biçimlendirmesi, sayfa ASP.NET altyapısı tarafından işlendiğinde bir HtmlHead sınıf örneğine çevrilir. HtmlHead sınıfı, değeri işlenmiş <title> öğesinde yansıtılan bir Title özelliğine sahiptir. Bu özelliğe, Page.Header.Titlearacılığıyla bir ASP.NET sayfasının arka plan kod sınıfından erişilebilir; Ayrıca, bu özelliğe Page.Titlearacılığıyla erişilebilir.

Sayfanın başlığını programlı bir şekilde ayarlamak için About.aspx sayfanın arka plan kod sınıfına gidin ve sayfanın Load olayı için bir olay işleyicisi oluşturun. Sonra, sayfanın başlığını "Ana sayfa öğreticileri:: about:: date" olarak ayarlayın, burada Tarih geçerli tarihtir. Bu kodu ekledikten sonra Page_Load olay işleyiciniz şuna benzer şekilde 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 About.aspx sayfasını ziyaret ederken tarayıcının başlık çubuğunu gösterir.

Sayfanın başlığı programlı olarak ayarlanır ve geçerli tarihi Içerir

Şekil 03: sayfanın başlığı programlı olarak ayarlanır ve geçerli tarihi içerir

2. Adım: otomatik olarak sayfa başlığı atama

1. adımda gördüğünüz gibi, sayfanın başlığı bildirimli olarak veya program aracılığıyla ayarlanabilir. Ancak başlığı daha açıklayıcı bir şekilde değiştirmeyi unutursanız, sayfanız "adsız sayfa" varsayılan başlığına sahip olur. İdeal olarak, kendi değerini açıkça belirttiğimiz olayda, sayfanın başlığı bizim için otomatik olarak ayarlanır. Örneğin, çalışma zamanında sayfanın başlığı "Başlıksız sayfa" ise, başlığın otomatik olarak ASP.NET sayfasının dosya adıyla aynı olması için güncelleştirilmesini isteyebilirsiniz. İyi haber, büyük bir ön çalışmadır. Bu, başlığın otomatik olarak atanmasını olanaklı hale gelir.

Tüm ASP.NET Web sayfaları, System.Web.UI ad alanındaki Page sınıfından türetilir. Page sınıfı, bir ASP.NET sayfası için gereken en düşük işlevselliği tanımlar ve IsPostBack, IsValid, Requestve Responsegibi önemli özellikleri birçok başka konuda gösterir. Bir Web uygulamasındaki her sayfa için ek özellikler veya işlevler gerekir. Bunu sağlamanın yaygın bir yolu, özel bir temel sayfa sınıfı oluşturmaktır. Özel bir temel sayfa sınıfı, Page sınıfından türeten 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 (Page sınıfı değil) ondan türemesini sağlayabilirsiniz ve böylece ASP.NET sayfalarınıza genişletilmiş işlevler sunar.

Bu adımda, başlık başka bir şekilde ayarlanmamışsa, sayfanın başlığını otomatik olarak ASP.NET sayfasının dosya adına ayarlayan bir temel sayfa oluşturuyoruz. 3. adım, site haritasını temel alan sayfanın başlığını ayarlamaya bakar.

Note

Özel temel sayfa sınıfları oluşturma ve kullanma hakkında kapsamlı bir inceleme, bu öğretici serisinin kapsamı dışındadır. Daha fazla bilgi için, ASP.net sayfalarınızın arka plan kod sınıfları Için özel bir temel sınıf kullanarakokuyun.

Taban sayfası sınıfını oluşturma

İlk göreviniz, Page sınıfını genişleten bir sınıf olan temel sayfa sınıfı oluşturmaktır. Çözüm Gezgini proje adına sağ tıklayıp, ASP.NET klasörü Ekle ' yi seçip App_Code' yı seçerek projenize bir App_Code klasörü ekleyerek başlayın. Sonra App_Code klasörüne sağ tıklayın ve BasePage.csadlı yeni bir sınıf ekleyin. Şekil 4 ' te, App_Code klasörden sonra Çözüm Gezgini gösterilmektedir ve BasePage.cs sınıfı eklendikten sonra.

App_Code klasörü ve BasePage adlı bir sınıf ekleyin

Şekil 04: App_Code klasörü ve BasePage adlı bir sınıf ekleme

Note

Visual Studio, iki proje yönetimi modunu destekler: Web sitesi projeleri ve Web uygulaması projeleri. App_Code klasörü, Web sitesi proje modeliyle kullanılmak üzere tasarlanmıştır. Web uygulaması proje modeli kullanıyorsanız, BasePage.cs sınıfını Classesgibi App_Codedışında bir klasöre yerleştirin. Bu konu hakkında daha fazla bilgi için Web sitesi projesini bir Web uygulaması projesine geçirmekonusuna bakın.

Özel temel sayfa, ASP.NET Pages 'in arka plan kod sınıfları için temel sınıf görevi görbildiğinden, Page sınıfını genişlemelidir.

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

}

Bir ASP.NET sayfası istendiğinde, istenen sayfada HTML olarak işlenmekte olan bir dizi aşamadan geçer. Page sınıfının OnEvent yöntemini geçersiz kılarak bir aşamaya dokunabilirsiniz. Taban sayfamız için, LoadComplete aşaması tarafından açıkça belirtilmemişse, başlığı otomatik olarak ayarlayalim (tahmin ettiğiniz gibi, Load aşamasından sonra gerçekleşir).

Bunu gerçekleştirmek için OnLoadComplete yöntemini geçersiz kılın 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);
}

OnLoadComplete yöntemi, Title özelliğinin henüz açık olarak belirlenmediğini belirleyerek başlar. Title Özellik null, boş bir dize veya "Başlıksı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, Request.PhysicalPath özelliği aracılığıyla 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 Page.Title özelliğine atanır.

Note

Başlık biçimini iyileştirmek için sizi bu mantığı geliştirmeye davet ediyorum. Örneğin, sayfanın dosya adı Company-Products.aspx, yukarıdaki kod "şirket-ürünler" başlığını oluşturur, ancak "Şirket ürünleri" içinde olduğu gibi Dash bir boşluk ile yerine geçer. Ayrıca, bir durum değişikliği olduğunda bir boşluk eklemeyi göz önünde bulundurun. Diğer bir deyişle, dosya adını OurBusinessHours.aspx dönüştüren kodu bir "Iş saatlerimiz" başlığına eklemeyi göz önünde bulundurun.

Içerik sayfalarının temel sayfa sınıfını devralmasını

Artık Page sınıfı yerine özel temel sayfadan (BasePage) türetmek için sitemizdeki ASP.NET sayfalarını güncelleştirmeniz gerekiyor. Bunu gerçekleştirmek için, her bir arka plan kod sınıfına gidin ve sınıf bildirimini öğesinden değiştirin:

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

Hedef:

public partial class ClassName : BasePage

Bunu yaptıktan sonra, bir tarayıcı aracılığıyla siteyi ziyaret edin. Default.aspx veya About.aspxgibi başlık açıkça ayarlanmış bir sayfayı ziyaret ederseniz, açıkça belirtilen başlık kullanılır. Ancak, başlığı varsayılan ("Başlıksız sayfa") olan bir sayfayı ziyaret ederseniz, taban sayfası sınıfı başlığı sayfanın dosya adına ayarlar.

Şekil 5 ' te bir tarayıcıdan görüntülendiklerinde MultipleContentPlaceHolders.aspx sayfası gösterilmektedir. Başlığın tam olarak sayfanın dosya adı (uzantı), "Çoğulsuz Contentyertutucuları" şeklinde olduğunu unutmayın.

bir başlık açıkça belirtilmemişse, sayfanın dosya adı otomatik olarak kullanılır

Şekil 05: bir başlık açıkça belirtilmemişse, sayfanın dosya adı otomatik olarak kullanılır (tam boyutlu görüntüyü görüntülemek için tıklatın)

3. Adım: sayfa başlığını site haritasında temel alma

ASP.NET, sayfa geliştiricilerinin bir dış kaynakta (bir XML dosyası veya veritabanı tablosu gibi) hiyerarşik bir site haritası tanımlamasına olanak tanıyan sağlam bir site haritası çerçevesi sunar. Bu, site haritası hakkında bilgi görüntülemek için Web denetimleriyle birlikte (örneğin, Menü ve TreeView denetimleri).

Site Haritası yapısına, bir ASP.NET sayfasının arka plan kod sınıfından de programlı olarak erişilebilir. Bu şekilde, sayfanın başlığını site haritasında karşılık gelen düğümün başlığına otomatik olarak ayarlayabiliriz. Bu işlevi sunabilmesi için 2. adımda oluşturulan BasePage sınıfını geliştirelim. Ancak ilk olarak sitemiz için bir site haritası oluşturmamız gerekiyor.

Note

Bu öğreticide, okuyucunun zaten ASP 'yi öğrenildiği varsayılmaktadır. NET sitesinin harita özellikleri. Site haritasını kullanma hakkında daha fazla bilgi için, bkz. çok parçalı makale serime, ASP 'Yi İnceleme. NET 'in site gezintisi.

Site Haritası oluşturma

Site Haritası sistemi, site haritası API 'sini bellek ve kalıcı bir mağaza arasında site haritası bilgilerini serileştiren mantığa bağlayan, Sağlayıcı modeliinşa edilir. .NET Framework, varsayılan site eşleme sağlayıcısı olan XmlSiteMapProvider sınıfıylabirlikte gelir. Adından da anlaşılacağı gibi, XmlSiteMapProvider, site haritası deposu olarak bir XML dosyası kullanır. Bu sağlayıcıyı site haritamızı tanımlamak için kullanalım.

Web sitesinin Web.sitemapadlı kök klasörde bir site haritası dosyası oluşturarak başlayın. Bunu gerçekleştirmek için, Çözüm Gezgini Web sitesinin adına sağ tıklayın, yeni öğe Ekle ' yi seçin ve Site Haritası şablonunu seçin. Dosyanın Web.sitemap olarak adlandırıldığından emin olun ve Ekle ' ye tıklayın.

Web sitesinin kök klasörüne Web. sitemap adlı bir dosya ekleyin

Şekil 06: Web sitesinin kök klasörüne Web.sitemap adlı bir dosya ekleyin (tam boyutlu görüntüyü görüntülemek için tıklayın)

Aşağıdaki XML 'i Web.sitemap dosyasına 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 haritası yapısını tanımlar.

Site Haritası Şu anda üç site haritası düğümünden oluşturulmuş

Şekil 07: site haritası şu anda üç site haritası düğümünden oluşturulmuş

Yeni örnekler eklediğimiz için ilerideki öğ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ı olduğuna göre, ana sayfayı gezinti Web denetimlerini içerecek şekilde güncellemenize izin verin. Özellikle, site haritasında tanımlanan her düğüm için liste öğesiyle sıralanmamış bir liste oluşturan dersler bölümünde sol sütuna bir ListView denetimi ekleyelim.

Note

ListView denetimi ASP.NET sürüm 3,5 ' e yenidir. ASP.NET 'in önceki bir sürümünü kullanıyorsanız, bunun yerine Yineleyici denetimini kullanın. ListView denetimi hakkında daha fazla bilgi için bkz. ASP.NET 3.5 ListView ve DataPager denetimleri kullanma.

Dersler bölümünden var olan sıralanmamış liste işaretlemesini kaldırarak başlayın. Sonra, araç kutusu ' ndan bir ListView denetimini sürükleyin ve ders başlığının altına bırakın. ListView, diğer görünüm denetimleriyle birlikte araç kutusunun veri bölümünde bulunur: GridView, DetailsView ve FormView. ListView 'un ID özelliğini LessonsListolarak ayarlayın.

Veri kaynağı yapılandırma sihirbazından ListView öğesini LessonsDataSourceadlı yeni bir SiteMapDataSource denetimine bağlamayı seçin. SiteMapDataSource denetimi, site haritası sisteminin hiyerarşik yapısını döndürür.

bir SiteMapDataSource denetimini LessonsList ListView Denetimine bağlama

Şekil 08: LessonsList ListView denetimine bir SiteMapDataSource denetimi bağlama (tam boyutlu görüntüyü görüntülemek için tıklayın)

SiteMapDataSource denetimini oluşturduktan sonra, ListView 'un şablonlarını, SiteMapDataSource denetimi tarafından döndürülen her düğüm için bir liste öğesiyle birlikte sıralanmamış bir liste oluşturmak üzere 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, SiteMapDataSource tarafından döndürülen her öğeyi belirli bir dersin bağlantısını içeren bir liste öğesi (<li>) olarak işlerken ItemTemplate, sıralanmamış bir liste için (<ul>...</ul>) biçimlendirme üretir.

ListView şablonlarını yapılandırdıktan sonra, Web sitesini ziyaret edin. Şekil 9 ' da gösterildiği gibi dersler bölümü, ana öğe içeren tek bir madde işaretli öğesi içerir. , Yaklaşık ve birden çok ContentPlaceHolder denetim dersi kullanıyor? SiteMapDataSource, hiyerarşik bir veri kümesi döndürmek için tasarlanmıştır, ancak ListView denetimi yalnızca hiyerarşinin tek bir düzeyini görüntüleyebilir. Sonuç olarak, yalnızca SiteMapDataSource tarafından döndürülen ilk site haritası düğümü düzeyi görüntülenir.

Dersler bölümü tek bir liste öğesi Içerir

Şekil 09: dersler bölümü tek bir liste öğesi içerir (tam boyutlu görüntüyü görüntülemek için tıklayın)

Birden çok düzeyi göstermek için ItemTemplateiçinde birden çok ListViews iç içe geçirebiliriz. Bu teknik, veri öğreticisi serisi Ile çalışmamın ana sayfalarında ve site gezinti öğreticisinde incelendi. Ancak, bu öğretici serisi için site haritamız yalnızca iki düzey içerir: giriş (en üst düzey); ve her ders evin bir alt öğesi. İç içe geçmiş bir ListView yapmak yerine, ShowStartingNode özelliğini falseolarak ayarlayarak SiteMapDataSource 'un başlangıç düğümünü döndürmamasını isteyebilirsiniz. Net etkisi, site haritası düğümlerinin ikinci katmanını döndürerek SiteMapDataSource 'un başlattığı bir sonucudur.

Bu değişiklik ile, ListView hakkında, ve birden çok ContentPlaceHolder denetim dersi kullanarak, ancak giriş için bir madde işareti öğesi atlar. Bu sorunu gidermek için, LayoutTemplategiriş için açıkça bir madde işareti öğesi 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 'u başlangıç düğümünü atlamak ve açıkça bir giriş madde işareti öğesi eklemek üzere yapılandırarak, dersler bölümü artık amaçlanan çıktıyı görüntüler.

Dersler bölümü, giriş ve her alt düğüm için bir madde Işareti öğesi Içerir

Şekil 10: dersler bölümü, giriş ve her alt düğüm Için bir madde Işareti öğesi içerir (tam boyutlu görüntüyü görüntülemek için tıklayın)

Site Haritası temelinde başlık ayarlama

Site Haritası ile, site haritasında belirtilen başlığı kullanmak için BasePage sınıfınızı güncelleştirebiliriz. 2. adımda, sayfanın başlığı sayfa geliştiricisi tarafından açıkça ayarlanmamışsa, yalnızca site haritası düğümünün başlığını kullanmak istiyoruz. İstenen sayfada açıkça ayarlanmış bir sayfa başlığı yoksa ve site haritasında bulunamazsa, adım 2 ' de yaptığımız gibi, istenen sayfanın dosya adını (uzantıyı azaltır) kullanmaya geri döneceğiz. Şekil 11 ' de bu karar süreci gösterilmektedir.

Açıkça ayarlanmış bir sayfa başlığı yokluğunda, karşılık gelen site haritası düğümünün başlığı kullanılır

Şekil 11: açıkça ayarlanmış bir sayfa başlığı yokluğunda, karşılık gelen site haritası düğümünün başlığı kullanılır

BasePage sınıfının OnLoadComplete 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 OnLoadComplete yöntemi, sayfanın başlığının açıkça ayarlanmış olup olmadığını belirleyerek başlar. Page.Title null, boş bir dize veya "Başlıksız sayfa" değeri atanmışsa, kod otomatik olarak Page.Titlebir değer atar.

Kullanılacak başlığı öğrenmek için, kod SiteMap sınıfının CurrentNode özelliğinebaşvurarak başlatılır. CurrentNode, site haritasında istenen sayfaya karşılık gelen SiteMapNode örneğini döndürür. O sırada istenen sayfanın site haritasında bulunduğu varsayıldığında, SiteMapNode``Title özelliği sayfanın başlığına atanır. Şu anda istenen sayfa site haritasında yoksa, CurrentNode null döndürür ve istenen sayfanın dosya adı başlık olarak kullanılır (adım 2 ' de yapıldığı gibi).

Şekil 12 ' de bir tarayıcıdan görüntülendiklerinde MultipleContentPlaceHolders.aspx sayfası gösterilmektedir. Bu sayfanın başlığı açıkça ayarlanmadığından, bunun yerine karşılık gelen site haritası düğümünün başlığı kullanılır.

Çoğulcontentyertutucuları. aspx sayfasının başlığı site eşlemesinden çekilir

Şekil 12: MultipleContentPlaceHolders.aspx sayfasının başlığı site eşlemesinden çekilir

4. Adım:<head>bölümüne sayfaya özgü diğer biçimlendirmeleri ekleme

Adım 1, 2 ve 3 ' te sayfa temelinde <title> öğesi özelleştiriliyor. <title>ek olarak, <head> bölümü <meta> öğeleri ve <link> öğeleri içerebilir. Bu öğreticide daha önce belirtildiği gibi, Site.master``<head> bölümü Styles.cssiçin bir <link> öğesi içerir. Bu <link> öğesi ana sayfa içinde tanımlandığından, tüm içerik sayfaları için <head> bölümüne dahil edilmiştir. Ancak sayfa temelinde <meta> ve <link> öğeleri ekleme hakkında nasıl gidebiliriz?

<head> bölümüne sayfaya özgü içerik eklemenin en kolay yolu, ana sayfada bir ContentPlaceHolder denetimi oluşturmaktır. Bu tür bir ContentPlaceHolder (adlandırılmış head) zaten var. Bu nedenle, özel <head> biçimlendirme eklemek için sayfada ilgili bir Içerik denetimi oluşturun ve işaretlemeyi buraya yerleştirin.

Sayfaya özel <head> biçimlendirme eklemeyi göstermek için, geçerli içerik sayfası kümesi için bir <meta> açıklama öğesi ekleyelim. <meta> Description öğesi, Web sayfası hakkında kısa bir açıklama sağlar; çoğu arama altyapısı, arama sonuçlarını görüntülerken bu bilgileri bir biçimde birleştirmekte.

<meta> Description öğesi aşağıdaki biçimdedir:

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

Bu biçimlendirmeyi bir içerik sayfasına eklemek için yukarıdaki metni, ana sayfanın baş ContentPlaceHolder öğesine eşlenen Içerik denetimine ekleyin. Örneğin, Default.aspxiçin <meta> açıklama öğesi tanımlamak için aşağıdaki biçimlendirmeyi ekleyin:

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

Baş ContentPlaceHolder, HTML sayfasının gövdesinde olmadığından, Içerik denetimine eklenen biçimlendirme Tasarım görünümü gösterilmez. <meta> Description öğesini bir tarayıcıdan Default.aspx ziyaret edin. Sayfa yüklendikten sonra, kaynağı görüntüleyin ve <head> bölümünün Içerik denetiminde belirtilen biçimlendirmeyi içerdiğini unutmayın.

<meta> Description öğelerini About.aspx, MultipleContentPlaceHolders.aspxve Login.aspxeklemek için bir dakikanızı ayırın.

Program aracılığıyla<head>bölgesine biçimlendirme ekleme

Baş ContentPlaceHolder ana sayfanın <head> bölgesine bildirimli olarak özel biçimlendirme ekleyememize olanak sağlar. Özel biçimlendirme de programlı bir şekilde eklenebilir. Page sınıfının Header özelliğinin ana sayfada tanımlanan HtmlHead örneğini (<head runat="server">) döndürdüğünü hatırlayın.

<head> bölgesine program aracılığıyla içerik ekleyebilmekte olan içerik dinamik olduğunda faydalıdır. Belki de sayfayı ziyaret eden kullanıcıya dayalıdır; Belki de bir veritabanından çekilmekte olabilir. Nedeninden bağımsız olarak, denetimler koleksiyonuna şöyle bir şekilde denetimler ekleyerek HtmlHead 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ı tanımlayan anahtar sözcüklerin virgülle ayrılmış bir listesini sağlayan <head> bölgesine <meta> Keywords öğesi ekler. Bir <meta> etiketi eklemek için HtmlMeta örneği oluşturup Name ve Content özelliklerini ayarlayıp Header``Controls koleksiyonuna ekleyin. Benzer şekilde, programlı olarak bir <link> öğesi eklemek için, bir HtmlLink nesnesi oluşturun, özelliklerini ayarlayın ve ardından Header``Controls koleksiyonuna ekleyin.

Note

Rastgele biçimlendirme eklemek için, bir LiteralControl örneği oluşturun, Text özelliğini ayarlayın ve Header``Controls koleksiyonuna ekleyin.

Özet

Bu öğreticide, sayfa temelinde <head> bölge biçimlendirmesi eklemenin çeşitli yollarına baktık. Ana sayfa, ContentPlaceHolder ile bir HtmlHead örneği (<head runat="server">) içermelidir. HtmlHead örneği, içerik sayfalarının <head> bölgesine ve bildirimli olarak erişmesini ve sayfa başlığını programlı olarak ayarlamanızı sağlar; ContentPlaceHolder denetimi, bir Içerik denetimi aracılığıyla <head> bölümüne bildirimli olarak özel biçimlendirme eklenmesini sağlar.

Programlamanın kutlu olsun!

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 Books ve 4GuysFromRolla.com 'in yazarı Scott Mitchell, 1998 sürümünden bu yana Microsoft Web teknolojileriyle birlikte çalışıyor. Scott bağımsız danışman, Trainer ve yazıcı olarak çalışıyor. En son kitabı, 24 saat içinde ASP.NET 3,5 kendi kendinize eğitimister. Scott 'a mitchell@4GuysFromRolla.com veya blogundan http://ScottOnWriting.NETüzerinden erişilebilir.

Özel olarak teşekkürler

Bu öğretici serisi birçok yararlı gözden geçirenler tarafından incelendi. Bu öğreticiye ilişkin müşteri adayı gözden geçirenler Zack Jones ve suchi Banerjee ' di. Yaklaşan MSDN makalelerimi gözden geçiriyor musunuz? Öyleyse, beni mitchell@4GuysFromRolla.combir satır bırakın.