ASP.NET Web Pages (Razor) sitelerinde tutarlı bir düzen oluşturmaCreating a Consistent Layout in ASP.NET Web Pages (Razor) Sites

Tom FitzMacken tarafındanby Tom FitzMacken

Bu makalede, bir ASP.NET Web Pages (Razor) Web sitesinde düzen sayfalarını kullanarak, yeniden kullanılabilir içerik blokları (üstbilgiler ve altbilgiler gibi) oluşturma ve sitedeki tüm sayfalar için tutarlı bir görünüm oluşturma işlemleri açıklanmaktadır.This article explains how you can use layout pages in an ASP.NET Web Pages (Razor) website to create reusable blocks of content (like headers and footers) and to create a consistent look for all the pages in the site.

Şunları öğreneceksiniz:What you'll learn:

  • Üst bilgiler ve altbilgiler gibi yeniden kullanılabilir içerik blokları oluşturma.How to create reusable blocks of content like headers and footers.
  • Bir düzen kullanarak sitenizdeki tüm sayfalar için tutarlı bir görünüm oluşturma.How to create a consistent look for all the pages in your site using a layout.
  • Çalışma zamanında verileri bir düzen sayfasına geçirme.How to pass data at run time to a layout page.

Makalesinde sunulan ASP.NET özellikleri şunlardır:These are the ASP.NET features introduced in the article:

  • Birden çok sayfaya eklenecek HTML biçimli içerik içeren dosyalar olan içerik blokları.Content blocks, which are files that contain HTML-formatted content to be inserted in multiple pages.
  • Web sitesindeki sayfalarla paylaşılabilen, HTML biçimli içerik içeren sayfalar olan düzen sayfaları.Layout pages, which are pages that contain HTML-formatted content that can be shared by pages on the website.
  • RenderPage, RenderBodyve RenderSection yöntemleri, bu da sayfa öğelerinin nereye ekleneceği ASP.NET bildirir.The RenderPage, RenderBody, and RenderSection methods, which tell ASP.NET where to insert page elements.
  • İçerik blokları ve düzen sayfaları arasında veri paylaşmanıza olanak sağlayan PageData sözlüğü.The PageData dictionary that lets you share data between content blocks and layout pages.

Öğreticide kullanılan yazılım sürümleriSoftware versions used in the tutorial

  • ASP.NET Web sayfaları (Razor) 3ASP.NET Web Pages (Razor) 3

Bu öğretici, ASP.NET Web Pages 2 ile de kullanılabilir.This tutorial also works with ASP.NET Web Pages 2.

Düzen sayfaları hakkındaAbout Layout Pages

Birçok Web sitesinde, bir üst bilgi ve altbilgi gibi her sayfada görüntülenen içerik veya kullanıcılara oturum açtığı kullanıcılara söyleyen bir kutu vardır.Many websites have content that's displayed on every page, like a header and footer, or a box that tells users that they're logged in. ASP.NET, yalnızca normal bir Web sayfası gibi metin, biçimlendirme ve kod içerebilen bir içerik bloğu ile ayrı bir dosya oluşturmanıza olanak sağlar.ASP.NET lets you create a separate file with a content block that can contain text, markup, and code, just like a regular web page. Daha sonra içerik bloğunu, bilgilerin görünmesini istediğiniz sitede diğer sayfalara ekleyebilirsiniz.You can then insert the content block in other pages on the site where you want the information to appear. Bu şekilde, aynı içeriği her sayfaya kopyalayıp yapıştırmanıza gerek kalmaz.That way you don't have to copy and paste the same content into every page. Bu gibi yaygın içerik oluşturmak sitenizin güncelleştirilmesini de kolaylaştırır.Creating common content like this also makes it easier to update your site. İçeriği değiştirmeniz gerekiyorsa yalnızca tek bir dosyayı güncelleştirebilir ve değişiklikler içeriğin eklendiği her yerde yansıtılır.If you need to change the content, you can just update a single file, and the changes are then reflected everywhere the content has been inserted.

Aşağıdaki diyagramda, içerik bloklarının nasıl çalıştığı gösterilmektedir.The following diagram shows how content blocks work. Bir tarayıcı web sunucusundan bir sayfa istediğinde, ASP.NET, ana sayfada RenderPage yönteminin çağrıldığı noktaya içerik blokları ekler.When a browser requests a page from the web server, ASP.NET inserts the content blocks at the point where the RenderPage method is called in the main page. Tamamlandı (birleştirilmiş) sayfası tarayıcıya gönderilir.The finished (merged) page is then sent to the browser.

RenderPage yönteminin geçerli sayfaya başvurulan bir sayfa ekleme şeklini gösteren kavramsal diyagram.

Bu yordamda, ayrı dosyalarda bulunan iki içerik blobuna (bir üst bilgi ve alt bilgi) başvuran bir sayfa oluşturacaksınız.In this procedure, you'll create a page that references two content blocks (a header and a footer) that are located in separate files. Aynı içerik bloklarını sitenizdeki herhangi bir sayfada kullanabilirsiniz.You can use these same content blocks in any page in your site. İşiniz bittiğinde şöyle bir sayfa alacaksınız:When you're done, you'll get a page like this:

Tarayıcıdaki bir sayfayı, RenderPage yöntemine yapılan çağrıları içeren bir sayfanın çalıştırılmasının sonucu gösteren ekran görüntüsü.

  1. Web sitenizin kök klasöründe Index. cshtmladlı bir dosya oluşturun.In the root folder of your website, create a file named Index.cshtml.

  2. Varolan biçimlendirmeyi aşağıdaki kodla değiştirin:Replace the existing markup with the following:

    <!DOCTYPE html>
    <html>
      <head>
        <title>Main Page</title>
      </head>
      <body>
    
        <h1>Index Page Content</h1>
        <p>This is the content of the main page.</p>
    
      </body>
    </html>
    
  3. Kök klasörde, paylaşılanadlı bir klasör oluşturun.In the root folder, create a folder named Shared.

    Note

    Paylaşılanadlı bir klasörde Web sayfaları arasında paylaşılan dosyaları depolamak yaygın bir uygulamadır.It's common practice to store files that are shared among web pages in a folder named Shared.

  4. Paylaşılan klasörde, _Header. cshtmladlı bir dosya oluşturun.In the Shared folder, create a file named _Header.cshtml.

  5. Var olan tüm içerikleri aşağıdakiler ile değiştirin:Replace any existing content with the following:

    <div class="header">This is header text.</div>
    

    Dosya adının üst çizgi (_) bir ön ek olarak _Header. cshtmlolduğuna dikkat edin.Notice that the file name is _Header.cshtml, with an underscore (_) as a prefix. ASP.NET, adı bir alt çizgiyle başlıyorsa tarayıcıya sayfa göndermez.ASP.NET won't send a page to the browser if its name starts with an underscore. Bu, kullanıcıların bu sayfaları doğrudan istememelerini (farkında veya başka şekilde) engeller.This prevents people from requesting (inadvertently or otherwise) these pages directly. Kullanıcıların bu sayfaları — yalnızca diğer sayfalara eklenmesine izin vermek istemediğiniz için, bir alt çizgi kullanarak bunlarda içerik blokları olan sayfaları da kullanabilirsiniz.It's a good idea to use an underscore to name pages that have content blocks in them, because you don't really want users to be able to request these pages — they exist strictly to be inserted into other pages.

  6. Paylaşılan klasörde, _footer. cshtml adlı bir dosya oluşturun ve içeriği aşağıdaki ile değiştirin:In the Shared folder, create a file named _Footer.cshtml and replace the content with the following:

    <div class="footer">&copy; 2012 Contoso Pharmaceuticals. All rights reserved.
    </div>
    
  7. Index. cshtml sayfasında, RenderPage yöntemine aşağıda gösterildiği gibi iki çağrı ekleyin:In the Index.cshtml page, add two calls to the RenderPage method, as shown here:

    <!DOCTYPE html>
    <html>
      <head>
        <title>Main Page</title>
      </head>
      <body>
    
        @RenderPage("~/Shared/_Header.cshtml")
    
        <h1>Index Page Content</h1>
        <p>This is the content of the main page.</p>
    
        @RenderPage("~/Shared/_Footer.cshtml")
    
      </body>
    </html>
    

    Bu, bir Web sayfasına içerik bloğunun nasıl ekleneceğini gösterir.This shows how to insert a content block into a web page. RenderPage yöntemini çağırır ve bu noktada içeriğini eklemek istediğiniz dosyanın adını geçirin.You call the RenderPage method and pass it the name of the file whose contents you want to insert at that point. Burada, _Header. cshtml ve _footer. cshtml dosyalarının içeriğini Index. cshtml dosyasına yerleştiriyoruz.Here, you're inserting the contents of the _Header.cshtml and _Footer.cshtml files into the Index.cshtml file.

  8. Index. cshtml sayfasını bir tarayıcıda çalıştırın.Run the Index.cshtml page in a browser. (WebMatrix 'te dosyalar çalışma alanında, dosyaya sağ tıklayın ve ardından tarayıcıda Başlat' ı seçin.)(In WebMatrix, in the Files workspace, right-click the file and then select Launch in browser.)

  9. Tarayıcıda, sayfa kaynağını görüntüleyin.In the browser, view the page source. (Örneğin, Internet Explorer 'da, sayfaya sağ tıklayın ve kaynağı görüntüle' ye tıklayın.)(For example, in Internet Explorer, right-click the page and then click View Source.)

    Bu, Dizin sayfası işaretlemesini içerik bloklarıyla birleştiren tarayıcıya gönderilen Web sayfası işaretlemesini görmenizi sağlar.This lets you see the web page markup that's sent to the browser, which combines the index page markup with the content blocks. Aşağıdaki örnek, Index. cshtmliçin işlenen sayfa kaynağını gösterir.The following example shows the page source that's rendered for Index.cshtml. Index. cshtml içine eklediğiniz RenderPage çağrıları, üst bilgi ve altbilgi dosyalarının gerçek içeriğiyle değiştirilmiştir.The calls to RenderPage that you inserted into Index.cshtml have been replaced with the actual contents of the header and footer files.

    <!DOCTYPE html>
    <html>
      <head>
        <title>Main Page</title>
      </head>
      <body>
    
      <div class="header">
        This is header text.
      </div>
    
        <h1>Index Page Content</h1>
        <p>This is the content of the main page.</p>
    
      <div class="footer">
        &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
      </div>
    
      </body>
    </html>
    

Düzen sayfaları kullanarak tutarlı bir görünüm oluşturmaCreating a Consistent Look Using Layout Pages

Şimdiye kadar, aynı içeriği birden çok sayfaya eklemek kolay olduğunu gördünüz.So far you've seen that it's easy to include the same content on multiple pages. Bir site için tutarlı bir görünüm oluşturmaya yönelik daha yapılandırılmış bir yaklaşım, düzen sayfalarını kullanmaktır.A more structured approach to creating a consistent look for a site is to use layout pages. Düzen sayfası bir Web sayfasının yapısını tanımlar, ancak hiçbir gerçek içeriği içermez.A layout page defines the structure of a web page, but doesn't contain any actual content. Bir düzen sayfası oluşturduktan sonra içeriği içeren Web sayfaları oluşturabilir ve ardından bunları düzen sayfasına bağlayabilirsiniz.After you've created a layout page, you can create web pages that contain the content and then link them to the layout page. Bu sayfalar görüntülendiğinde, düzen sayfasına göre biçimlendirilir.When these pages are displayed, they'll be formatted according to the layout page. (Bu anlamda, Düzen sayfası diğer sayfalarda tanımlanmış içerik için şablon türü olarak davranır.)(In this sense, a layout page acts as a kind of template for content that's defined in other pages.)

Düzen sayfası, her HTML sayfası gibi olduğundan, RenderBody yöntemine bir çağrı içerir.The layout page is just like any HTML page, except that it contains a call to the RenderBody method. Düzen sayfasındaki RenderBody yönteminin konumu, içerik sayfasındaki bilgilerin nereye ekleneceğini belirler.The position of the RenderBody method in the layout page determines where the information from the content page will be included.

Aşağıdaki diyagramda, tamamlanmış Web sayfasını oluşturmak için içerik sayfaları ve düzen sayfalarının çalışma zamanında nasıl birleştirileceği gösterilmektedir.The following diagram shows how content pages and layout pages are combined at run time to produce the finished web page. Tarayıcı bir içerik sayfası ister.The browser requests a content page. İçerik sayfasında, sayfanın yapısı için kullanılacak düzen sayfasını belirten kod bulunur.The content page has code in it that specifies the layout page to use for the page's structure. Düzen sayfasında, içerik RenderBody yönteminin çağrıldığı noktaya eklenir.In the layout page, the content is inserted at the point where the RenderBody method is called. İçerik blokları, önceki bölümde yaptığınız şekilde RenderPage yöntemi çağırarak düzen sayfasına da eklenebilir.Content blocks can also be inserted into the layout page by calling the RenderPage method, the way you did in the previous section. Web sayfası tamamlandığında tarayıcıya gönderilir.When the web page is complete, it's sent to the browser.

Tarayıcıdaki bir sayfayı, RenderBody metoduna yapılan çağrıları içeren bir sayfanın çalıştırılmasının sonucu gösteren ekran görüntüsü.

Aşağıdaki yordamda, bir düzen sayfası oluşturma ve içerik sayfalarını buna bağlama gösterilmektedir.The following procedure shows how to create a layout page and link content pages to it.

  1. Web sitenizin paylaşılan klasöründe, _layout1. cshtmladlı bir dosya oluşturun.In the Shared folder of your website, create a file named _Layout1.cshtml.

  2. Var olan tüm içerikleri aşağıdakiler ile değiştirin:Replace any existing content with the following:

    <!DOCTYPE html>
    <html>
      <head>
        <title>Structured Content </title>
        <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
      </head>
      <body>
        @RenderPage("~/Shared/_Header2.cshtml")
        <div id="main">
          @RenderBody()
        </div>
        <div id="footer">
          &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
        </div>
      </body>
    </html>
    

    İçerik blokları eklemek için bir düzen sayfasında RenderPage yöntemini kullanırsınız.You use the RenderPage method in a layout page to insert content blocks. Düzen sayfası RenderBody metoduna yalnızca bir çağrı içerebilir.A layout page can contain only one call to the RenderBody method.

  3. Paylaşılan klasörde, _Header2. cshtml adlı bir dosya oluşturun ve var olan tüm içerikleri şu şekilde değiştirin:In the Shared folder, create a file named _Header2.cshtml and replace any existing content with the following:

    <div id="header">Creating a Consistent Look</div>
    
  4. Kök klasörde yeni bir klasör oluşturun ve bu klasöre göre stilleriadlandırın.In the root folder, create a new folder and name it Styles.

  5. Stiller klasöründe, site. css adlı bir dosya oluşturun ve aşağıdaki stil tanımlarını ekleyin:In the Styles folder, create a file named Site.css and add the following style definitions:

    h1 {
        border-bottom: 3px solid #cc9900;
        font: 2.75em/1.75em Georgia, serif;
        color: #996600;
    }
    
    ul {
        list-style-type: none;
    }
    
    body {
        margin: 0;
        padding: 1em;
        background-color: #ffffff;
        font: 75%/1.75em "Trebuchet MS", Verdana, sans-serif;
        color: #006600;
    }
    
    #list {
        margin: 1em 0 7em -3em;
        padding: 1em 0 0 0;
        background-color: #ffffff;
        color: #996600;
        width: 25%;
        float: left;
    }
    
    #header, #footer {
        margin: 0;
        padding: 0;
        color: #996600;
    }
    

    Bu stil tanımları yalnızca, düzen sayfalarıyla birlikte stil sayfalarının nasıl kullanılabileceğini göstermek için geçerlidir.These style definitions are here only to show how style sheets can be used with layout pages. İsterseniz, bu öğeler için kendi stillerinizi tanımlayabilirsiniz.If you want, you can define your own styles for these elements.

  6. Kök klasörde, Content1. cshtml adlı bir dosya oluşturun ve var olan tüm içerikleri şu şekilde değiştirin:In the root folder, create a file named Content1.cshtml and replace any existing content with the following:

    @{
        Layout = "~/Shared/_Layout1.cshtml";
    }
    
    <h1> Structured Content </h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
    culpa qui officia deserunt mollit anim id est laborum.</p>
    

    Bu, Düzen sayfası kullanacak bir sayfasıdır.This is a page that will use a layout page. Sayfanın üst kısmındaki kod bloğu, bu içeriği biçimlendirmek için hangi düzen sayfasının kullanılacağını gösterir.The code block at the top of the page indicates which layout page to use to format this content.

  7. Tarayıcıda Content1. cshtml dosyasını çalıştırın.Run Content1.cshtml in a browser. İşlenmiş sayfa, _layout1. cshtml içinde tanımlanan biçim ve stil sayfasını ve Content1. cshtmldosyasında tanımlanan metni (içerik) kullanır.The rendered page uses the format and style sheet defined in _Layout1.cshtml and the text (content) defined in Content1.cshtml.

    görüntüyle

    Daha sonra aynı düzen sayfasını paylaşabilen ek içerik sayfaları oluşturmak için 6. adımı tekrarlayabilirsiniz.You can repeat step 6 to create additional content pages that can then share the same layout page.

    Note

    Sitenizi, bir klasördeki tüm içerik sayfaları için otomatik olarak aynı düzen sayfasını kullanabilmeniz için ayarlayabilirsiniz.You can set up your site so that you can automatically use the same layout page for all the content pages in a folder. Ayrıntılar için bkz. ASP.NET Web Pages Için site genelinde davranışı özelleştirme.For details, see Customizing Site-Wide Behavior for ASP.NET Web Pages.

Birden çok Içerik bölümü olan düzen sayfaları tasarlamaDesigning Layout Pages That Have Multiple Content Sections

Bir içerik sayfasında birden fazla bölüm olabilir. Bu, değiştirilebilir içeriğe sahip birden fazla alana sahip olan düzenleri kullanmak istiyorsanız yararlıdır.A content page can have multiple sections, which is useful if you want to use layouts that have multiple areas with replaceable content. İçerik sayfasında, her bölüme benzersiz bir ad verirsiniz.In the content page, you give each section a unique name. (Varsayılan bölüm, adlandırılmamış ' dır.) Düzen sayfasında, adlandırılmamış (varsayılan) bölümün nerede görüneceğini belirtmek için bir RenderBody yöntemi eklersiniz.(The default section is left unnamed.) In the layout page, you add a RenderBody method to specify where the unnamed (default) section should appear. Daha sonra adlandırılmış bölümleri tek tek işlemek için ayrı RenderSection Yöntemler eklersiniz.You then add separate RenderSection methods in order to render named sections individually.

Aşağıdaki diyagramda, ASP.NET 'in birden çok bölüme bölünen içeriği nasıl işleyeceği gösterilmektedir.The following diagram shows how ASP.NET handles content that's divided into multiple sections. Her bir adlandırılmış bölüm, içerik sayfasındaki bir bölüm bloğunda bulunur.Each named section is contained in a section block in the content page. (Header adlandırılırsınız ve örnekteki List.) Çerçeve, RenderSection yönteminin çağrıldığı noktada düzen sayfasına içerik bölümü ekler.(They're named Header and List in the example.) The framework inserts content section into the layout page at the point where the RenderSection method is called. Adlandırılmamış (varsayılan) bölüm, daha önce gördüğünüz gibi RenderBody yönteminin çağrıldığı noktaya eklenir.The unnamed (default) section is inserted at the point where the RenderBody method is called, as you saw earlier.

RenderSection yönteminin geçerli sayfaya nasıl başvuru bölümleri eklediğini gösteren kavramsal diyagram.

Bu yordamda, birden fazla içerik bölümüne sahip bir içerik sayfasının nasıl oluşturulacağı ve birden çok içerik bölümünü destekleyen bir düzen sayfası kullanılarak nasıl işlenmesi gösterilmektedir.This procedure shows how to create a content page that has multiple content sections and how to render it using a layout page that supports multiple content sections.

  1. Paylaşılan klasörde, _layout2. cshtmladlı bir dosya oluşturun.In the Shared folder, create a file named _Layout2.cshtml.

  2. Var olan tüm içerikleri aşağıdakiler ile değiştirin:Replace any existing content with the following:

    <!DOCTYPE html>
    <html>
      <head>
        <title>Multisection Content</title>
        <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
      </head>
      <body>
        <div id="header">
          @RenderSection("header")
        </div>
        <div id="list">
          @RenderSection("list")
        </div>
        <div id="main">
          @RenderBody()
        </div>
        <div id="footer">
          &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
        </div>
      </body>
    </html>
    

    Hem üstbilgi hem de liste bölümlerini işlemek için RenderSection yöntemini kullanırsınız.You use the RenderSection method to render both the header and list sections.

  3. Kök klasörde, Content2. cshtml adlı bir dosya oluşturun ve var olan tüm içerikleri şu şekilde değiştirin:In the root folder, create a file named Content2.cshtml and replace any existing content with the following:

    @{
        Layout = "~/Shared/_Layout2.cshtml";
    }
    
    @section header {
        <div id="header">
            Creating a Consistent Look
        </div>
    }
    
    @section list {
        <ul>
            <li>Lorem</li>
            <li>Ipsum</li>
            <li>Dolor</li>
            <li>Consecte</li>
            <li>Eiusmod</li>
            <li>Tempor</li>
            <li>Incididu</li>
        </ul>
    }
    
    <h1>Multisection Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
    culpa qui officia deserunt mollit anim id est laborum.</p>
    

    Bu içerik sayfası sayfanın üst kısmında bir kod bloğu içerir.This content page contains a code block at the top of the page. Her bir adlandırılmış bölüm bir bölüm bloğunda bulunur.Each named section is contained in a section block. Sayfanın geri kalanı varsayılan (adlandırılmamış) içerik bölümünü içerir.The rest of the page contains the default (unnamed) content section.

  4. Tarayıcıda Content2. cshtml dosyasını çalıştırın.Run Content2.cshtml in a browser.

    Tarayıcıda, RenderSection metoduna çağrılar içeren bir sayfanın çalıştırılmasının sonucu olan bir sayfayı gösteren ekran görüntüsü.

Içerik bölümlerini Isteğe bağlı hale getirmeMaking Content Sections Optional

Normalde, bir içerik sayfasında oluşturduğunuz bölümlerin, Düzen sayfasında tanımlanan bölümleri eşleşmesi gerekir.Normally, the sections that you create in a content page have to match sections that are defined in the layout page. Aşağıdakilerden biri gerçekleşirse hata alabilirsiniz:You can get errors if any of the following occur:

  • İçerik sayfası, Düzen sayfasında karşılık gelen bir bölümü olmayan bir bölümü içerir.The content page contains a section that has no corresponding section in the layout page.
  • Düzen sayfası, içeriği olmayan bir bölüm içerir.The layout page contains a section for which there's no content.
  • Düzen sayfası, aynı bölümü birden çok kez işlemeye çalışır Yöntem çağrılarını içerir.The layout page includes method calls that try to render the same section more than once.

Ancak, Bölüm Düzen sayfasında isteğe bağlı olarak bildirerek adlandırılmış bir bölüm için bu davranışı geçersiz kılabilirsiniz.However, you can override this behavior for a named section by declaring the section to be optional in the layout page. Bu, bir düzen sayfasını paylaşabilen ancak belirli bir bölüm için içeriğe sahip olabilecek veya olmayan birden çok içerik sayfası tanımlamanızı sağlar.This lets you define multiple content pages that can share a layout page but that might or might not have content for a specific section.

  1. Content2. cshtml dosyasını açın ve aşağıdaki bölümü kaldırın:Open Content2.cshtml and remove the following section:

    @section header {
      <div id="header">
        Creating a Consistent Look
      </div>
    }
    
  2. Sayfayı kaydedin ve bir tarayıcıda çalıştırın.Save the page and then run it in a browser. İçerik sayfası Düzen sayfasında tanımlanan bir bölüm için içerik sağlamadığından başlık bölümü olarak bir hata mesajı görüntülenir.An error message is displayed, because the content page doesn't provide content for a section defined in the layout page, namely the header section.

    RenderSection yöntemini çağıran bir sayfa çalıştırırsanız, ancak karşılık gelen bölüm sağlanmadığında oluşan hatayı gösteren ekran görüntüsü.

  3. Paylaşılan klasörde, _layout2. cshtml sayfasını açın ve şu satırı değiştirin:In the Shared folder, open the _Layout2.cshtml page and replace this line:

    @RenderSection("header")
    

    aşağıdaki kodla:with the following code:

    @RenderSection("header", required: false)
    

    Alternatif olarak, önceki kod satırını, aynı sonuçları üreten aşağıdaki kod bloğu ile değiştirebilirsiniz:As an alternative, you could replace the previous line of code with the following code block, which produces the same results:

    @if (IsSectionDefined("header")) {
        @RenderSection("header")
    }
    
  4. Content2. cshtml sayfasını bir tarayıcıda yeniden çalıştırın.Run the Content2.cshtml page in a browser again. (Bu sayfa hala tarayıcıda açıksa, yalnızca yenilemeniz yeterlidir.) Bu kez, üst bilgisi olmasa bile sayfada hata olmadan görüntülenir.(If you still have this page open in the browser, you can just refresh it.) This time the page is displayed with no error, even though it has no header.

Düzen sayfalarına veri geçirmePassing Data to Layout Pages

İçerik sayfasında, bir düzen sayfasında başvurmanız gereken verileriniz olabilir.You might have data defined in the content page that you need to refer to in a layout page. Bu durumda, içerik sayfasından düzen sayfasına veri geçirmeniz gerekir.If so, you need to pass the data from the content page to the layout page. Örneğin, bir kullanıcının oturum açma durumunu görüntülemek veya kullanıcı girdisine göre içerik alanını göstermek ya da gizlemek isteyebilirsiniz.For example, you might want to display the login status of a user, or you might want to show or hide content areas based on user input.

Bir içerik sayfasından bir düzen sayfasına veri geçirmek için, içerik sayfasının PageData özelliğine değer yerleştirebilirsiniz.To pass data from a content page to a layout page, you can put values into the PageData property of the content page. PageData özelliği, sayfalar arasında geçiş yapmak istediğiniz verileri tutan ad/değer çiftleri koleksiyonudur.The PageData property is a collection of name/value pairs that hold the data that you want to pass between pages. Düzen sayfasında, PageData özelliğinden dışarı değer okuyabilirsiniz.In the layout page, you can then read values out of the PageData property.

Başka bir diyagram.Here's another diagram. Bu, ASP.NET 'in bir içerik sayfasından düzen sayfasına değer geçirmek için PageData özelliğini nasıl kullanabileceğinizi gösterir.This one shows how ASP.NET can use the PageData property to pass values from a content page to the layout page. ASP.NET, Web sayfasını oluşturmaya başladığında PageData koleksiyonunu oluşturur.When ASP.NET begins building the web page, it creates the PageData collection. İçerik sayfasında, PageData koleksiyonuna veri koymak için kod yazarsınız.In the content page, you write code to put data in the PageData collection. PageData koleksiyonundaki değerlere, içerik sayfasındaki diğer bölümler veya ek içerik blokları tarafından da erişilebilir.Values in the PageData collection can also be accessed by other sections in the content page or by additional content blocks.

Bir içerik sayfasının bir PageData sözlüğünü nasıl dolduramayacağı ve bu bilgileri düzen sayfasına geçeme şeklini gösteren kavramsal diyagram.

Aşağıdaki yordamda bir içerik sayfasından bir düzen sayfasına nasıl veri geçirünün yapılacağı gösterilmektedir.The following procedure shows how to pass data from a content page to a layout page. Sayfa çalıştırıldığında, kullanıcının Düzen sayfasında tanımlanmış bir listeyi gizlemesini veya göstermesini sağlayan bir düğme görüntüler.When the page runs, it displays a button that lets the user hide or show a list that's defined in the layout page. Kullanıcılar düğmeye tıkladığınızda, PageData özelliğinde bir true/false (Boolean) değeri ayarlar.When users click the button, it sets a true/false (Boolean) value in the PageData property. Düzen sayfası bu değeri okur ve false ise listeyi gizler.The layout page reads that value, and if it's false, hides the list. Bu değer Ayrıca, liste Gizle düğmesinin mi yoksa Listeyi göster düğmesinin mi görüntüleneceğini anlamak için içerik sayfasında de kullanılır.The value is also used in the content page to determine whether to display the Hide List button or the Show List button.

görüntüyle

  1. Kök klasörde, Content3. cshtml adlı bir dosya oluşturun ve var olan tüm içerikleri şu şekilde değiştirin:In the root folder, create a file named Content3.cshtml and replace any existing content with the following:

    @{
        Layout = "~/Shared/_Layout3.cshtml";
    
        PageData["Title"] = "Passing Data";
        PageData["ShowList"] = true;
    
        if (IsPost) {
            if (Request.Form["list"] == "off") {
                PageData["ShowList"] = false;
            }
        }
    }
    
    @section header {
      <div id="header">
        Creating a Consistent Look
      </div>
    }
    
    <h1>@PageData["Title"]</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
    culpa qui officia deserunt mollit anim id est laborum.</p>
    
    @if (PageData["ShowList"] == true) {
        <form method="post" action="">
          <input type="hidden" name="list" value="off" />
          <input type="submit" value="Hide List" />
        </form>
    }
    else {
        <form method="post" action="">
          <input type="hidden" name="list" value="on" />
          <input type="submit" value="Show List" />
        </form>
    }
    

    Kod, PageData özelliğindeki — iki veri parçasını Web sayfasının başlığını, doğru ya da bir listenin görüntülenip görüntülenmeyeceğini belirtmek için true veya false olarak depolar.The code stores two pieces of data in the PageData property — the title of the web page and true or false to specify whether to display a list.

    ASP.NET, bir kod bloğu kullanarak HTML işaretlemesini sayfaya koşullu olarak koymanızı sağlar.Notice that ASP.NET lets you put HTML markup into the page conditionally using a code block. Örneğin, sayfanın gövdesinde if/else bloğu, PageData["ShowList"] doğru olarak ayarlanmış olmasına bağlı olarak hangi formun görüntüleneceğini belirler.For example, the if/else block in the body of the page determines which form to display depending on whether PageData["ShowList"] is set to true.

  2. Paylaşılan klasörde, _Layout3. cshtml adlı bir dosya oluşturun ve var olan tüm içerikleri şu şekilde değiştirin:In the Shared folder, create a file named _Layout3.cshtml and replace any existing content with the following:

    <!DOCTYPE html>
    <html>
      <head>
        <title>@PageData["Title"]</title>
        <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
      </head>
      <body>
        <div id="header">
          @RenderSection("header")
        </div>
          @if (PageData["ShowList"] == true) {
              <div id="list">
                @RenderPage("~/Shared/_List.cshtml")
              </div>
          }
        <div id="main">
          @RenderBody()
        </div>
        <div id="footer">
          <p>&copy; 2012 Contoso Pharmaceuticals. All rights reserved.</p>
        </div>
      </body>
    </html>
    

    Düzen sayfası, PageData özelliğinden başlık değerini alan <title> öğesinde bir ifade içerir.The layout page includes an expression in the <title> element that gets the title value from the PageData property. Ayrıca, liste içerik bloğunun görüntülenip görüntülenmeyeceğini anlamak için PageData özelliğinin ShowList değerini kullanır.It also uses the ShowList value of the PageData property to determine whether to display the list content block.

  3. Paylaşılan klasörde, _List. cshtml adlı bir dosya oluşturun ve var olan tüm içerikleri şu şekilde değiştirin:In the Shared folder, create a file named _List.cshtml and replace any existing content with the following:

    <ul>
      <li>Lorem</li>
      <li>Ipsum</li>
      <li>Dolor</li>
      <li>Consecte</li>
      <li>Eiusmod</li>
      <li>Tempor</li>
      <li>Incididu</li>
    </ul>
    
  4. Content3. cshtml sayfasını bir tarayıcıda çalıştırın.Run the Content3.cshtml page in a browser. Sayfa, sayfanın sol tarafında görünür liste ve alt kısımdaki liste Gizle düğmesi görüntülenir.The page is displayed with the list visible on the left side of the page and a Hide List button at the bottom.

    Listeyi ve ' listeyi Gizle 'yi belirten bir düğmeyi içeren sayfayı gösteren ekran görüntüsü.

  5. Listeyi Gizle' ye tıklayın.Click Hide List. Liste kaybolur ve düğme Listeyi gösterolarak değişir.The list disappears and the button changes to Show List.

    Liste ve ' liste göster ' yazan bir düğme içermeyen sayfayı gösteren ekran görüntüsü.

  6. Listeyi göster düğmesine tıklayın ve liste yeniden görüntülenir.Click the Show List button, and the list is displayed again.

Ek KaynaklarAdditional Resources

ASP.NET Web sayfaları için site genelinde davranışı özelleştirmeCustomizing Site-Wide Behavior for ASP.NET Web Pages