Ana Sayfaları Kullanarak Site Geneli Bir Düzen Oluşturma (C#)Creating a Site-Wide Layout Using Master Pages (C#)

Scott Mitchell tarafındanby Scott Mitchell

Kodu indirin veya PDF 'yi indirinDownload Code or Download PDF

Bu öğreticide, ana sayfa temelleri gösterilir.This tutorial will show master page basics. Yani, ana sayfa nedir, bir ana sayfa oluşturma, içerik yeri sahipleri nedir, bir ana sayfa kullanan bir ASP.NET sayfası oluşturma, ana sayfanın nasıl değiştirileceği, ilişkili içerik sayfalarına otomatik olarak yansıtılmıştır ve bu şekilde devam eder.Namely, what are master pages, how does one create a master page, what are content place holders, how does one create an ASP.NET page that uses a master page, how modifying the master page is automatically reflected in its associated content pages, and so on.

GirişIntroduction

İyi tasarlanmış bir Web sitesinin bir özniteliği, site genelinde tutarlı bir sayfa düzenidir.One attribute of a well-designed website is a consistent site-wide page layout. Örneğin, www.asp.net Web sitesini alın.Take the www.asp.net website, for example. Bu yazma sırasında, her sayfada sayfanın üst ve alt kısmında aynı içerik bulunur.At the time of this writing, every page has the same content at the top and bottom of the page. Şekil 1 ' de gösterildiği gibi, her sayfanın en üst kısmında Microsoft Communities listesi bulunan gri bir çubuk görüntülenir.As Figure 1 shows, the very top of each page displays a gray bar with a list of Microsoft Communities. Bu, site logosu, sitenin çevrildiği dillerin listesi ve temel bölümler: giriş, Başlarken, öğrenme, Indirmeler vs.Beneath that is the site logo, the list of languages into which the site has been translated, and the core sections: Home, Get Started, Learn, Downloads, and so forth. Benzer şekilde, sayfanın en altında www.asp.net üzerinde reklam, bir telif hakkı bildirimi ve gizlilik bildirimine yönelik bir bağlantı hakkında bilgiler yer alır.Likewise, the bottom of the page includes information about advertising on www.asp.net, a copyright statement, and a link to the privacy statement.

www.asp.net Web sitesi tüm sayfalarda tutarlı bir görünüm kullanırThe www.asp.net Website Employs a Consistent Look and Feel Across All Pages

Şekil 01: www.asp.NET Web sitesi tüm sayfalarda tutarlı bir görünüm kullanır (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 01: The www.asp.net Website Employs a Consistent Look and Feel Across All Pages (Click to view full-size image)

İyi tasarlanmış bir sitenin başka bir özniteliği, sitenin görünümünün değiştirilebildiği kolaylığıdır.Another attribute of a well-designed site is the ease with which the site's appearance can be changed. Şekil 1 Mart 2008 ' den itibaren www.asp.net giriş sayfasını gösterir, ancak şu anda ve Bu öğreticinin yayını arasında görünüm değişmiş olabilir.Figure 1 shows the www.asp.net homepage as of March 2008, but between now and this tutorial's publication, the look and feel may have changed. Büyük olasılıkla, üstteki menü öğeleri MVC çerçevesi için yeni bir bölüm içerecek şekilde genişletilir.Perhaps the menu items along the top will expand to include a new section for the MVC framework. Ya da belki de farklı renkler, yazı tipleri ve düzen içeren, daha az yeni bir tasarım yok edilecek.Or maybe a radically new design with different colors, fonts, and layout will be unveiled. Tüm sitede bu tür değişiklikler uygulandığında, siteyi oluşturan binlerce web sayfasının değiştirilmesini gerektirmeyen hızlı ve basit bir süreç olmalıdır.Applying such changes to the entire site should be a fast and simple process that does not require modifying the thousands of web pages that make up the site.

ASP.NET içinde site genelinde sayfa şablonu oluşturmak, ana sayfalarınkullanımı aracılığıyla mümkündür.Creating a site-wide page template in ASP.NET is possible through the use of master pages. Bir Nutshell 'de, ana sayfa, tüm içerik sayfaları arasında ortak olan ve içeriğe göre içerik sayfası temelinde özelleştirilebilen olan bir ASP.NET sayfa türüdür.In a nutshell, a master page is a special type of ASP.NET page that defines the markup that is common among all content pages as well as regions that are customizable on a content page-by-content page basis. (İçerik sayfası, ana sayfaya bağlanan bir ASP.NET sayfasıdır.) Ana sayfanın yerleşimi veya biçimlendirmesi değiştirildiğinde, tüm içerik sayfalarının çıktısı benzer şekilde güncelleştirilir ve bu da site genelinde görünüm değişikliklerinin tek bir dosyayı güncelleştirme ve dağıtma (yani, ana sayfa) kadar kolay hale gelir.(A content page is an ASP.NET page that is bound to the master page.) Whenever a master page's layout or formatting is changed, all of its content pages' output is likewise immediately updated, which makes applying site-wide appearance changes as easy as updating and deploying a single file (namely, the master page).

Bu, ana sayfaları kullanarak araştıran bir öğretici serisinin ilk öğreticisidir.This is the first tutorial in a series of tutorials that explore using master pages. Bu öğretici serisinin konusu boyunca şunları yaptık:Over the course of this tutorial series we:

  • Ana sayfaları ve ilişkili içerik sayfalarını oluşturmayı inceleyin,Examine creating master pages and their associated content pages,
  • Çeşitli ipuçları, püf noktaları ve yakalamaları tartışınDiscuss a variety of tips, tricks, and traps,
  • Ortak ana sayfa tuzarını belirler ve geçici çözümleri keşfetIdentify common master page pitfalls and explore workarounds,
  • Bkz. bir içerik sayfasından ana sayfaya erişme ve tam tersi,See how to access the master page from a content page and vice-a-versa,
  • Çalışma zamanında bir içerik sayfasının ana sayfasını belirtmeyi öğrenin veLearn how to specify a content page's master page at runtime, and
  • Diğer Gelişmiş Ana sayfa konuları.Other advanced master page topics.

Bu öğreticilerin kısa olması ve işlem boyunca görsel olarak size yol göstermek için çok sayıda ekran görüntüsü ile adım adım yönergeler sağlaması gerekir.These tutorials are geared to be concise and provide step-by-step instructions with plenty of screen shots to walk you through the process visually. Her öğretici, C# ve Visual Basic sürümlerde mevcuttur ve kullanılan kodun tamamını karşıdan yükleme içerir.Each tutorial is available in C# and Visual Basic versions and includes a download of the complete code used.

Bu ınaugural öğreticisi ana sayfa temelleri hakkında bir görünüm ile başlar.This inaugural tutorial starts with a look at master page basics. Ana sayfaların nasıl çalıştığını anladık, Visual Web Developer kullanarak ana sayfa ve ilişkili içerik sayfaları oluşturma konusuna bakın ve bir ana sayfadaki değişikliklerin hemen içerik sayfalarında nasıl yansıtıldığını görün.We discuss how master pages work, look at creating a master page and associated content pages using Visual Web Developer, and see how changes to a master page are immediately reflected in its content pages. Haydi başlayın!Let's get started!

Ana sayfaların nasıl çalıştığını anlamaUnderstanding How Master Pages Work

Site genelinde tutarlı sayfa düzenine sahip bir Web sitesi oluşturmak için, her bir Web sayfasının özel içeriğine ek olarak ortak biçimlendirme işaretlemesini yaymalıdır.Building a website with a consistent site-wide page layout requires that each web page emit common formatting markup in addition to its custom content. Örneğin, www.asp.net üzerinde her bir öğretici veya forum, kendi benzersiz içeriğine sahip olsa da, bu sayfaların her biri, üst düzey bölüm bağlantılarını görüntüleyen bir dizi ortak <div> öğesini de işler: giriş, Başlarken, öğrenme vb.For example, while each tutorial or forum post on www.asp.net have their own unique content, each of these pages also render a series of common <div> elements that display the top-level section links: Home, Get Started, Learn, and so on.

Tutarlı bir görünüm ile Web sayfaları oluşturmaya yönelik çeşitli teknikler vardır.There are a variety of techniques for creating web pages with a consistent look and feel. Bir Naïve yaklaşımı, yaygın düzen işaretlemesini tüm Web sayfalarına kopyalayıp yapıştırmaktır, ancak bu yaklaşım bir dizi küçük tarafa sahiptir.A naive approach is to simply copy and paste the common layout markup into all web pages, but this approach has a number of downsides. Başlangıçlara, her yeni sayfa oluşturulduğunda, paylaşılan içeriği kopyalayıp sayfaya yapıştırmayı unutmamalısınız.For starters, every time a new page is created, you must remember to copy and paste the shared content into the page. Yanlışlıkla paylaşılan biçimlendirmenin yalnızca bir alt kümesini yeni bir sayfaya kopyalayabilmeniz için, bu tür kopyalama ve yapıştırma işlemleri hata için tasarlanmıştır.Such copying and pasting operations are ripe for error as you may accidentally copy only a subset of the shared markup into a new page. Ayrıca, bu yaklaşım, yeni görünümü kullanmak için sitedeki her bir sayfanın düzenlenmesi gerektiğinden, mevcut site genelinde görünümün yeni bir sorun ile değiştirilmesini sağlar.And to top it off, this approach makes replacing the existing site-wide appearance with a new one a real pain because every single page in the site must be edited in order to use the new look and feel.

ASP.NET sürüm 2,0 ' den önce, sayfa geliştiricileri genellikle kullanıcı denetimlerinde ortak biçimlendirme yerleştirir ve sonra her sayfaya ve her sayfaya bu kullanıcı denetimlerini ekledi.Prior to ASP.NET version 2.0, page developers often placed common markup in User Controls and then added these User Controls to each and every page. Bu yaklaşım, sayfa Geliştiricinin kullanıcı denetimlerini her yeni sayfaya el ile eklemeyi anımsamasını, ancak ortak biçimlendirmeyi yalnızca değiştirilmesi gereken kullanıcı denetimlerine göre güncelleştirirken daha kolay değişiklikler için izin verileceğini gerektirdi.This approach required that the page developer remember to manually add the User Controls to every new page, but allowed for easier site-wide modifications because when updating the common markup only the User Controls needed to be modified. Ne yazık ki, Visual Studio .NET 2002 ve 2003-ASP.NET 1. x uygulamaları için kullanılan Visual Studio sürümleri Tasarım görünümü gri kutular olarak.Unfortunately, Visual Studio .NET 2002 and 2003 - the versions of Visual Studio used to create ASP.NET 1.x applications - rendered User Controls in the Design view as gray boxes. Sonuç olarak, bu yaklaşımı kullanan sayfa geliştiricileri bir WYSıWYG tasarım zamanı ortamının keyfini çıkarmadı.Consequently, page developers using this approach did not enjoy a WYSIWYG design-time environment.

Kullanıcı denetimlerini kullanmanın eksiketleri, ana sayfalarınsunumıyla ASP.NET sürüm 2,0 ve Visual Studio 2005 ' de giderilmiştir.The shortcomings of using User Controls were addressed in ASP.NET version 2.0 and Visual Studio 2005 with the introduction of master pages. Ana sayfa, hem site genelinde biçimlendirmeyi hem de ilişkili içerik sayfalarının özel işaretlemesini tanımladığı bölgeleri tanımlayan özel bir tür ASP.net sayfasıdır.A master page is a special type of ASP.NET page that defines both the site-wide markup and the regions where associated content pages define their custom markup. Adım 1 ' de göreceğiniz gibi, bu bölgeler ContentPlaceHolder denetimleri tarafından tanımlanır.As we will see in Step 1, these regions are defined by ContentPlaceHolder controls. ContentPlaceHolder denetimi, ana sayfanın denetim hiyerarşisinde özel içeriğin bir içerik sayfası tarafından eklenmesi için bir konum belirtir.The ContentPlaceHolder control simply denotes a position in the master page's control hierarchy where custom content can be injected by a content page.

Note

Ana sayfaların temel kavramları ve işlevleri ASP.NET sürüm 2,0 ' den beri değişmemiştir.The core concepts and functionality of master pages has not changed since ASP.NET version 2.0. Ancak Visual Studio 2008, Visual Studio 2005 ' de olmayan bir özellik olan iç içe yerleştirilmiş ana sayfalar için tasarım zamanı desteği sunar.However, Visual Studio 2008 offers design-time support for nested master pages, a feature that was lacking in Visual Studio 2005. Daha sonraki bir öğreticide iç içe geçmiş ana sayfaları kullanma bölümüne bakacağız.We will look at using nested master pages in a future tutorial.

Şekil 2 www.asp.net için ana sayfanın nasıl görünebileceğini gösterir.Figure 2 shows what the master page for www.asp.net might look like. Ana sayfanın, her bir Web sayfası için benzersiz içeriklerin bulunduğu her sayfanın üst, alt ve sağ tarafında, her sayfanın en üstünde, altında ve sağında yer alan biçimlendirme ve sol tarafta bulunan bir ContentPlaceHolder tanımladığına unutmayın.Note that the master page defines the common site-wide layout - the markup at the top, bottom, and right of every page - as well as a ContentPlaceHolder in the middle-left, where the unique content for each individual web page is located.

Bir ana sayfa, içerik sayfası sayfa temelinde, site genelinde düzen ve düzenlenebilir bölgeleri tanımlar

Şekil 02: bir ana sayfa, Içerik sayfası sayfa temelinde, site genelinde düzen ve düzenlenebilir bölgeleri tanımlarFigure 02: A Master Page Defines the Site-Wide Layout and the Regions Editable on a Content Page-by-Content Page Basis

Ana sayfa tanımlandıktan sonra, bir onay kutusu ile yeni ASP.NET sayfalarına bağlanabilir.Once a master page has been defined it can be bound to new ASP.NET pages through the tick of a checkbox. Bu ASP.NET sayfaları-adlandırılan içerik sayfaları-ana sayfanın ContentPlaceHolder denetimlerinin her biri için bir Içerik denetimi ekleyin.These ASP.NET pages - called content pages - include a Content control for each of the master page's ContentPlaceHolder controls. İçerik sayfası bir tarayıcı aracılığıyla ziyaret edildiğinde, ASP.NET altyapısı ana sayfanın denetim hiyerarşisini oluşturur ve içerik sayfasının denetim hiyerarşisini uygun yerlere çıkartır.When the content page is visited through a browser the ASP.NET engine creates the master page's control hierarchy and injects the content page's control hierarchy into the appropriate places. Bu Birleşik denetim hiyerarşisi işlenir ve sonuçta elde edilen HTML, son kullanıcının tarayıcısına döndürülür.This combined control hierarchy is rendered and the resulting HTML is returned to the end user's browser. Sonuç olarak, içerik sayfası, kendi ana sayfasında tanımlanmış olan ve kendi Içerik denetimlerinde tanımlanan sayfaya özgü biçimlendirmenin bulunduğu ortak biçimlendirmeyi yayar.Consequently, the content page emits both the common markup defined in its master page outside of the ContentPlaceHolder controls and the page-specific markup defined within its own Content controls. Şekil 3 ' te bu kavram gösterilmektedir.Figure 3 illustrates this concept.

Istenen sayfanın biçimlendirmesinin ana sayfada Fkullanılma The Requested Page's Markup is Fused into the Master Page

Şekil 03: Istenen sayfanın biçimlendirmesi ana sayfada fkullanılma yapılır (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 03: The Requested Page's Markup is Fused into the Master Page (Click to view full-size image)

Ana sayfaların nasıl çalıştığını tartıştığımız için, Visual Web Developer kullanarak bir ana sayfa ve ilişkili içerik sayfaları oluşturmaya göz atalım.Now that we have discussed how master pages work, let's take a look at creating a master page and associated content pages using Visual Web Developer.

Note

Mümkün olan en geniş kitleye ulaşmak için, bu öğretici serisi boyunca derduğumuz ASP.NET Web sitesi Microsoft 'un ücretsiz Visual Studio 2008, Visual Web Developer 2008sürümü ile ASP.NET 3,5 kullanılarak oluşturulacaktır.In order to reach the widest possible audience, the ASP.NET website we build throughout this tutorial series will be created using ASP.NET 3.5 with Microsoft's free version of Visual Studio 2008, Visual Web Developer 2008. Henüz ASP.NET 3,5 sürümüne yükseltmezseniz, bu öğreticilerde ele alınan kavramlar ASP.NET 2,0 ve Visual Studio 2005 ile aynı şekilde çalışır.If you have not yet upgraded to ASP.NET 3.5, don't worry - the concepts discussed in these tutorials work equally well with ASP.NET 2.0 and Visual Studio 2005. Ancak bazı tanıtım uygulamaları, .NET Framework sürüm 3,5 ' deki yeni özellikleri kullanabilir; 3,5 'e özgü özellikler kullanıldığında, sürüm 2,0 ' de benzer işlevselliği nasıl uygulayacağınızı ele alan bir notim dahil ediyorum.However, some demo applications may use features new to the .NET Framework version 3.5; when 3.5-specific features are used, I include a note that discusses how to implement similar functionality in version 2.0. Her öğreticiden indirileceği tanıtım uygulamalarının .NET Framework sürüm 3,5 ' i hedeflemesini sağlayın ve bu, 3,5 özel yapılandırma öğelerini içeren bir Web.config dosyası ve ASP.NET Pages ' ın arka plan kod sınıflarında bulunan using deyimlerine özel ad alanlarına başvuru 3,5 sağlar.Do keep in mind that the demo applications available for download from each tutorial target the .NET Framework version 3.5, which results in a Web.config file that includes 3.5-specific configuration elements and references to 3.5-specific namespaces in the using statements in ASP.NET pages' code-behind classes. Uzun hikaye kısa, henüz bilgisayarınıza .NET 3,5 ' i yüklemeniz gerekiyorsa indirilebilir web uygulaması, Web.config' den önce 3,5 özel biçimlendirmeyi kaldırmadan çalışmaz.Long story short, if you have yet to install .NET 3.5 on your computer then the downloadable web application will not work without first removing the 3.5-specific markup from Web.config. Bu konuyla ilgili daha fazla bilgi için bkz. ASP.NET sürüm 3.5 'in Web.config dosyası .See Dissecting ASP.NET Version 3.5's Web.config File for more information on this topic. Ayrıca, 3,5 'e özgü ad alanlarına başvuran using deyimlerini kaldırmanız gerekecektir.You will also need to remove the using statements that reference 3.5-specific namespaces.

1. Adım: Ana sayfa oluşturmaStep 1: Creating a Master Page

Ana ve içerik sayfalarını oluşturmak ve kullanmak için önce bir ASP.NET Web sitesine ihtiyacımız var.Before we can explore creating and using master and content pages, we first need an ASP.NET website. Yeni bir dosya sistemi tabanlı ASP.NET Web sitesi oluşturarak başlayın.Start by creating a new file system-based ASP.NET website. Bunu gerçekleştirmek için, Visual Web Developer 'ı başlatın ve ardından Dosya menüsüne gidin ve yeni Web sitesi ' ni seçin, yeni Web sitesi iletişim kutusunu (bkz. Şekil 4) görüntüleyin.To accomplish this, launch Visual Web Developer and then go to the File menu and choose New Web Site, displaying the New Web Site dialog box (see Figure 4). ASP.NET Web sitesi şablonunu seçin, konum açılan listesini dosya sistemi olarak ayarlayın, Web sitesini yerleştirmek için bir klasör seçin ve dili olarak C#ayarlayın.Choose the ASP.NET Web Site template, set the Location drop-down list to File System, choose a folder to place the web site, and set the language to C#. Bu, bir Default.aspx ASP.NET sayfası, bir App_Data klasörü ve bir Web.config dosyası ile yeni bir Web sitesi oluşturur.This will create a new web site with a Default.aspx ASP.NET page, an App_Data folder, and a Web.config file.

Note

Visual Studio, iki proje yönetimi modunu destekler: Web sitesi projeleri ve Web uygulaması projeleri.Visual Studio supports two modes of project management: Web Site Projects and Web Application Projects. Web sitesi projelerinin proje dosyası olmadığından, Web uygulaması projeleri Visual Studio .NET 2002/2003 'deki proje mimarisini taklit ederken, proje dosyası içerirler ve projenin kaynak kodunu /bin klasörüne yerleştirilmiş tek bir derlemede derler.Web Site Projects lack a project file, whereas Web Application Projects mimic the project architecture in Visual Studio .NET 2002/2003 - they include a project file and compile the project's source code into a single assembly, which is placed in the /bin folder. Visual Studio 2005 başlangıçta yalnızca desteklenen Web sitesi projeleri, ancak Web uygulaması proje modeli Service Pack 1 ile yeniden kullanılmaya başlandı; Visual Studio 2008, her iki proje modelini de sunmaktadır.Visual Studio 2005 initially only supported Web Site Projects, although the Web Application Project model was reintroduced with Service Pack 1; Visual Studio 2008 offers both project models. Ancak, Visual Web Developer 2005 ve 2008 sürümleri yalnızca Web sitesi projelerini destekler.The Visual Web Developer 2005 and 2008 editions, however, only support Web Site Projects. Bu öğretici serisinde tanıtımlar için Web sitesi proje modelini kullanıyorum.I use the Web Site Project model for my demos in this tutorial series. Express olmayan bir sürüm kullanıyorsanız ve bunun yerine Web uygulaması proje modelini kullanmak istiyorsanız, ekranınızda gördüklerinizle ilgili bazı tutarsızlıklar olabileceğini ve ekran görüntülerini gösteren ve komutctio ile gerçekleştirmeniz gereken adımları göz önünde bulundurun. Bu öğreticilerde belirtilen NS.If you are using a non-Express edition and want to use the Web Application Project model instead, feel free to do so but be aware that there may be some discrepancies between what you see on your screen and the steps you must take versus the screen shots shown and instructions provided in these tutorials.

yeni bir dosya sistemi tabanlı Web sitesi oluşturmaCreate a New File System-Based Web Site

Şekil 04: yeni bir dosya sistemi tabanlı Web sitesi oluşturma (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 04: Create a New File System-Based Web Site (Click to view full-size image)

Daha sonra, proje adına sağ tıklayıp, yeni öğe Ekle ' yi seçip ana sayfa şablonunu seçerek kök dizindeki siteye bir ana sayfa ekleyin.Next, add a master page to the site in the root directory by right-clicking on the Project name, choosing Add New Item, and selecting the Master Page template. Ana sayfaların uzantı .masterbitiş olduğunu unutmayın.Note that master pages end with the extension .master. Bu yeni ana sayfayı Site.master adlandırın ve Ekle ' ye tıklayın.Name this new master page Site.master and click Add.

Web sitesine site. Master adlı bir ana sayfa eklemek Add a Master Page Named Site.master to the Website

Şekil 05: web sitesine Site.master adlı ana sayfa ekleme (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 05: Add a Master Page Named Site.master to the Website (Click to view full-size image)

Visual Web Developer aracılığıyla yeni bir ana sayfa dosyası eklemek, aşağıdaki bildirim temelli işaretlerle bir ana sayfa oluşturur:Adding a new master page file through Visual Web Developer creates a master page with the following declarative markup:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" 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>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
 
 </asp:ContentPlaceHolder>
 </div>
 </form>
</body>
</html>

Bildirim temelli biçimlendirmenin ilk satırı @Master yönergedir.The first line in the declarative markup is the @Master directive. @Master yönergesi, ASP.NET sayfalarında görünen @Page yönergesine benzerdir.The @Master directive is similar to the @Page directive that appears in ASP.NET pages. Sunucu tarafı dili (C#) ve ana sayfanın arka plan kod sınıfının konumu ve devralması hakkındaki bilgileri tanımlar.It defines the server-side language (C#) and information about the location and inheritance of the master page's code-behind class.

DOCTYPE ve sayfanın bildirim temelli biçimlendirme @Master yönergesinin altında görünür.The DOCTYPE and the page's declarative markup appears beneath the @Master directive. Sayfa, dört sunucu tarafı denetimi ile birlikte statik HTML içerir:The page includes static HTML along with four server-side controls:

  • Bir Web formu (<form runat="server">) -tüm ASP.NET sayfalarında genellikle bir Web formu olduğundan ve ana sayfa bir Web formu içinde görünmesi gereken Web denetimlerini Içerebildiğinden, Web formunu ana sayfanıza eklediğinizden emin olun (her bir Içerik sayfasına Web formu eklemek yerine).A Web Form (the <form runat="server">) - because all ASP.NET pages typically have a Web Form - and because the master page may include Web controls that must appear within a Web Form - be sure to add the Web Form to your master page (rather than adding a Web Form to each content page).
  • ContentPlaceHolder1adlı bir ContentPlaceHolder denetimi Web formu içinde görünür ve içerik sayfasının Kullanıcı arabirimi için bölge görevi görür.A ContentPlaceHolder control named ContentPlaceHolder1 - this ContentPlaceHolder control appears within the Web Form and serves as the region for the content page's user interface.
  • Sunucu tarafı <head> öğesi -<head> öğesi runat="server" özniteliğe sahiptir ve sunucu tarafı kodu aracılığıyla erişilebilir hale getirir.A server-side <head> element - the <head> element has the runat="server" attribute, making it accessible through server-side code. <head> öğesi bu şekilde uygulanır, böylece sayfa başlığı ve diğer <head>ilgili biçimlendirme programlı bir şekilde eklenebilir veya ayarlanabilir.The <head> element is implemented this way so that the page's title and other <head>-related markup may be added or adjusted programmatically. Örneğin, bir ASP.NET sayfasının Title özelliği ayarlandığında <head> sunucu denetimi tarafından oluşturulan <title> öğesi değişir.For example, setting an ASP.NET page's Title property changes the <title> element rendered by the <head> server control.
  • headadlı ContentPlaceHolder denetimi , <head> sunucu denetimi içinde görünür ve <head> öğesine bildirimli olarak içerik eklemek için kullanılabilir.A ContentPlaceHolder control named head - this ContentPlaceHolder control appears within the <head> server control and can be used to declaratively add content to the <head> element.

Bu varsayılan ana sayfa bildirim temelli biçimlendirme, kendi ana sayfalarınızı tasarlamak için bir başlangıç noktası olarak görev yapar.This default master page declarative markup serves as a starting point for designing your own master pages. Ana sayfaya daha fazla Web denetimi veya Contentyertutucuları eklemek için veya HTML 'yi düzenleyebilirsiniz.Feel free to edit the HTML or to add additional Web controls or ContentPlaceHolders to the master page.

Note

Ana sayfa tasarlarken, ana sayfanın bir Web formu içerdiğinden ve en az bir ContentPlaceHolder denetiminin bu Web formu içinde göründüğünden emin olun.When designing a master page make sure that the master page contains a Web Form and that at least one ContentPlaceHolder control appears within this Web Form.

Basit bir site düzeni oluşturmaCreating a Simple Site Layout

Tüm sayfaların paylaştığı bir site düzeni oluşturmak için Site.mastervarsayılan bildirim temelli işaretlemesini genişletelim: ortak üst bilgi; Gezinti, Haberler ve diğer site genelinde içeriğe sahip bir sol sütun; ve "Microsoft ASP.NET ile güçlendirilmiştir" simgesini görüntüleyen bir altbilgi.Let's expand Site.master's default declarative markup to create a site layout where all pages share: a common header; a left column with navigation, news and other site-wide content; and a footer that displays the "Powered by Microsoft ASP.NET" icon. Şekil 6, içerik sayfalarından biri tarayıcı aracılığıyla görüntülenirken ana sayfanın nihai sonucunu gösterir.Figure 6 shows the end result of the master page when one of its content pages is viewed through a browser. Şekil 6 ' daki kırmızı daire içinde, ziyaret edilen sayfaya özgü (Default.aspx); diğer içerik ana sayfada tanımlanmıştır ve bu nedenle tüm içerik sayfalarında tutarlıdır.The red circled region in Figure 6 is specific to the page being visited (Default.aspx); the other content is defined in the master page and therefore consistent across all content pages.

Ana sayfa üst, sol ve alt bölümleri için biçimlendirmeyi tanımlarThe Master Page Defines the Markup for the Top, Left, and Bottom Portions

Şekil 06: Ana sayfa üst, sol ve alt bölümlerin işaretlemesini tanımlar (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 06: The Master Page Defines the Markup for the Top, Left, and Bottom Portions (Click to view full-size image)

Şekil 6 ' da gösterilen site düzenine ulaşmak için Site.master ana sayfasını aşağıdaki bildirim temelli biçimlendirmeyi içerecek şekilde güncelleştirerek başlayın:To achieve the site layout shown in Figure 6, start by updating the Site.master master page so that it contains the following declarative markup:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" 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>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
 <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <form id="form1" runat="server">
 <div id="topContent">
 <a href="Default.aspx">Master Pages Tutorials</a>
 </div>
 
 <div id="mainContent">
 <asp:ContentPlaceHolder id="MainContent" runat="server">
 </asp:ContentPlaceHolder>
 </div>
 
 <div id="leftContent">
 <h3>Lessons</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 <h3>News</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 </div>
 
 <div id="footerContent">
 <img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
 </div>
 </form>
</body>
</html>

Ana sayfanın düzeni bir dizi <div> HTML öğesi kullanılarak tanımlanır.The master page's layout is defined using a series of <div> HTML elements. topContent <div>, her sayfanın üst kısmında görüntülenen biçimlendirmeyi içerir, ancak mainContent, leftContentve footerContent <div>, sırasıyla sayfanın içeriğini, sol sütununu ve "Microsoft ASP.NET ile destekleniyor" simgesini göstermek için kullanılır.The topContent <div> contains the markup that appears at the top of each page, while the mainContent, leftContent, and footerContent <div> s are used to display the page's content, the left column, and the "Powered by Microsoft ASP.NET" icon, respectively. Bu <div> öğelerini eklemenin yanı sıra, birincil ContentPlaceHolder denetiminin ID özelliğini MainContent``ContentPlaceHolder1 olarak yeniden adlandırdım.In addition to adding these <div> elements, I also renamed the ID property of the primary ContentPlaceHolder control from ContentPlaceHolder1 to MainContent.

Bu assıralanmış <div> öğelerinin biçimlendirme ve düzen kuralları, ana sayfanın <Head> öğesindeki bir <link> öğesi aracılığıyla belirtilen geçişli stil sayfası (CSS) dosyasında Styles.css.The formatting and layout rules for these assorted <div> elements is spelled out in the Cascading Stylesheet (CSS) file Styles.css, which is specified via a <link> element in the master page's <head> element. Bu çeşitli kurallar, yukarıda belirtilen her bir <div> öğesinin görünümünü tanımlar.These various rules define the look and feel of each <div> element noted above. Örneğin, "Ana sayfa öğreticilerini" metin ve bağlantıyı gösteren topContent <div> öğesi, aşağıdaki şekilde Styles.css belirtilen biçimlendirme kurallarına sahiptir:For example, the topContent <div> element, which displays the "Master Pages Tutorials" text and link, has its formatting rules specified in Styles.css as follows:

#topContent {
 text-align: right;
 background-color: #600;
 color: White;
 font-size: x-large;
 text-decoration: none;
 font-weight: bold;
 padding: 10px;
 height: 50px;
}

Bilgisayarınızda ve ' yi takip ediyorsanız, Bu öğreticinin eşlik eden kodunu indirmeniz ve Styles.css dosyasını projenize eklemeniz gerekir.If you are following along at your computer, you will need to download this tutorial's accompanying code and add the Styles.css file to your project. Benzer şekilde, görüntüler adlı bir klasör oluşturmanız ve indirilen demo web sitesinden projenize "Microsoft ASP.NET ile güçlendirilmiştir" simgesini kopyalamanız gerekir.Similarly, you will also need to create a folder named Images and copy the "Powered by Microsoft ASP.NET" icon from the downloaded demo website to your project.

Note

CSS ve Web sayfası biçimlendirmesindeki bir tartışma, bu makalenin kapsamı dışındadır.A discussion of CSS and web page formatting is beyond the scope of this article. CSS hakkında daha fazla bilgi için w3schools.comadresindeki CSS öğreticilerine göz atın.For more on CSS, check out the CSS Tutorials at W3Schools.com. Ayrıca, farklı biçimlendirme kurallarının etkilerini görmek için Bu öğreticinin eşlik eden kodunu indirip Styles.css CSS ayarlarıyla oynamanızı da teşvik ediyorum.I also encourage you to download this tutorial's accompanying code and play with the CSS settings in Styles.css to see the effects of different formatting rules.

Mevcut bir tasarım şablonunu kullanarak ana sayfa oluşturmaCreating a Master Page Using an Existing Design Template

Küçük ve orta ölçekli şirketler için çok sayıda ASP.NET Web uygulaması derlendim.Over the years I've built a number of ASP.NET web applications for small- to medium-sized companies. İstemcilerimin bazılarında kullanmak istedikleri mevcut bir site düzeni vardı; Diğerleri bir uzmanlık grafik tasarımcısını işe yarsın.Some of my clients had an existing site layout they wanted to use; others hired a competent graphics designer. Web sitesi yerleşimini tasarlamaktan birkaç güvenilir.A few entrusted me to design the website layout. Şekil 6 ' ya göre söylebilirken, bir Web sitesinin yerleşimini tasarlayabilmeniz için bir programcı genellikle sizin için bir programcinizin vergi, vergilerinizi yaparken açık kalp olma oranı gerçekleştirmesini sağlar.As you can tell by Figure 6, tasking a programmer to design a website's layout is usually as wise as having your accountant perform open-heart surgery while your doctor does your taxes.

Neyse ki, ücretsiz HTML tasarım şablonları sunan çok sayıda Web sitesi vardır. Google, "Ücretsiz Web sitesi şablonları" arama terimi için 6.000.000 'den fazla sonuç döndürdü.Fortunately, there are innumerous websites that offer free HTML design templates - Google returned more than six million results for the search term "free website templates." En sevdiğiniz olanlardan biri OpenDesigns.org. İstediğiniz bir Web sitesi şablonunu bulduktan sonra, Web sitesi projenize CSS dosyalarını ve görüntülerini ekleyin ve şablonun HTML 'sini ana sayfanız ile tümleştirin.One of my favorite ones is OpenDesigns.org. Once you find a website template you like, add the CSS files and images to your website project and integrate the template's HTML into your master page.

Note

Microsoft ayrıca, Visual Studio 'daki yeni Web sitesi iletişim kutusuyla tümleştirilen çeşitli ücretsiz ASP.net tasarım başlatma seti şablonları sunmaktadır.Microsoft also offers a number of free ASP.NET Design Start Kit Templates that integrate into the New Web Site dialog box in Visual Studio.

2. Adım: Ilişkili Içerik sayfaları oluşturmaStep 2: Creating Associated Content Pages

Ana sayfa oluşturulduğunda, ana sayfaya bağlanan ASP.NET sayfaları oluşturmaya başlamaya hazırız.With the master page created, we are ready to start creating ASP.NET pages that are bound to the master page. Bu tür sayfalar içerik sayfalarıolarak adlandırılır.Such pages are referred to as content pages.

Projeye yeni bir ASP.NET sayfası ekleyelim ve Site.master ana sayfasına bağlayalim.Let's add a new ASP.NET page to the project and bind it to the Site.master master page. Çözüm Gezgini ' de proje adına sağ tıklayın ve yeni öğe Ekle seçeneğini belirleyin.Right-click on the project name in Solution Explorer and choose the Add New Item option. Web formu şablonunu seçin, About.aspxadı girin ve ardından şekil 7 ' de gösterildiği gibi "ana sayfayı seçin" onay kutusunu işaretleyin.Select the Web Form template, enter the name About.aspx, and then check the "Select master page" checkbox as shown in Figure 7. Bunu yapmak, ana sayfa Seç iletişim kutusunu (bkz. Şekil 8), kullanılacak ana sayfayı seçebileceğiniz yerden gösterir.Doing so will display the Select a Master Page dialog box (see Figure 8) from where you can choose the master page to use.

Note

Web sitesi proje modeli yerine Web uygulaması proje modelini kullanarak ASP.NET Web sitenizi oluşturduysanız, Şekil 7 ' de gösterilen yeni öğe Ekle iletişim kutusunda "Ana sayfa seç" onay kutusunu görmezsiniz.If you created your ASP.NET website using the Web Application Project model instead of the Web Site Project model you will not see the "Select master page" checkbox in the Add New Item dialog box shown in Figure 7. Web uygulaması proje modelini kullanırken bir içerik sayfası oluşturmak için Web formu şablonu yerine Web Içerik formu şablonunu seçmeniz gerekir.To create a content page when using the Web Application Project model you must choose the Web Content Form template instead of the Web Form template. Web Içerik formu şablonunu seçtikten sonra Ekle ' ye tıkladığınızda, Şekil 8 ' de gösterilen aynı ana sayfa Seç iletişim kutusu görüntülenir.After selecting the Web Content Form template and clicking Add, the same Select a Master Page dialog box shown in Figure 8 will appear.

Yeni Içerik sayfası eklemek Add a New Content Page

Şekil 07: yeni içerik sayfası ekleme (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 07: Add a New Content Page (Click to view full-size image)

site. Master ana sayfasını seçinSelect the Site.master Master Page

Şekil 08: Site.master ana sayfasını seçin (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 08: Select the Site.master Master Page (Click to view full-size image)

Aşağıdaki bildirim temelli işaretlerde gösterildiği gibi yeni bir içerik sayfası, ana sayfasına ve ana sayfanın ContentPlaceHolder denetimlerinin her biri için bir Içerik denetimine işaret eden bir @Page yönergesi içerir.As the following declarative markup shows, a new content page contains a @Page directive that points back to its master page and a Content control for each of the master page's ContentPlaceHolder controls.

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="About.aspx.cs" Inherits="About" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
</asp:Content>

Note

Adım 1 ' deki "basit site düzeni oluşturma" bölümünde ContentPlaceHolder1 MainContentolarak yeniden adlandırdım.In the "Creating a Simple Site Layout" section in Step 1 I renamed ContentPlaceHolder1 to MainContent. Bu ContentPlaceHolder denetiminin ID aynı şekilde yeniden adlandırmazsanız, içerik sayfanızın bildirim temelli biçimlendirmesi yukarıda gösterilen biçimlendirmeden biraz farklı olacaktır.If you did not rename this ContentPlaceHolder control's ID in the same way, your content page's declarative markup will differ slightly from the markup shown above. Yani, ikinci Içerik denetimi ContentPlaceHolderID ana sayfanızda ilgili ContentPlaceHolder denetiminin ID yansıtır.Namely, the second Content control's ContentPlaceHolderID will reflect the ID of the corresponding ContentPlaceHolder control in your master page.

Bir içerik sayfasını işlerken, ASP.NET altyapısı sayfanın Içerik denetimlerini ana sayfanın ContentPlaceHolder denetimleriyle sigortası gerekir.When rendering a content page, the ASP.NET engine must fuse the page's Content controls with its master page's ContentPlaceHolder controls. ASP.NET motoru, içerik sayfasının ana sayfasını @Page yönergesinin MasterPageFile özniteliğinden belirler.The ASP.NET engine determines the content page's master page from the @Page directive's MasterPageFile attribute. Yukarıdaki biçimlendirme gösterildiği gibi, bu içerik sayfası ~/Site.masterbağımlıdır.As the above markup shows, this content page is bound to ~/Site.master.

Ana sayfada iki ContentPlaceHolder denetimi olduğu için-head ve MainContent-Visual Web Developer iki Içerik denetimi oluşturdu.Because the master page has two ContentPlaceHolder controls - head and MainContent - Visual Web Developer generated two Content controls. Her Içerik denetimi ContentPlaceHolderID özelliği aracılığıyla belirli bir ContentPlaceHolder öğesine başvurur.Each Content control references a particular ContentPlaceHolder via its ContentPlaceHolderID property.

Ana sayfalar önceki site genelinde şablon tekniklerinden daha fazla görünse de tasarım zamanı desteğiyle birlikte bulunur.Where master pages shine over previous site-wide template techniques is with their design-time support. Şekil 9 ' da, Visual Web Developer Tasarım görünümü ile görüntülenirken About.aspx içerik sayfası gösterilmektedir.Figure 9 shows the About.aspx content page when viewed through Visual Web Developer's Design view. Ana sayfa içeriği görünür olsa da gri renkte olduğunu ve değiştirilemeyeceğini unutmayın.Note that while the master page content is visible, it is grayed out and cannot be modified. Ana sayfanın Contentyertutucuları ile ilgili Içerik denetimleri ancak düzenlenebilir.The Content controls corresponding to the master page's ContentPlaceHolders are, however, editable. Diğer tüm ASP.NET sayfaları ile tıpkı, kaynak veya tasarım görünümleri aracılığıyla Web denetimleri ekleyerek içerik sayfasının arabirimini de oluşturabilirsiniz.And just like with any other ASP.NET page, you can create the content page's interface by adding Web controls through the Source or Design views.

Içerik sayfasının Tasarım görünümünde, sayfaya özgü ve ana sayfa Içeriğini görüntüleyen The Content Page's Design View Displays Both the Page-Specific and Master Page Contents

Şekil 09: Içerik sayfasının Tasarım görünümü hem sayfaya özgü hem de ana sayfa içeriğini görüntüler (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 09: The Content Page's Design View Displays Both the Page-Specific and Master Page Contents (Click to view full-size image)

Içerik sayfasına Işaretleme ve Web denetimleri eklemeAdding Markup and Web Controls to the Content Page

About.aspx sayfa için bir içerik oluşturmak için biraz zaman ayırın.Take a moment to create some content for the About.aspx page. Şekil 10 ' da görebileceğiniz gibi, "yazar hakkında" başlığına ve birkaç metin paragrafını girdim, ancak Web denetimleri eklemeyi de ücretsiz olarak kullanabilirsiniz.As you can see in Figure 10, I entered an "About the Author" heading and a couple of paragraphs of text, but feel free to add Web controls, too. Bu arabirimi oluşturduktan sonra tarayıcıda About.aspx sayfasını ziyaret edin.After creating this interface, visit the About.aspx page through a browser.

Browser aracılığıyla about. aspx sayfasını ziyaret edinVisit the About.aspx Page Through a Browser

Şekil 10: tarayıcı aracılığıyla About.aspx sayfasını ziyaret edin (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 10: Visit the About.aspx Page Through a Browser (Click to view full-size image)

İstenen içerik sayfasının ve onunla ilişkili ana sayfanın tamamen Web sunucusunda tamamen kullanıldığını ve tam olarak işleneceğini anlamak önemlidir.It is important to understand that the requested content page and its associated master page are fused and rendered as a whole entirely on the web server. Son kullanıcının tarayıcısı, sonuçta elde edilen ve kullanılmayan HTML 'yi göndermiştir.The end user's browser is then sent the resulting, fused HTML. Bunu doğrulamak için, Görünüm menüsüne gidip kaynak ' ı seçerek tarayıcı tarafından alınan HTML 'yi görüntüleyin.To verify this, view the HTML received by the browser by going to the View menu and choosing Source. Tek bir pencerede iki farklı Web sayfasını görüntülemek için herhangi bir çerçeve veya başka bir özel teknik olmadığına göz önünde unutmayın.Note that there are no frames or any other specialized techniques for displaying two different web pages in a single window.

Ana sayfayı var olan bir ASP.NET sayfasına bağlamaBinding a Master Page to an Existing ASP.NET Page

Bu adımda gördüğümüz gibi, bir ASP.NET Web uygulamasına yeni bir içerik sayfası eklemek, "Ana sayfa seç" onay kutusunu işaretleyerek ve ana sayfanın seçilmesi kadar kolaydır.As we saw in this step, adding a new content page to an ASP.NET web application is as easy as checking the "Select master page" checkbox and picking the master page. Ne yazık ki, var olan bir ASP.NET sayfasını ana sayfaya dönüştürmek çok kolay değildir.Unfortunately, converting an existing ASP.NET page to a master page is not as easy.

Ana sayfayı var olan bir ASP.NET sayfasına bağlamak için aşağıdaki adımları gerçekleştirmeniz gerekir:To bind a master page to an existing ASP.NET page you need to perform the following steps:

  1. MasterPageFile özniteliğini ASP.NET sayfasının @Page yönergesine ekleyerek uygun ana sayfaya işaret edin.Add the MasterPageFile attribute to the ASP.NET page's @Page directive, pointing it to the appropriate master page.
  2. Ana sayfadaki her bir Contenttutucuların için Içerik denetimleri ekleyin.Add Content controls for each of the ContentPlaceHolders in the master page.
  3. ASP.NET sayfasının mevcut içeriğini uygun Içerik denetimlerine seçmeli olarak kesip yapıştırın.Selectively cut and paste the ASP.NET page's existing content into the appropriate Content controls. ASP.NET sayfası büyük olasılıkla ana sayfa tarafından zaten ifade edilen DOCTYPE, <html> öğesi ve Web formu gibi biçimlendirme içerdiğinden, burada "seçmeli" söyledim.I say "selectively" here because the ASP.NET page likely contains markup that's already expressed by the master page, such as the DOCTYPE, the <html> element, and the Web Form.

Bu süreç hakkında, ekran görüntüleriyle birlikte adım adım yönergeler için, ana sayfaları ve site gezinti öğreticisini kullanarak Scott Guthrie' ye göz atın.For step-by-step instructions on this process along with screen shots, check out Scott Guthrie's Using Master Pages and Site Navigation tutorial. "Güncelleştirme Default.aspx ve ana sayfayı kullanmak için DataSample.aspx" bölümünde bu adımlar ayrıntılı olarak yer.The "Update Default.aspx and DataSample.aspx to use the Master Page" section details these steps.

Varolan ASP.NET sayfalarını içerik sayfalarına dönüştürmek yerine yeni içerik sayfaları oluşturmak çok daha kolay olduğundan, siteye bir ana sayfa eklemek için yeni bir ASP.NET Web sitesi oluşturduğunuz her seferinde bu önerilir.Because it is much easier to create new content pages than it is to convert existing ASP.NET pages into content pages, I recommend that whenever you create a new ASP.NET website add a master page to the site. Tüm yeni ASP.NET sayfalarını bu ana sayfaya bağlayın.Bind all new ASP.NET pages to this master page. İlk ana sayfa çok basit veya düz ise endişelenmeyin; Ana sayfayı daha sonra güncelleştirebilirsiniz.Don't worry if the initial master page is very simple or plain; you can update the master page later.

Note

Yeni bir ASP.NET uygulaması oluştururken, Visual Web Developer ana sayfaya bağlanmayan bir Default.aspx sayfası ekler.When creating a new ASP.NET application, Visual Web Developer adds a Default.aspx page that isn't bound to a master page. Varolan bir ASP.NET sayfasını bir içerik sayfasına dönüştürmek istiyorsanız, devam edin ve Default.aspx.If you want to practice converting an existing ASP.NET page into a content page, go ahead and do so with Default.aspx. Alternatif olarak, Default.aspx silip yeniden ekleyebilirsiniz, ancak bu kez "Ana sayfa seç" onay kutusunu işaretleyebilirsiniz.Alternatively, you can delete Default.aspx and then re-add it, but this time checking the "Select master page" checkbox.

3. Adım: ana sayfanın Işaretlemesini güncelleştirmeStep 3: Updating the Master Page's Markup

Ana sayfaların başlıca avantajlarından biri, sitedeki çok sayıda sayfanın genel yerleşimini tanımlamak için tek bir ana sayfanın kullanılabileceği bir ana sayfa olabilir.One of the primary benefits of master pages is that a single master page may be used to define the overall layout for numerous pages on the site. Bu nedenle, sitenin görünüm ve yapısını güncelleştirmek için tek bir dosyanın güncelleştirilmesi gerekir-ana sayfa.Therefore, updating the site's look and feel requires updating a single file - the master page.

Bu davranışı göstermek için ana sayfamızı, sol sütunun en üstünde bulunan geçerli tarihi içerecek şekilde güncelleştirelim.To illustrate this behavior, let's update our master page to include the current date in at the top of the left column. leftContent <div>``DateDisplay adlı bir etiket ekleyin.Add a Label named DateDisplay to the leftContent <div>.

<div id="leftContent">
 <p>
 <asp:Label ID="DateDisplay" runat="server"></asp:Label>
 </p>
 
 <h3>Lessons</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 <h3>News</h3>    
 <ul>
 <li>TODO</li>
 </ul>
</div>

Ardından, ana sayfa için Page_Load bir olay işleyicisi oluşturun ve aşağıdaki kodu ekleyin:Next, create a Page_Load event handler for the master page and add the following code:

protected void Page_Load(object sender, EventArgs e)
{
    DateDisplay.Text = DateTime.Now.ToString("dddd, MMMM dd");
}

Yukarıdaki kod etiketin Text özelliğini, haftanın günü, ayın adı ve iki rakamlı gün olarak biçimlendirilen geçerli tarih ve saate ayarlar (bkz. Şekil 11).The above code sets the Label's Text property to the current date and time formatted as the day of the week, the name of the month, and the two-digit day (see Figure 11). Bu değişiklik ile içerik sayfalarınızın birini yeniden ziyaret edin.With this change, revisit one of your content pages. Şekil 11 ' de gösterildiği gibi, sonuçta elde edilen biçimlendirme, ana sayfaya yapılan değişikliği içerecek şekilde hemen güncelleştirilir.As Figure 11 shows, the resulting markup is immediately updated to include the change to the master page.

ana sayfadaki değişiklikler, Içerik sayfası görüntülenirken yansıtılırThe Changes to the Master Page are Reflected When Viewing the a Content Page

Şekil 11: Ana sayfadaki değişiklikler bir Içerik sayfası görüntülenirken yansıtılır (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 11: The Changes to the Master Page are Reflected When Viewing the a Content Page (Click to view full-size image)

Note

Bu örnekte gösterildiği gibi, ana sayfalar sunucu tarafı Web denetimleri, kod ve olay işleyicileri içerebilir.As this example illustrates, master pages may contain server-side Web controls, code, and event handlers.

ÖzetSummary

Ana sayfalar, ASP.NET geliştiricilerin kolayca güncelleştirilebilir olan tutarlı bir site genelinde düzen tasarlamasını sağlar.Master pages enable ASP.NET developers to design a consistent site-wide layout that is easily updateable. Visual Web Developer zengin tasarım zamanı desteği sağladığından, ana sayfaların ve ilişkili içerik sayfalarının oluşturulması, standart ASP.NET sayfaları oluşturma kadar basittir.Creating master pages and their associated content pages is as simple as creating standard ASP.NET pages, as Visual Web Developer offers rich design-time support.

Bu öğreticide oluşturduğumuz ana sayfa örneği, head ve MainContentiki ContentPlaceHolder denetimine sahipti.The master page example we created in this tutorial had two ContentPlaceHolder controls, head and MainContent. Ancak içerik sayfamızda MainContent ContentPlaceHolder denetimi için yalnızca biçimlendirme belirledik.We only specified markup for the MainContent ContentPlaceHolder control in our content page, however. Bir sonraki öğreticide, içerik sayfasında birden çok Içerik denetimi kullanmayı inceleyeceğiz.In the next tutorial we look at using multiple Content controls in the content page. Ana sayfada Içerik denetimleri için varsayılan biçimlendirmeyi nasıl tanımlayacağınızı ve ana sayfada tanımlanan varsayılan biçimlendirmeyi kullanma ve içerik sayfasından özel biçimlendirme sağlama arasında da görüyoruz.We also see how to define default markup for Content controls within the master page, as well as how to toggle between using the default markup defined in the master page and providing custom markup from the content page.

Programlamanın kutlu olsun!Happy Programming!

Daha Fazla BilgiFurther Reading

Bu öğreticide ele alınan konular hakkında daha fazla bilgi için aşağıdaki kaynaklara bakın:For more information on the topics discussed in this tutorial, refer to the following resources:

Yazar hakkındaAbout the Author

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 Mitchell, author of multiple ASP/ASP.NET books and founder of 4GuysFromRolla.com, has been working with Microsoft Web technologies since 1998. Scott bağımsız danışman, Trainer ve yazıcı olarak çalışıyor.Scott works as an independent consultant, trainer, and writer. En son kitabı, 24 saat içinde ASP.NET 3,5 kendi kendinize eğitimister.His latest book is Sams Teach Yourself ASP.NET 3.5 in 24 Hours. Scott 'a mitchell@4GuysFromRolla.com veya blogundan http://ScottOnWriting.NETüzerinden erişilebilir.Scott can be reached at mitchell@4GuysFromRolla.com or via his blog at http://ScottOnWriting.NET.

Özel olarak teşekkürlerSpecial Thanks To

Yaklaşan MSDN makalelerimi gözden geçiriyor musunuz?Interested in reviewing my upcoming MSDN articles? Öyleyse, beni mitchell@4GuysFromRolla.combir satır bırakın.If so, drop me a line at mitchell@4GuysFromRolla.com.