Ana Sayfalar

Microsoft tarafından

Başarılı bir Web sitesinin önemli bileşenlerinden biri tutarlı bir görünüm ve histir. ASP.NET 1.x'te, geliştiriciler ortak sayfa öğelerini bir Web uygulamasına çoğaltmak için kullanıcı denetimlerini kullandı. Bu kesinlikle uygulanabilir bir çözüm olsa da, kullanıcı denetimlerini kullanmanın bazı dezavantajları vardır. Örneğin, kullanıcı denetiminin konumundaki bir değişiklik, site genelinde birden çok sayfada değişiklik yapılmasını gerektirir. Kullanıcı denetimleri, sayfaya eklendikten sonra Tasarım görünümünde de işlenmez.

Başarılı bir Web sitesinin önemli bileşenlerinden biri tutarlı bir görünüm ve histir. ASP.NET 1.x'te, geliştiriciler ortak sayfa öğelerini bir Web uygulamasına çoğaltmak için kullanıcı denetimlerini kullandı. Bu kesinlikle uygulanabilir bir çözüm olsa da, kullanıcı denetimlerini kullanmanın bazı dezavantajları vardır. Örneğin, kullanıcı denetiminin konumundaki bir değişiklik, site genelinde birden çok sayfada değişiklik yapılmasını gerektirir. Kullanıcı denetimleri, sayfaya eklendikten sonra Tasarım görünümünde de işlenmez.

ASP.NET 2.0, tutarlı bir görünüm ve hissi korumanın bir yolu olarak Ana sayfaları tanıtır ve yakında göreceğiniz gibi Ana sayfalar, kullanıcı denetim yöntemi üzerinde önemli bir gelişmeyi temsil eder.

Neden Ana Sayfalar?

ASP.NET 2.0'da ana sayfaların neden gerekli olduğunu merak ediyor olabilirsiniz. Sonuçta, Web sitesi geliştiricileri içerik alanlarını sayfalar arasında paylaşmak için ASP.NET 1.x'teki kullanıcı denetimlerini zaten kullanıyor. Aslında, kullanıcı denetimlerinin ortak bir düzen oluşturmak için en uygun çözümden daha azı olmasının çeşitli nedenleri vardır.

Kullanıcı denetimleri aslında sayfa düzenini tanımlamaz. Bunun yerine, sayfanın bir bölümü için düzeni ve işlevselliği tanımlar. Kullanıcı denetimi çözümünün yönetilebilirliğini çok daha zor hale getirdiğinden bu ikisi arasındaki ayrım önemlidir. Örneğin, bir kullanıcı denetiminin sayfanızdaki konumunu değiştirmek istediğinizde, kullanıcı denetiminin göründüğü asıl sayfayı düzenlemeniz gerekir. Sadece birkaç sayfanız varsa, ancak büyük sitelerde, hızla bir site yönetimi kabusu haline gelir!

Ortak bir düzen tanımlamak için kullanıcı denetimlerini kullanmanın bir diğer dezavantajı da ASP.NET mimarisidir. Bir kullanıcı denetiminin herhangi bir genel üyesi değiştirilirse, kullanıcı denetimini kullanan tüm sayfaları yeniden derlemeniz gerekir. Buna karşılık, ASP.NET ilk erişildiğinde sayfalarınızı yeniden JIT'ler. Bu da daha büyük siteler için ölçeklenebilir olmayan bir mimari ve site yönetimi sorunu oluşturur.

Bu sorunların (ve daha birçoğunun) her ikisi de ASP.NET 2.0'daki ana sayfalar tarafından güzel bir şekilde ele alınmaktadır.

Ana Sayfalar Nasıl Çalışır?

Ana sayfa, diğer sayfalar için bir şablona benzer. Diğer sayfalar arasında paylaşılması gereken sayfa öğeleri (menüler, kenarlıklar vb.) ana sayfaya eklenir. Siteye yeni sayfalar eklendiğinde, bunları bir ana sayfayla ilişkilendirebilirsiniz. Ana sayfayla ilişkilendirilmiş sayfaya içerik sayfası adı verilir. Varsayılan olarak, içerik sayfası görünümü ana sayfadan alır. Ancak, bir ana sayfa oluşturduğunuzda, içerik sayfasının kendi içeriğiyle değiştirebileceği sayfa bölümlerini tanımlayabilirsiniz. Bu bölümler, ASP.NET 2.0'da kullanıma sunulan yeni bir denetim kullanılarak tanımlanır; ContentPlaceHolder denetimi.

Ana sayfa, herhangi bir sayıda ContentPlaceHolder denetimi içerebilir (veya hiç içeremez.) İçerik sayfasında ContentPlaceHolder denetimlerinden alınan içerik, ASP.NET 2.0'daki başka bir yeni denetim olan İçerik denetimlerinin içinde görünür. Varsayılan olarak, içerik sayfaları İçerik denetimleri boş olduğundan kendi içeriğinizi sağlayabilirsiniz. İçerik denetimlerinin içindeki ana sayfadaki içeriği kullanmak istiyorsanız, bu modülün ilerleyen bölümlerinde göreceğiniz gibi bunu yapabilirsiniz. İçerik denetimi, İçerik denetiminin ContentPlaceHolderID özniteliği aracılığıyla ContentPlaceHolder denetimine eşlenir. Aşağıdaki kod, bir İçerik denetimini ana sayfadaki mainBody adlı ContentPlaceHolder denetimiyle eşler.

<asp:Content ID="Content1" ContentPlaceHolderID="mainBody" Runat="Server">

Şekil 1'de , Visual Studio 2005'te görüntülenen ana sayfa ve ilişkili içerik sayfası gösterilmektedir. Ana sayfada ContentPlaceHolder denetimini ve içerik sayfasında ilgili İçerik denetimini görebilirsiniz. ContentPlaceHolder'ın dışındaki ana sayfaların içeriğinin içerik sayfasında görünür ancak gri olduğuna dikkat edin. İçerik sayfası yalnızca ContentPlaceHolder içindeki içeriği destekleyebilir. Ana sayfadan gelen diğer tüm içerikler sabittir.

Şekil 1: Ana sayfa ve ilişkili içerik sayfası

Ana Sayfa Oluşturma

Yeni bir ana sayfa oluşturmak için:

1. Visual Studio 2005'i açın ve yeni bir Web sitesi oluşturun.
2. Dosya, Yeni, Dosya'ya tıklayın.
3. Şekil 2'de gösterildiği gibi Yeni Öğe Ekle iletişim kutusunda Ana Dosya'yı seçin.
4. Ekle’ye tıklayın.

Şekil 2: Yeni Ana Sayfa Oluşturma

Ana sayfanın dosya uzantısının .master olduğuna dikkat edin. Bu, ana sayfanın sıradan bir sayfadan farklı olduğu yollardan biridir. Diğer birincil fark, bir @Page yönerge yerine ana sayfanın bir @Master yönerge içermesidir. Yeni oluşturduğunuz ana sayfa için Kaynak Görünümü'ne geçin ve kodu gözden geçirin.

Yeni bir ana sayfada varsayılan olarak bir ContentPlaceHolder denetimi bulunur. Çoğu durumda, önce ortak sayfa öğelerini oluşturmak ve ardından özel içeriğin istendiği yere ContentPlaceHolder denetimleri eklemek daha mantıklıdır. Bu gibi durumlarda, geliştiriciler varsayılan ContentPlaceHolder denetimini silmek ve sayfa geliştirildikçe yenilerini eklemek isteyecektir. ContentPlaceHolder denetimleri, boyutlandırma tutamaçlarını görüntülemelerine rağmen yeniden boyutlandırılamaz. ContentPlaceHolder denetimi, tek bir özel durumla birlikte içerdiği içeriğe göre otomatik olarak boyutlandırılarak; Tablo hücresi gibi bir blok öğesinin içine ContentPlaceHolder denetimi yerleştirirseniz, bu denetim öğenin boyutuna göre boyutlandırılır.

Laboratuvar 1 Ana Sayfalarla Çalışma

Bu laboratuvarda yeni bir ana sayfa oluşturacak ve üç ContentPlaceHolder denetimi tanımlayacaksınız. Ardından yeni bir İçerik sayfası oluşturacak ve ContentPlaceHolder denetimlerinden en az birinin içeriğini değiştirebilirsiniz.

1. Bir ana sayfa oluşturun ve ContentPlaceHolder denetimleri ekleyin.

   1. Yukarıda açıklandığı gibi yeni bir ana sayfa oluşturun.
   2. Varsayılan ContentPlaceHolder denetimini silin.
   3. Denetimin gölgeli üst kenar kısmına tıklayarak ContentPlaceHolder denetimini seçin ve ardından klavyenizdeki DEL tuşuna basarak silin.
   4. Şekil 3'te gösterildiği gibi Üst Bilgi ve yan şablonu kullanarak yeni bir tablo ekleyin. Tüm tablonun tasarımcıda görünmesi için genişlik ve yükseklik değerini %90 olarak değiştirin.

Şekil 3

1. İmleci tablonun her hücresine yerleştirin ve valign özelliğini üste ayarlayın.
2. Araç Kutusu'ndan, tablonun üst hücresine (üst bilgi hücresi) bir ContentPlaceHolder denetimi ekleyin.
3. Bu ContentPlaceHolder denetimini eklediğinizde, satır yüksekliğinin şekil 4'te gösterildiği gibi sayfanın neredeyse tamamını kaplayacağını fark edeceksiniz. Bu noktada bu konuda endişelenmeyin.

Şekil 4: Boş alan ContentPlaceHolder ile aynı hücrededir

1. Diğer iki hücreye ContentPlaceHolder denetimi yerleştirin. Diğer ContentPlaceHolder denetimleri eklendikten sonra, tablo hücrelerinin boyutu beklediğiniz gibi olmalıdır. Sayfa artık şekil 5'te gösterilen sayfa gibi görünmelidir.

Şekil 5: Tüm ContentPlaceHolder denetimlerine sahip Ana Şablon. Üst bilgi hücresinin hücre yüksekliğinin artık olması gereken şey olduğuna dikkat edin

1. Üç ContentPlaceHolder denetiminin her birine dilediğiniz metni girin.
2. Ana sayfayı exercise1.master olarak kaydedin.
3. Yeni bir Web Formu oluşturun ve exercise1.master ana sayfasıyla ilişkilendirin.
4. Visual Studio 2005'te Dosya, Yeni, Dosya'yı seçin.
5. Yeni Öğe Ekle iletişim kutusunda Web Formu'nu seçin.
6. Şekil 6'da gösterildiği gibi Ana sayfa seç onay kutusunun işaretli olduğundan emin olun.

Şekil 6: Yeni İçerik Sayfası Ekleme

1. Ekle’ye tıklayın.
2. Şekil 7'de gösterildiği gibi Ana sayfa seçin iletişim kutusunda exercise1.master öğesini seçin.
3. Yeni içerik sayfasını eklemek için Tamam'a tıklayın.

Visual Studio'da yeni içerik sayfası, ana sayfada her ContentPlaceHolder denetimi için bir İçerik denetimiyle görüntülenir. Varsayılan olarak, kendi içeriğinizi ekleyebilmeniz için İçerik denetimleri boş olur. Ana sayfadaki ContentPlaceHolder denetimindeki içeriği kullanmalarını isterseniz, şekil 8'de gösterildiği gibi akıllı etiket simgesine (denetimin sağ üst köşesindeki küçük siyah ok) tıklayın ve akıllı etiketten Varsayılan Olarak Ana İçerik'i seçin. Bunu yaptığınızda, menü öğesi Özel İçerik Oluştur olarak değişir. Bu noktada tıkladığınızda içerik ana sayfadan kaldırılır ve söz konusu İçerik denetimi için özel içerik tanımlamanıza olanak sağlar.

Şekil 7: İçerik Denetimini Varsayılan Olarak Ana Sayfa İçeriğine Ayarlama

Ana Sayfayı ve İçerik Sayfalarını Bağlama

Ana sayfa ile içerik sayfası arasındaki ilişki dört farklı yoldan biriyle yapılandırılabilir:

• yönergesinin @PageMasterPageFile özniteliği
• Kodda Page.MasterPageFile özelliğini ayarlama.
• Uygulama yapılandırma dosyasındaki pages> öğesi (uygulamanın kök klasöründe web.config)<
• Alt klasörler yapılandırma dosyasındaki pages> öğesi (alt klasörde web.config)<

MasterPageFile Özniteliği

MasterPageFile özniteliği, belirli bir ASP.NET sayfasına ana sayfa uygulamayı kolaylaştırır. Ayrıca, Alıştırma 1'de yaptığınız gibi Ana Sayfa Seç onay kutusunu işaretleyince ana sayfayı uygulamak için kullanılan yöntemdir.

Kodda Page.MasterPageFile Dosyasını Ayarlama

Kodda MasterPageFile özelliğini ayarlayarak, çalışma zamanında içeriğinize belirli bir ana sayfa uygulayabilirsiniz. Bu, bir kullanıcı rolüne veya başka ölçütlere göre belirli bir ana sayfayı uygulamanız gerekebilecek durumlarda kullanışlıdır. MasterPageFile özelliği PreInit yönteminde ayarlanmalıdır. PreInit yönteminden sonra ayarlanırsa InvalidOperationException oluşturulur. Bu özelliğin ayarlandığı sayfada, sayfanın üst düzey denetimi olarak İçerik denetimi de olmalıdır. Aksi takdirde, MasterPageFile özelliği ayarlandığında bir HttpException oluşturulur.

<pages> Öğesini Kullanma

web.config dosyasının pages öğesinde <masterPageFile özniteliğini ayarlayarak sayfalarınız için bir ana sayfa> yapılandırabilirsiniz. Bu yöntemi kullanırken, uygulama yapısında daha düşük web.config dosyaların bu ayarı geçersiz kılabileceğini unutmayın. Bir @Page yönergede ayarlanan tüm MasterPageFile öznitelikleri de bu ayarı geçersiz kılar. pages öğesinin <kullanılması, belirli klasörlerde veya dosyalarda gerekirse geçersiz kılınabilecek bir ana sayfa oluşturmayı kolaylaştırır.>

Ana Sayfalardaki Özellikler

Ana sayfa, yalnızca bu özellikleri ana sayfada genel hale getirerek özellikleri kullanıma açabilir. Örneğin, aşağıdaki kod SomeProperty adlı bir özelliği tanımlar:

private string _SomeProperty; public string SomeProperty { get { return _SomeProperty; } set { _SomeProperty = value; } }

İçerik sayfasından SomeProperty özelliğine erişmek için Aşağıdaki gibi Master özelliğini kullanmanız gerekir:

void Page_Load() { Master.SomeProperty = "Master Page Property"; }

Ana Sayfaları İç İçe Yerleştirme

Ana sayfalar, büyük bir Web uygulamasında ortak bir genel görünüm ve his sağlamak için mükemmel bir çözüm sağlar. Ancak, büyük bir sitenin belirli bölümlerinin ortak bir arabirimi paylaşması, diğer bölümlerin ise farklı bir arabirimi paylaşması yaygın bir durum değildir. Bu ihtiyacı gidermek için, birden çok ana sayfa mükemmel bir çözüm. Ancak bu, büyük bir uygulamanın tüm sayfalar ve yalnızca sitenin belirli bölümleri arasında paylaşılan diğer bileşenler arasında paylaşılan belirli bileşenlere (örneğin menü gibi) sahip olabileceği gerçeğini ele almaz. Bu tür durumlar için iç içe geçmiş ana sayfalar ihtiyacı güzelce doldurur. Gördüğünüz gibi, normal bir ana sayfa bir ana sayfadan ve bir içerik sayfasından oluşur. İç içe geçmiş bir ana sayfa durumunda iki ana sayfa vardır; bir üst ana ve bir alt ana şablon. Alt ana sayfa aynı zamanda bir içerik sayfasıdır ve ana sayfası da üst ana sayfadır.

Tipik bir ana sayfanın kodu aşağıda verilmiştir:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="parent.master.cs" Inherits="parent" %> <!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>Typical Master Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:contentplaceholder id="MainMenuContent" runat="server" /> </div> </form> </body> </html>

İç içe geçmiş bir ana şablon senaryosunda bu, üst ana şablon olacaktır. Başka bir ana sayfa bu sayfayı ana sayfa olarak kullanır ve bu kod şöyle görünür:

<%@ Master Language="C#" MasterPageFile="~/parent.master" AutoEventWireup="true" CodeFile="child.master.cs" Inherits="child" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainMenuContent" Runat="Server"> <span>From the Child Master.</span> <asp:contentplaceholder id="ChildPlaceHolder1" runat="server" /> </asp:Content>

Bu senaryoda, alt ana şablonun aynı zamanda üst ana şablon için de bir içerik sayfası olduğunu unutmayın. Alt ana şablonun tüm içeriği, içeriğini üst öğesinin ContentPlaceHolder denetiminden alan İçerik denetiminin içinde görünür.

Bu videoda iç içe geçmiş ana sayfaların kullanımına ilişkin bir kılavuz gösterilmektedir.

Full-Screen Video'Full-Screen aç

Şekil 8: Ana Sayfa Seçme