Birden Çok ContentPlaceHolder ve Varsayılan İçerik (VB)
tarafından Scott Mitchell
Ana sayfaya birden çok içerik yer tutucusu eklemenin yanı sıra içerik yeri sahiplerinde varsayılan içeriğin nasıl belirtileceğini inceler.
Giriş
Önceki öğreticide, ana sayfaların ASP.NET geliştiricilerin tutarlı bir site genelinde düzen oluşturmasına nasıl olanak sağladığını inceledik. Ana sayfalar, tüm içerik sayfaları ve bölgeler için ortak olan ve sayfa sayfa özelleştirilebilen işaretlemeleri tanımlar. Önceki öğreticide basit bir ana sayfa (Site.master) ve iki içerik sayfası (Default.aspx ve About.aspx) oluşturduk. Ana sayfamız sırasıyla öğesinde ve Web Formunda bulunan <head> ve MainContentadlı head iki ContentPlaceHolder'dan oluşuyordu. İçerik sayfalarının her biri iki İçerik denetimine sahip olsa da, yalnızca öğesine karşılık gelen için işaretleme belirttik MainContent.
içindeki Site.masteriki ContentPlaceHolder denetiminde de gösterildiği gibi, bir ana sayfada birden çok ContentPlaceHolder bulunabilir. Dahası, ana sayfa ContentPlaceHolder denetimleri için varsayılan işaretlemeyi belirtebilir. Ardından bir içerik sayfası isteğe bağlı olarak kendi işaretlemesini belirtebilir veya varsayılan işaretlemeyi kullanabilir. Bu öğreticide, ana sayfada birden çok içerik denetiminin kullanımına göz atacağız ve ContentPlaceHolder denetimlerinde varsayılan işaretlemenin nasıl tanımlanacağına bakacağız.
1. Adım: Ana Sayfaya Ek ContentPlaceHolder Denetimleri Ekleme
Birçok web sitesi tasarımı, ekranda sayfa sayfa özelleştirilmiş çeşitli alanlar içerir. Site.master, önceki öğreticide oluşturduğumuz ana sayfa, Web Formu içinde adlı MainContenttek bir ContentPlaceHolder içerir. Özellikle, bu ContentPlaceHolder öğesinde mainContent<div> bulunur.
Şekil 1'de tarayıcı üzerinden görüntülendiğinde gösterilmektedir Default.aspx . Kırmızı daire içine alınmış bölge, öğesine karşılık gelen sayfaya MainContentözgü işaretlemedir.
Şekil 01: Daire içine alınmış Bölge Şu Anda Sayfa Sayfa Özelleştirilebilir Alanı Gösterir (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Şekil 1'de gösterilen bölgeye ek olarak, Dersler ve Haberler bölümlerinin altındaki sol sütuna sayfaya özgü öğeler de eklememiz gerektiğini düşünün. Bunu başarmak için ana sayfaya başka bir ContentPlaceHolder denetimi ekleyeceğiz. Birlikte ilerlemek için, Visual Web Developer'da ana sayfayı açın Site.master ve ardından Bir ContentPlaceHolder denetimini Araç Kutusu'ndan Haberler bölümünden sonra tasarımcıya sürükleyin. ContentPlaceHolder'ları ID olarak LeftColumnContentayarlayın.
Şekil 02: Ana Sayfanın Sol Sütununa ContentPlaceHolder Denetimi Ekleme (Tam boyutlu görüntüyü görüntülemek için tıklayın)
ContentPlaceHolder'ın LeftColumnContent ana sayfaya eklenmesiyle, olarak ayarlanmış LeftColumnContentolan sayfaya ContentPlaceHolderID bir İçerik denetimi ekleyerek bu bölgenin içeriğini sayfa sayfa tanımlayabiliriz. Bu işlemi 2. Adımda inceleyeceğiz.
2. Adım: İçerik Sayfalarında Yeni ContentPlaceHolder için İçerik Tanımlama
Web sitesine yeni bir içerik sayfası eklerken, Visual Web Developer seçilen ana sayfadaki her ContentPlaceHolder için sayfada otomatik olarak bir İçerik denetimi oluşturur. 1. Adımda ana sayfamıza contentplaceholder LeftColumnContent eklendikten sonra, yeni ASP.NET sayfaları artık üç İçerik denetimine sahip olacak.
Bunu göstermek için, ana sayfaya bağlı adlı MultipleContentPlaceHolders.aspx kök dizine Site.master yeni bir içerik sayfası ekleyin. Visual Web Developer bu sayfayı aşağıdaki bildirim temelli işaretlemeyle oluşturur:
<%@ Page Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="MultipleContentPlaceHolders.aspx.vb" Inherits="MultipleContentPlaceHolders" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="LeftColumnContent" Runat="Server">
</asp:Content>
ContentPlaceHolders'a ()Content2 başvuran İçerik denetimine MainContent içerik girin. Ardından, İçerik denetimine (ContentPlaceHolder'a Content3 başvuran) aşağıdaki işaretlemeyi LeftColumnContent ekleyin:
<h3>Page-Specific Content</h3>
<ul>
<li>This content is defined in the content page.</li>
<li>The master page has two regions in the Web Form that are editable on a
page-by-page basis.</li>
</ul>
Bu işaretlemeyi ekledikten sonra tarayıcı üzerinden sayfayı ziyaret edin. Şekil 3'te gösterildiği gibi İçerik denetimine Content3 yerleştirilen işaretleme, Haberler bölümünün altındaki sol sütunda görüntülenir (kırmızı daire içinde). içine yerleştirilen Content2 işaretleme, sayfanın sağ bölümünde görüntülenir (mavi daire içine alınmış).
Şekil 03: Sol Sütunda Artık Haberler Bölümünün Altında Page-Specific İçerik Bulunuyor (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Mevcut İçerik Sayfalarında İçerik Tanımlama
Yeni içerik sayfası oluşturmak, 1. Adımda eklediğimiz ContentPlaceHolder denetimini otomatik olarak içerir. Ancak mevcut iki içerik sayfamız ( About.aspx ve Default.aspx ) ContentPlaceHolder için LeftColumnContent İçerik denetimine sahip değildir. Mevcut iki sayfada bu ContentPlaceHolder'ın içeriğini belirtmek için bir İçerik denetimi eklememiz gerekir.
ASP.NET Web denetimlerinin çoğundan farklı olarak, Visual Web Geliştirici Araç Kutusu İçerik denetim öğesi içermez. İçerik denetiminin bildirim temelli işaretlemesini Kaynak görünümüne el ile yazabiliriz, ancak Tasarım görünümünü kullanmak daha kolay ve hızlı bir yaklaşımdır. Sayfayı About.aspx açın ve Tasarım görünümüne geçin. Şekil 4'te gösterildiği gibi, LeftColumnContent ContentPlaceHolder Tasarım görünümünde görüntülenir; üzerine gelirseniz görüntülenen başlık şu şekildedir: "LeftColumnContent (Ana)." Başlığa "Ana" ifadesinin eklenmesi, bu ContentPlaceHolder için sayfada tanımlanmış bir İçerik denetimi olmadığını gösterir. gibi ContentPlaceHolder için bir İçerik denetimi varsa başlık MainContentşu şekilde olacaktır: "ContentPlaceHolderID (Özel)."
öğesine ContentPlaceHolder About.aspxiçin bir İçerik denetimi eklemek için LeftColumnContent ContentPlaceHolder'ın akıllı etiketini genişletin ve Özel İçerik Oluştur bağlantısına tıklayın.
Şekil 04: ContentPlaceHolder'ı LeftColumnContent Gösteren Tasarım Görünümü About.aspx (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Özel İçerik Oluştur bağlantısına tıklanması, sayfada gerekli İçerik denetimini oluşturur ve özelliğini ContentPlaceHolder'ın IDöğesine ayarlarContentPlaceHolderID. Örneğin, içindeki About.aspx bölge için LeftColumnContent Özel İçerik Oluştur bağlantısına tıklanması, sayfaya aşağıdaki bildirim temelli işaretlemeyi ekler:
<asp:Content ID="Content3" runat="server"
contentplaceholderid="LeftColumnContent">
</asp:Content>
İçerik Denetimlerini Atlama
ASP.NET, tüm içerik sayfalarının ana sayfada tanımlanan her ContentPlaceHolder için İçerik denetimleri içermesini gerektirmez. İçerik denetimi atlanırsa, ASP.NET altyapısı ana sayfadaki ContentPlaceHolder içinde tanımlanan işaretlemeyi kullanır. Bu işaretleme ContentPlaceHolder'ın varsayılan içeriği olarak adlandırılır ve bazı bölgenin içeriğinin sayfaların çoğu arasında yaygın olduğu ancak az sayıda sayfa için özelleştirilmesi gerektiği senaryolarda kullanışlıdır. 3. Adım, ana sayfada varsayılan içeriği belirtmeyi inceler.
Default.aspx Şu anda ve MainContent ContentPlaceHolders için head iki İçerik denetimi içerir; için LeftColumnContentİçerik denetimi yoktur. Sonuç olarak, işlendiğinde Default.aspxLeftColumnContent ContentPlaceHolder'ın varsayılan içeriği kullanılır. Bu ContentPlaceHolder için henüz herhangi bir varsayılan içerik tanımlamadığımız için net etkisi, bu bölge için işaretleme uygulanmamış olmasıdır. Bu davranışı doğrulamak için bir tarayıcı üzerinden ziyaret edin Default.aspx . Şekil 5'te gösterildiği gibi, Haberler bölümünün altındaki sol sütunda hiçbir işaretleme belirtilmez.
Şekil 05: ContentPlaceHolder için LeftColumnContent İçerik İşlenmedi (Tam boyutlu görüntüyü görüntülemek için tıklayın)
3. Adım: Ana Sayfada Varsayılan İçeriği Belirtme
Bazı web sitesi tasarımları, bir veya iki özel durum dışında içeriği sitedeki tüm sayfalar için aynı olan bir bölge içerir. Kullanıcı hesaplarını destekleyen bir web sitesi düşünün. Böyle bir site, ziyaretçilerin sitede oturum açmak için kimlik bilgilerini girebileceği bir oturum açma sayfası gerektirir. Oturum açma işlemini hızlandırmak için, web sitesi tasarımcıları kullanıcıların oturum açma sayfasını açıkça ziyaret etmek zorunda kalmadan oturum açmasına izin vermek için her sayfanın sol üst köşesinde kullanıcı adı ve parola metin kutuları içerebilir. Bu kullanıcı adı ve parola metin kutuları çoğu sayfada yararlı olsa da, kullanıcının kimlik bilgileri için zaten metin kutuları içeren oturum açma sayfasında yedeklidir.
Bu tasarımı uygulamak için, ana sayfanın sol üst köşesinde bir ContentPlaceHolder denetimi oluşturabilirsiniz. Kullanıcı adı ve parola metin kutularının sol üst köşesinde görüntülenmesi gereken her sayfa, bu ContentPlaceHolder için bir İçerik denetimi oluşturur ve gerekli arabirimi ekler. Öte yandan oturum açma sayfası, bu ContentPlaceHolder için İçerik denetimi eklemeyi atlar veya işaretleme tanımlanmamış bir İçerik denetimi oluşturur. Bu yaklaşımın dezavantajı, siteye eklediğimiz her sayfaya kullanıcı adı ve parola metin kutularını eklemeyi hatırlamamız gerekir (oturum açma sayfası hariç). Bu sorun istiyor. Bu metin kutularını bir veya iki sayfaya eklemeyi unutmamız olasıdır veya daha kötüsü arabirimi doğru uygulamayabiliriz (belki de iki yerine yalnızca bir metin kutusu ekleme).
Kullanıcı adı ve parola metin kutularını ContentPlaceHolder'ın varsayılan içeriği olarak tanımlamak daha iyi bir çözümdür. Bunu yaparak, yalnızca kullanıcı adı ve parola metin kutularını (örneğin oturum açma sayfası) görüntülemeyen birkaç sayfada bu varsayılan içeriği geçersiz kılmamız gerekir. ContentPlaceHolder denetimi için varsayılan içerik belirtmeyi göstermek için, şimdi de ele alınan senaryoyu uygulayalım.
Not
Bu öğreticinin geri kalanında web sitemizi, oturum açma sayfası dışında tüm sayfalar için sol sütuna bir oturum açma arabirimi içerecek şekilde güncelleştirir. Ancak bu öğretici, web sitesinin kullanıcı hesaplarını destekleyecek şekilde nasıl yapılandırılmadığını incelemez. Bu konu hakkında daha fazla bilgi için Form Kimlik Doğrulaması, Yetkilendirme, Kullanıcı Hesapları ve Roller öğreticilerime bakın.
ContentPlaceHolder Ekleme ve Varsayılan İçeriğiNi Belirtme
Ana sayfayı Site.master açın ve Etiket ve Dersler bölümü arasında sol sütuna aşağıdaki işaretlemeyi DateDisplay ekleyin:
<asp:ContentPlaceHolder ID="QuickLoginUI" runat="server">
<asp:Login ID="QuickLogin" runat="server"
TitleText="<h3>Sign In</h3>"
FailureAction="RedirectToLoginPage">
</asp:Login>
</asp:ContentPlaceHolder>
Bu işaretlemeyi ekledikten sonra ana sayfanızın Tasarım görünümü Şekil 6'ya benzer görünmelidir.
Şekil 06: Ana Sayfa Oturum Açma Denetimi içerir (tam boyutlu görüntüyü görüntülemek için tıklayın)
Bu ContentPlaceHolder, QuickLoginUIvarsayılan içeriği olarak bir Oturum Açma Web denetimine sahiptir. Oturum Açma denetimi, kullanıcıdan kullanıcı adını ve parolasını isteyen bir kullanıcı arabirimini ve bir Oturum Aç düğmesini görüntüler. Oturum Aç düğmesine tıkladıktan sonra, Oturum açma denetimi kullanıcının kimlik bilgilerini Üyelik API'sine karşı dahili olarak doğrular. Bu Oturum açma denetimini uygulamada kullanmak için sitenizi Üyelik kullanacak şekilde yapılandırmanız gerekir. Bu konu, bu öğreticinin kapsamı dışındadır; kullanıcı hesaplarını destekleyen bir web uygulaması oluşturma hakkında daha fazla bilgi için Form Kimlik Doğrulaması, Yetkilendirme, Kullanıcı Hesapları ve Roller öğreticilerime bakın.
Oturum açma denetiminin davranışını veya görünümünü özelleştirebilirsiniz. özelliklerinden ikisini ayarladım: TitleText ve FailureAction. TitleText Varsayılan olarak "Oturum Aç" olan özellik değeri, denetimin kullanıcı arabiriminin en üstünde görüntülenir. Bu özelliği" Oturum Aç" metnini bir <h3> öğe olarak görüntüleyebilecek şekilde ayarladım. özelliği, FailureAction kullanıcının kimlik bilgileri geçersizse ne yapacağını gösterir. Varsayılan olarak değerini kullanır. Bu değer Refresh, kullanıcıyı aynı sayfada bırakır ve Oturum açma denetiminde bir hata iletisi görüntüler. Geçersiz kimlik bilgileri durumunda kullanıcıyı oturum açma sayfasına gönderen olarak değiştirdim RedirectToLoginPage. Kullanıcı başka bir sayfadan oturum açmayı denediğinde, ancak başarısız olduğunda kullanıcıyı oturum açma sayfasına göndermeyi tercih ediyorum, çünkü oturum açma sayfası sol sütuna kolayca sığmayacak ek yönergeler ve seçenekler içerebilir. Örneğin, oturum açma sayfasında unutulan bir parolayı alma veya yeni bir hesap oluşturma seçenekleri yer alabilir.
Oturum Açma Sayfası Oluşturma ve Varsayılan İçeriği Geçersiz Kılma
Ana sayfa tamamlandığında, sonraki adımımız oturum açma sayfasını oluşturmaktır. Sitenizin kök dizinine adlı Login.aspxbir ASP.NET sayfası ekleyin ve bunu ana sayfaya Site.master bağlayın. Bunu yaptığınızda, içinde tanımlanan Site.masterContentPlaceHolder'ların her biri için bir tane olmak üzere dört İçerik denetimine sahip bir sayfa oluşturulur.
İçerik denetimine MainContent oturum açma denetimi ekleyin. Benzer şekilde, bölgeye herhangi bir içerik eklemekte LeftColumnContent de çekinmeyin. Ancak, ContentPlaceHolder için QuickLoginUI İçerik denetimini boş bıraktığından emin olun. Bu, Oturum açma denetiminin oturum açma sayfasının sol sütununda görünmemesini sağlar.
ve LeftColumnContent bölgelerinin MainContent içeriğini tanımladıktan sonra oturum açma sayfanızın bildirim temelli işaretlemesi aşağıdakine benzer olmalıdır:
<%@ Page Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="Login.aspx.vb" Inherits="Login" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<h2>
Sign In</h2>
<p>
<asp:Login ID="Login1" runat="server" TitleText="">
</asp:Login>
</p>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="QuickLoginUI" Runat="Server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="LeftColumnContent" Runat="Server">
<h3>Sign In Tasks</h3>
<ul>
<li>Create a New Account</li>
<li>Recover Forgotten Password</li>
</ul>
<p>TODO: Turn the above text into links...</p>
</asp:Content>
Şekil 7'de bu sayfa bir tarayıcı üzerinden görüntülendiğinde gösterilmektedir. Bu sayfa ContentPlaceHolder için bir İçerik denetimi belirttiğinden QuickLoginUI , ana sayfada belirtilen varsayılan içeriği geçersiz kılar. Bunun net etkisi, ana sayfanın Tasarım görünümünde görüntülenen Oturum Açma denetiminin (bkz. Şekil 6) bu sayfada işlenmemesidir.
Şekil 07: Oturum Açma Sayfası ContentPlaceHolder'ın Varsayılan İçeriğini Yeniden Bastırıyor QuickLoginUI (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Yeni Sayfalarda Varsayılan İçeriği Kullanma
Oturum Açma sayfası dışındaki tüm sayfalar için sol sütunda Oturum Açma denetimini göstermek istiyoruz. Bunu başarmak için, oturum açma sayfası dışındaki tüm içerik sayfaları ContentPlaceHolder için İçerik denetimini atlamalıdır QuickLoginUI . İçerik denetimini atlayarak ContentPlaceHolder'ın varsayılan içeriği kullanılır.
Mevcut içerik sayfalarımız ( Default.aspx, About.aspxve MultipleContentPlaceHolders.aspx ) için bir İçerik denetimi QuickLoginUI içermez, çünkü bunlar ana sayfaya ContentPlaceHolder denetimini eklemeden önce oluşturulmuştur. Bu nedenle, bu mevcut sayfaların güncelleştirilmesi gerekmez. Ancak, web sitesine eklenen yeni sayfalar varsayılan olarak ContentPlaceHolder için QuickLoginUI bir İçerik denetimi içerir. Bu nedenle, her yeni içerik sayfası eklediğimizde (oturum açma sayfasında olduğu gibi ContentPlaceHolder'ın varsayılan içeriğini geçersiz kılmak istemediğimiz sürece) bu İçerik denetimlerini kaldırmayı unutmamalıyız.
İçerik denetimini kaldırmak için, bildirim temelli işaretlemesini Kaynak görünümünden el ile silebilir veya Tasarım görünümünde akıllı etiketinden Varsayılan olarak Ana İçeriğin İçeriği bağlantısını seçebilirsiniz. Her iki yaklaşım da İçerik denetimini sayfadan kaldırır ve aynı net etkiyi üretir.
Şekil 8'de tarayıcı üzerinden görüntülendiğinde gösterilmektedir Default.aspx . Bildirim temelli işaretlemesinde yalnızca iki İçerik denetiminin Default.aspx belirtildiğini hatırlayın: biri için, diğeri için headMainContent. Sonuç olarak, ve QuickLoginUI ContentPlaceHolders için LeftColumnContent varsayılan içerik görüntülenir.
Şekil 08: ve QuickLoginUI ContentPlaceHolder'lar için LeftColumnContent Varsayılan İçerik Görüntülenir (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Özet
ASP.NET ana sayfa modeli, ana sayfada rastgele sayıda ContentPlaceHolder'a izin verir. Üstelik ContentPlaceHolder'lar, içerik sayfasında karşılık gelen İçerik denetimi olmaması durumunda gösterilen varsayılan içeriği içerir. Bu öğreticide, ana sayfaya ek ContentPlaceHolder denetimleri eklemeyi ve hem yeni hem de mevcut ASP.NET sayfalarında bu yeni ContentPlaceHolders için İçerik denetimleri tanımlamayı gördük. Ayrıca bir ContentPlaceHolder'da varsayılan içeriği belirtmeyi de inceledik. Bu, belirli bir bölgede yalnızca birkaç sayfanın diğer standartlaştırılmış içeriği özelleştirmesi gereken senaryolarda kullanışlıdır.
Sonraki öğreticide ContentPlaceHolder'ı daha ayrıntılı bir şekilde inceleyecek head , başlığı, meta etiketleri ve diğer HTML üst bilgilerini sayfa sayfa temelinde bildirim temelli ve programlı olarak tanımlamayı öğreneceğiz.
Mutlu Programlama!
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(24 Saatte 3.5) kitabıdır. Scott'a adresinden mitchell@4GuysFromRolla.com veya adresinden blogundan http://ScottOnWriting.NETulaşabilirsiniz.
Ö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çireni Suchi Banerjee'ydi. Yaklaşan MSDN makalelerimi gözden geçirmek istiyor musunuz? Öyleyse, bana adresinden bir satır mitchell@4GuysFromRolla.combırakın.
Geri Bildirim
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz. https://aka.ms/ContentUserFeedback.
Gönderin ve geri bildirimi görüntüleyin