Görünüm Ana Sayfalarıyla Sayfa Düzenleri Oluşturma (C#)Creating Page Layouts with View Master Pages (C#)

Microsoft tarafındanby Microsoft

PDF’yi İndirDownload PDF

Bu öğreticide, ana sayfaları görüntüleyerek uygulamanızdaki birden çok sayfa için ortak bir sayfa düzeni oluşturmayı öğrenirsiniz.In this tutorial, you learn how to create a common page layout for multiple pages in your application by taking advantage of view master pages. Örneğin, iki sütunlu bir sayfa düzenini tanımlamak ve web uygulamanızdaki tüm sayfalar için iki sütunlu düzeni kullanmak için bir görünüm ana sayfası kullanabilirsiniz.You can use a view master page, for example, to define a two-column page layout and use the two-column layout for all of the pages in your web application.

Ana Sayfaları Görüntüle ile Sayfa Düzenleri OluşturmaCreating Page Layouts with View Master Pages

Bu öğreticide, ana sayfaları görüntüleyerek uygulamanızdaki birden çok sayfa için ortak bir sayfa düzeni oluşturmayı öğrenirsiniz.In this tutorial, you learn how to create a common page layout for multiple pages in your application by taking advantage of view master pages. Örneğin, iki sütunlu bir sayfa düzenini tanımlamak ve web uygulamanızdaki tüm sayfalar için iki sütunlu düzeni kullanmak için bir görünüm ana sayfası kullanabilirsiniz.You can use a view master page, for example, to define a two-column page layout and use the two-column layout for all of the pages in your web application.

Ayrıca, uygulamanızdaki birden çok sayfada ortak içeriği paylaşmak için ana sayfaları görüntüleme avantajından da yararlanabilirsiniz.You also can take advantage of view master pages to share common content across multiple pages in your application. Örneğin, web sitenizin logosunu, gezinme bağlantılarını ve banner reklamlarınızı bir görünüm ana sayfasına yerleştirebilirsiniz.For example, you can place your website logo, navigation links, and banner advertisements in a view master page. Bu şekilde, uygulamanızdaki her sayfa bu içeriği otomatik olarak görüntüler.That way, every page in your application would display this content automatically.

Bu öğreticide, yeni bir görünüm ana sayfası oluşturmayı ve ana sayfayı temel alan yeni bir görünüm içeriği sayfası oluşturmayı öğrenirsiniz.In this tutorial, you learn how to create a new view master page and create a new view content page based on the master page.

Görünüm Ana Sayfası OluşturmaCreating a View Master Page

İki sütunlu düzeni tanımlayan bir görünüm ana sayfası oluşturarak başlayalım.Let's start by creating a view master page that defines a two-column layout. Görünümler\Paylaşılan klasörüne sağ tıklayarak, Ekle, Yeni Öğeve MVC Görünüm Ana Sayfa şablonu seçeneğini seçerek MVC projesine yeni bir görünüm ana sayfası eklersiniz (Bkz. Şekil 1).You add a new view master page to an MVC project by right-clicking the Views\Shared folder, selecting the menu option Add, New Item, and selecting the MVC View Master Page template (see Figure 1).

Görünüm ana sayfası eklemeAdding a view master page

Şekil 01: Görünüm ana sayfası ekleme (Tam boyutlu resmi görüntülemek için tıklayınız)Figure 01: Adding a view master page (Click to view full-size image)

Bir uygulamada birden fazla görünüm ana sayfası oluşturabilirsiniz.You can create more than one view master page in an application. Her görünüm ana sayfası farklı bir sayfa düzeni tanımlayabilir.Each view master page can define a different page layout. Örneğin, belirli sayfaların iki sütunlu düzeni ve diğer sayfaların üç sütunlu düzeni olmasını isteyebilirsiniz.For example, you might want certain pages to have a two-column layout and other pages to have a three-column layout.

Görünüm ana sayfası standart ASP.NET MVC görünümüne çok benzer.A view master page looks very much like a standard ASP.NET MVC view. Ancak, normal görünümün aksine, görünüm ana <asp:ContentPlaceHolder> sayfası bir veya daha fazla etiket içerir.However, unlike a normal view, a view master page contains one or more <asp:ContentPlaceHolder> tags. Etiketler, <contentplaceholder> ana sayfanın tek bir içerik sayfasında geçersiz kılınabilecek alanlarını işaretlemek için kullanılır.The <contentplaceholder> tags are used to mark the areas of the master page that can be overridden in an individual content page.

Örneğin, Listeleme 1'deki görünüm ana sayfası iki sütunlu düzeni tanımlar.For example, the view master page in Listing 1 defines a two-column layout. İki <contentplaceholder> etiket içeriyor.It contains two <contentplaceholder> tags. Her <ContentPlaceHolder> sütun için bir tane.One <ContentPlaceHolder> for each column.

İlan 1 –Views\Shared\Site.masterListing 1 – Views\Shared\Site.master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.Master.cs" Inherits="MvcApplication1.Views.Shared.Main" %>
<!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 id="Head1" runat="server">
     <title></title>

     <style type="text/css">

     html
     {
           background-color:gray;
     }

     .column
     {
          float:left;
          width:300px;
          border:solid 1px black;
          margin-right:10px;
          padding:5px;
          background-color:white;

          min-height:500px;
     }

     </style>

     <asp:ContentPlaceHolder ID="head" runat="server">
     </asp:ContentPlaceHolder>
</head>
<body>

     <h1>My Website</h1>

     <div class="column">
          <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
          </asp:ContentPlaceHolder>
     </div>
     <div class="column">
          <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
          </asp:ContentPlaceHolder>
     </div>

</body>
</html>

Listeleme 1'deki görünüm ana sayfasının gövdesi, iki sütuna karşılık gelen iki <div> etiket içerir.The body of the view master page in Listing 1 contains two <div> tags that correspond to the two columns. Basamaklı Stil Sayfası sütun sınıfı her <div> iki etikete de uygulanır.The Cascading Style Sheet column class is applied to both <div> tags. Bu sınıf, ana sayfanın üst kısmında bildirilen stil sayfasında tanımlanır.This class is defined in the style sheet declared at the top of the master page. Tasarım görünümüne geçerek görünüm ana sayfasının nasıl oluşturulacağını önizleyebilirsiniz.You can preview how the view master page will be rendered by switching to Design view. Kaynak kod düzenleyicisinin sol alt kısmındaki Tasarım sekmesini tıklatın (Bkz. Şekil 2).Click the Design tab at the bottom-left of the source code editor (see Figure 2).

Tasarımcıda ana sayfaönizlemePreviewing a master page in the designer

Şekil 02: Tasarımcıda bir ana sayfanın önizlemesi (Tam boyutlu görüntüyü görüntülemek için tıklayınız)Figure 02: Previewing a master page in the designer (Click to view full-size image)

Görünüm İçerik Sayfası OluşturmaCreating a View Content Page

Bir görünüm ana sayfası oluşturduktan sonra, görünüm ana sayfasına göre bir veya daha fazla görünüm içerik sayfası oluşturabilirsiniz.After you create a view master page, you can create one or more view content pages based on the view master page. Örneğin, Görünümler\Ana klasörüne sağ tıklayarak, Ekle, Yeni Öğe, MVC Görünüm İçerik Sayfası şablonu seçeneğini seçerek, Index.aspx adını girerek ve Ekle düğmesini tıklatarak Ana Sayfa denetleyicisi için Bir Dizin görünümü içerik sayfası oluşturabilirsiniz (Bkz. Şekil 3).For example, you can create an Index view content page for the Home controller by right-clicking the Views\Home folder, selecting Add, New Item, selecting the MVC View Content Page template, entering the name Index.aspx, and clicking the Add button (see Figure 3).

Görünüm içeriği sayfası eklemeAdding a view content page

Şekil 03: Görünüm içerik sayfası ekleme (Tam boyutlu görüntüyü görüntülemek için tıklayınız)Figure 03: Adding a view content page (Click to view full-size image)

Ekle düğmesini tıklattıktan sonra, görünüm içeriği sayfasıyla ilişkilendirmek için bir görünüm ana sayfası seçmenize olanak tanıyan yeni bir iletişim kutusu görüntülenir (Bkz. Şekil 4).After you click the Add button, a new dialog appears that enables you to select a view master page to associate with the view content page (see Figure 4). Bir önceki bölümde oluşturduğumuz Site.master görünüm ana sayfasına gidebilirsiniz.You can navigate to the Site.master view master page that we created in the previous section.

Ana sayfa seçmeSelecting a master page

Şekil 04: Ana sayfa seçme (Tam boyutlu resmi görüntülemek için tıklayınız)Figure 04: Selecting a master page (Click to view full-size image)

Site.master ana sayfasına dayalı yeni bir görünüm içerik sayfası oluşturduktan sonra, dosyayı Listeleme 2'de alırsınız.After you create a new view content page based on the Site.master master page, you get the file in Listing 2.

Listeleme 2 –Views\Home\Index.aspxListing 2 – Views\Home\Index.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
</asp:Content>

Bu görünümün, <asp:Content> görünüm ana sayfasındaki <asp:ContentPlaceHolder> etiketlerin her birine karşılık gelen bir etiket içerdiğine dikkat edin.Notice that this view contains a <asp:Content> tag that corresponds to each of the <asp:ContentPlaceHolder> tags in the view master page. Her <asp:Content> etiket, geçersiz kıladığı özelliğe <asp:ContentPlaceHolder> işaret eden bir ContentPlaceHolderID özniteliği içerir.Each <asp:Content> tag includes a ContentPlaceHolderID attribute that points to the particular <asp:ContentPlaceHolder> that it overrides.

Ayrıca, Listeleme 2'deki içerik görüntüleme sayfasının normal açılış ve kapanış HTML etiketlerinden hiçbirini içermediğine dikkat edin.Notice, furthermore, that the content view page in Listing 2 does not contain any of the normal opening and closing HTML tags. Örneğin, açma ve kapatma <html> veya <head> etiketleri içermez.For example, it does not contain the opening and closing <html> or <head> tags. Normal açılış ve kapanış etiketlerinin tümü görünüm ana sayfasında bulunur.All of the normal opening and closing tags are contained in the view master page.

Görünüm içerik sayfasında görüntülemek istediğiniz tüm içerikler etiketin <asp:Content> içine yerleştirilmelidir.Any content that you want to display in a view content page must be placed within a <asp:Content> tag. Bu etiketlerin dışına herhangi bir HTML veya başka içerik yerseniz, sayfayı görüntülemeye çalıştığınızda bir hata alırsınız.If you place any HTML or other content outside of these tags, then you will get an error when you attempt to view the page.

İçerik görüntüleme sayfasındaki ana <asp:ContentPlaceHolder> sayfadaki her etiketi geçersiz kılmanız gerekmez.You don't need to override every <asp:ContentPlaceHolder> tag from a master page in a content view page. Etiketi yalnızca belirli içerikle değiştirmek istediğinizde bir <asp:ContentPlaceHolder> etiketi geçersiz kılmanız gerekir.You only need to override a <asp:ContentPlaceHolder> tag when you want to replace the tag with particular content.

Örneğin, Listeleme 3'teki değiştirilmiş Dizin görünümü yalnızca iki <asp:Content> etiket içerir.For example, the modified Index view in Listing 3 contains only two <asp:Content> tags. Etiketlerin <asp:Content> her biri bazı metin içerir.Each of the <asp:Content> tags includes some text.

İlan 3 –Views\Home\Index.aspx (modified)Listing 3 – Views\Home\Index.aspx (modified)

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

     <h1>Content in first column!</h1>

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">

     <h1>Content in second column!</h1>

</asp:Content>

Listeleme 3'teki görünüm istendiğinde, sayfayı Şekil 5'te işler.When the view in Listing 3 is requested, it renders the page in Figure 5. Görünümün iki sütunlu bir sayfa yı işlettiğine dikkat edin.Notice that the view renders a page with two columns. Ayrıca, görünüm içeriği sayfasındaki içeriğin görünüm ana sayfasındaki içerikle birleştirilmesine dikkat edinNotice, furthermore, that the content from the view content page is merged with the content from the view master page

Dizin görünümü içerik sayfasıThe Index view content page

Şekil 05: Dizin görünümü içerik sayfası (Tam boyutlu resmi görüntülemek için tıklayınız)Figure 05: The Index view content page (Click to view full-size image)

Ana Sayfa İçeriğini GörüntüleModifying View Master Page Content

Görünüm ana sayfalarıyla çalışırken hemen karşılaştığınız bir sorun, farklı görünüm içerik sayfaları istendiğinde ana sayfa içeriğini görüntüleme sorunudur.One issue that you encounter almost immediately when working with view master pages is the problem of modifying view master page content when different view content pages are requested. Örneğin, web uygulamanızdaki her sayfanın benzersiz bir başlığa sahip olmasını istiyorsunuz.For example, you want each page in your web application to have a unique title. Ancak, başlık görünüm içeriği sayfasında değil, görünüm ana sayfasında bildirilir.However, the title is declared in the view master page and not in the view content page. Peki, her görünüm içeriği sayfası için sayfa başlığını nasıl özelleştirebilirsiniz?So, how do you customize the page title for each view content page?

Görünüm içeriği sayfası tarafından görüntülenen başlığı değiştirmenin iki yolu vardır.There are two ways that you can modify the title displayed by a view content page. İlk olarak, bir görünüm içeriği sayfasının üst <%@ page %> kısmında bildirilen yönergenin başlık özniteliğine bir sayfa başlığı atayabilirsiniz.First, you can assign a page title to the title attribute of the <%@ page %> directive declared at the top of a view content page. Örneğin, "Süper Harika Web Sitesi" sayfabaşlığını Dizin görünümüne atamak istiyorsanız, Dizin görünümünün üst bölümüne aşağıdaki yönergeyi ekleyebilirsiniz:For example, if you want to assign the page title "Super Great Website" to the Index view, then you can include the following directive at the top of the Index view:

<%@ page title="Super Great Website" language="C#" masterpagefile="~/Views/Shared/Site.Master"
            autoeventwireup="true" codebehind="Index.aspx.cs" inherits="MvcApplication1.Views.Home.Index"%>

Dizin görünümü tarayıcıya işlendiğinde, istenen başlık tarayıcı başlık çubuğunda görünür:When the Index view is rendered to the browser, the desired title appears in the browser title bar:

Tarayıcı başlık çubuğuBrowser title bar

Başlık özniteliğinin çalışabilmesi için ana görünüm sayfasının karşılaması gereken önemli bir gereksinim vardır.There is one important requirement that a master view page must satisfy in order for the title attribute to work. Görünüm ana sayfası üstbilgi için <head runat="server"> normal <head> bir etiket yerine bir etiket içermelidir.The view master page must contain a <head runat="server"> tag instead of a normal <head> tag for its header. <head> Etiket runat="server" özniteliğini içermiyorsa, başlık görünmez.If the <head> tag does not include the runat="server" attribute then the title won't appear. Varsayılan görünüm ana sayfası <head runat="server"> gerekli etiketi içerir.The default view master page includes the required <head runat="server"> tag.

Ana sayfa içeriğini tek bir görünüm içeriği sayfasından değiştirmek için alternatif bir yaklaşım, <asp:ContentPlaceHolder> değiştirmek istediğiniz bölgeyi bir etikette kaydırmaktır.An alternative approach to modifying master page content from an individual view content page is to wrap the region that you want to modify in a <asp:ContentPlaceHolder> tag. Örneğin, yalnızca başlığı değil, aynı zamanda ana görünüm sayfası tarafından işlenen meta etiketlerini de değiştirmek istediğinizi düşünün.For example, imagine that you want to change not only the title, but also the meta tags, rendered by a master view page. Listeleme 4'teki ana <asp:ContentPlaceHolder> görünüm sayfası <head> etiketinde bir etiket içerir.The master view page in Listing 4 contains a <asp:ContentPlaceHolder> tag within its <head> tag.

İlan 4 –Views\Shared\Site2.masterListing 4 – Views\Shared\Site2.master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site2.Master.cs" Inherits="MvcApplication1.Views.Shared.Site2" %>
<!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>

     <asp:ContentPlaceHolder ID="head" runat="server">
          <title>Please change my title</title>
          <meta name="description" content="Please provide a description" />
          <meta name="keywords" content="keyword1,keyword2" />
     </asp:ContentPlaceHolder>
</head>
<body>
     <div>

          <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

          </asp:ContentPlaceHolder>
     </div>
</body>
</html>

Listeleme <asp:ContentPlaceHolder> 4'teki etiketin varsayılan içeriği içerdiğine dikkat edin: varsayılan başlık ve varsayılan meta etiketleri.Notice that the <asp:ContentPlaceHolder> tag in Listing 4 includes default content: a default title and default meta tags. Bu <asp:ContentPlaceHolder> etiketi tek bir görüntüleme içeriği sayfasında geçersiz kılmazsanız, varsayılan içerik görüntülenir.If you don't override this <asp:ContentPlaceHolder> tag in an individual view content page, then the default content will be displayed.

Listeleme 5'teki içerik görüntüleme <asp:ContentPlaceHolder> sayfası, özel bir başlık ve özel meta etiketleri görüntülemek için etiketi geçersiz kılar.The content view page in Listing 5 overrides the <asp:ContentPlaceHolder> tag in order to display a custom title and custom meta tags.

İlan 5 –Views\Home\Index2.aspxListing 5 – Views\Home\Index2.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site2.Master" AutoEventWireup="true" CodeBehind="Index2.aspx.cs" Inherits="MvcApplication1.Views.Home.Index2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
     <title>The Index2 Page</title>
     <meta name="description" content="Description of Index2 page" />
     <meta name="keywords" content="asp.net,mvc,cool,groovy" />    
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

     Just some content in the body of the page.

</asp:Content>

ÖzetSummary

Bu öğretici, ana sayfaları görüntülemek ve içerik sayfalarını görüntülemek için temel bir giriş sağlar.This tutorial provided you with a basic introduction to view master pages and view content pages. Yeni görünüm ana sayfaları oluşturmayı ve bunlara dayalı görünüm içerik sayfaları oluşturmayı öğrendiniz.You learned how to create new view master pages and create view content pages based on them. Ayrıca, belirli bir görünüm içeriği sayfasından bir görünüm ana sayfasının içeriğini nasıl değiştirebileceğinizi de inceledik.We also examined how you can modify the content of a view master page from a particular view content page.