ASP.NET Web Sayfaları (Razor) Sitelerinde Tutarlı Düzen Oluşturma

Makale
07/13/2023

Bu makalede, ASP.NET Web Sayfaları (Razor) web sitesindeki düzen sayfalarını kullanarak yeniden kullanılabilir içerik blokları (üst bilgi ve alt bilgiler gibi) oluşturma ve sitedeki tüm sayfalar için tutarlı bir görünüm oluşturma işlemleri açıklanmaktadır.

Öğrenecekleriniz:

Üst bilgiler ve alt bilgiler gibi yeniden kullanılabilir içerik blokları oluşturma.

Düzeni kullanarak sitenizdeki tüm sayfalar için tutarlı bir görünüm oluşturma.

Çalışma zamanında verileri düzen sayfasına geçirme.

Makalede sunulan ASP.NET özellikleri şunlardır:

Birden çok sayfaya eklenecek HTML biçimli içerik içeren dosyalar olan içerik blokları.

Düzen sayfaları, web sitesindeki sayfalar tarafından paylaşılabilen HTML biçimli içerik içeren sayfalardır.

RenderPage, RenderBodyve RenderSection ASP.NET sayfa öğelerinin nereye eklendiğine ilişkin bir yöntemdir.

PageData İçerik blokları ve düzen sayfaları arasında veri paylaşmanızı sağlayan sözlük.

Öğreticide kullanılan yazılım sürümleri

ASP.NET Web Sayfaları (Razor) 3

Bu öğretici ASP.NET Web Sayfaları 2 ile de çalışır.

Düzen Sayfaları Hakkında

Birçok web sitesinde üst bilgi ve alt bilgi gibi her sayfada görüntülenen içerik veya kullanıcılara oturum açtıklarını bildiren bir kutu vardır. ASP.NET, normal bir web sayfası gibi metin, işaretleme ve kod içerebilen içerik bloğuna sahip ayrı bir dosya oluşturmanıza olanak tanır. Daha sonra içerik bloğunu sitedeki diğer sayfalara, bilgilerin görünmesini istediğiniz yere ekleyebilirsiniz. Bu şekilde, aynı içeriği kopyalayıp her sayfaya yapıştırmanız gerekmez. Bu şekilde ortak içerik oluşturmak sitenizi güncelleştirmenizi de kolaylaştırır. İçeriği değiştirmeniz gerekiyorsa, tek bir dosyayı güncelleştirebilirsiniz ve değişiklikler içeriğin eklendiği her yere yansıtılır.

Aşağıdaki diyagramda içerik bloklarının nasıl çalıştığı gösterilmektedir. Tarayıcı web sunucusundan bir sayfa istediğinde, ASP.NET içerik bloklarını yöntemin RenderPage ana sayfada çağrıldığı noktaya ekler. Tamamlanmış (birleştirilmiş) sayfa daha sonra tarayıcıya gönderilir.

RenderPage yönteminin geçerli sayfaya başvuruda bulunan bir sayfayı nasıl ekley olduğunu gösteren kavramsal diyagram.

Bu yordamda, ayrı dosyalarda bulunan iki içerik bloğuna (üst bilgi ve alt bilgi) başvuran bir sayfa oluşturacaksınız. Sitenizdeki herhangi bir sayfada aynı içerik bloklarını kullanabilirsiniz. İşiniz bittiğinde aşağıdakine benzer bir sayfa alırsınız:

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

Web sitenizin kök klasöründe Index.cshtml adlı bir dosya oluşturun.

Mevcut işaretlemeyi aşağıdakilerle değiştirin:

<!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>

Kök klasörde Paylaşılan adlı bir klasör oluşturun.

Not

Web sayfaları arasında paylaşılan dosyaları Paylaşılan adlı bir klasörde depolamak yaygın bir uygulamadır.
Paylaşılan klasöründe _Header.cshtml adlı bir dosya oluşturun.
Mevcut içeriği aşağıdakilerle değiştirin:
```
<div class="header">This is header text.</div>
```
Dosya adının ön ek olarak alt çizgi (_) ile _Header.cshtml olduğuna dikkat edin. ASP.NET adı alt çizgiyle başlıyorsa tarayıcıya sayfa göndermez. Bu, kişilerin bu sayfaları doğrudan istemesini (yanlışlıkla veya başka bir şekilde) önler. Kullanıcıların bu sayfaları isteyebilmesini istemediğinizden, içinde içerik blokları bulunan sayfaları adlandırmak için alt çizgi kullanmak iyi bir fikirdir; bunlar kesinlikle diğer sayfalara eklenecek şekilde bulunur.
Paylaşılan klasöründe _Footer.cshtml adlı bir dosya oluşturun ve içeriği aşağıdakilerle değiştirin:
```
<div class="footer">&copy; 2012 Contoso Pharmaceuticals. All rights reserved.
</div>
```
Index.cshtml sayfasında, burada gösterildiği gibi yöntemine RenderPage iki çağrı ekleyin:
```
<!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, web sayfasına içerik bloğu eklemeyi gösterir. yöntemini çağırır RenderPage ve içeriğini bu noktaya eklemek istediğiniz dosyanın adını geçirirsiniz. Burada , _Header.cshtml ve _Footer.cshtml dosyalarının içeriğini Index.cshtml dosyasına ekleyebilirsiniz.
Tarayıcıda Index.cshtml sayfasını çalıştırın. (WebMatrix'te , Dosyalar çalışma alanında dosyaya sağ tıklayın ve ardından Tarayıcıda başlat'ı seçin.)
Tarayıcıda sayfa kaynağını görüntüleyin. (Örneğin, Internet Explorer'da sayfaya sağ tıklayın ve ardından Kaynağı Görüntüle'ye tıklayın.)

Bu, tarayıcıya gönderilen ve dizin sayfası işaretlemesini içerik bloklarıyla birleştiren web sayfası işaretlemesini görmenizi sağlar. Aşağıdaki örnekte Index.cshtml için işlenen sayfa kaynağı gösterilmektedir. Index.cshtml dosyasına eklediğiniz çağrılar RenderPage üst bilgi ve alt bilgi dosyalarının gerçek içeriğiyle değiştirildi.
```
<!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ını Kullanarak Tutarlı Bir Görünüm Oluşturma

Şimdiye kadar aynı içeriği birden çok sayfaya eklemenin kolay olduğunu gördünüz. 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. Düzen sayfası bir web sayfasının yapısını tanımlar, ancak gerçek içerik içermez. Bir düzen sayfası oluşturduktan sonra, içeriği içeren web sayfaları oluşturabilir ve bunları düzen sayfasına bağlayabilirsiniz. Bu sayfalar görüntülendiğinde, düzen sayfasına göre biçimlendirilir. (Bu anlamda, düzen sayfası diğer sayfalarda tanımlanan içerik için bir tür şablon işlevi görür.)

Düzen sayfası, yöntemine bir çağrı RenderBody içermesi dışında herhangi bir HTML sayfası gibidir. Yöntemin RenderBody düzen sayfasındaki konumu, içerik sayfasındaki bilgilerin nereye ekleneceğini belirler.

Aşağıdaki diyagramda, tamamlanan web sayfasını oluşturmak için çalışma zamanında içerik sayfalarının ve düzen sayfalarının nasıl birleştirildiği gösterilmektedir. Tarayıcı bir içerik sayfası istemektedir. İçerik sayfasında, sayfanın yapısı için kullanılacak düzen sayfasını belirten bir kod bulunur. Düzen sayfasında, içerik yöntemin çağrıldığı RenderBody noktaya eklenir. İçerik blokları, önceki bölümde yaptığınız gibi yöntemini çağırarak RenderPage düzen sayfasına da eklenebilir. Web sayfası tamamlandığında tarayıcıya gönderilir.

Tarayıcıda RenderBody yöntemine yapılan çağrıları içeren bir sayfanın çalıştırılmasına neden olan bir sayfayı 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 işlemi gösterilmektedir.

Web sitenizin Paylaşılan klasöründe _Layout1.cshtml adlı bir dosya oluşturun.

Mevcut içeriği aşağıdakilerle değiştirin:

<!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ı RenderPage eklemek için düzen sayfasında yöntemini kullanırsınız. Düzen sayfası yöntemine RenderBody tek bir çağrı içerebilir.

Paylaşılan klasöründe _Header2.cshtml adlı bir dosya oluşturun ve mevcut içeriği aşağıdakilerle değiştirin:
```
<div id="header">Creating a Consistent Look</div>
```
Kök klasörde yeni bir klasör oluşturun ve bunu Stiller olarak adlandırın.

Stiller klasöründe Site.css adlı bir dosya oluşturun ve aşağıdaki stil tanımlarını ekleyin:

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 stil sayfalarının düzen sayfalarıyla nasıl kullanılabileceğini göstermek için buradadır. İsterseniz, bu öğeler için kendi stillerinizi tanımlayabilirsiniz.

Kök klasörde Content1.cshtml adlı bir dosya oluşturun ve mevcut içeriği aşağıdakilerle değiştirin:

@{
    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 sayfadır. Sayfanın en üstündeki kod bloğu, bu içeriği biçimlendirmek için hangi düzen sayfasının kullanılacağını gösterir.

Tarayıcıda Content1.cshtml dosyasını çalıştırın. İşlenen sayfa , _Layout1.cshtml dosyasında tanımlanan biçim ve stil sayfasını ve Content1.cshtml içinde tanımlanan metni (içerik) kullanır.

Daha sonra aynı düzen sayfasını paylaşabilecek ek içerik sayfaları oluşturmak için 6. adımı yineleyebilirsiniz.

Not

Sitenizi, bir klasördeki tüm içerik sayfaları için otomatik olarak aynı düzen sayfasını kullanacak şekilde ayarlayabilirsiniz. Ayrıntılar için bkz. ASP.NET Web Sayfaları için Site-Wide Davranışını Özelleştirme.

Birden Çok İçerik Bölümü Olan Düzen Sayfaları Tasarlama

bir içerik sayfasında birden çok bölüm bulunabilir. Bu, değiştirilebilir içeriğe sahip birden çok alanı olan düzenleri kullanmak istiyorsanız kullanışlıdır. İçerik sayfasında her bölüme benzersiz bir ad verirsiniz. (Varsayılan bölüm adlandırılmamış olarak bırakılı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öntem eklersiniz. Ardından adlandırılmış bölümleri ayrı ayrı işlemek için ayrı RenderSection yöntemler eklersiniz.

Aşağıdaki diyagramda, ASP.NET birden çok bölüme ayrılmış içeriği nasıl işlediği gösterilmektedir. Adlandırılmış her bölüm, içerik sayfasındaki bir bölüm bloğunda yer alır. (Örnekte ve List olarak adlandırılırlarHeader.) Çerçeve, yöntemin çağrıldığı RenderSection noktada düzen sayfasına içerik bölümü ekler. Adsız (varsayılan) bölüm, daha önce gördüğünüz gibi yöntemin RenderBody çağrıldığı noktaya eklenir.

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

Bu yordam, birden çok içerik bölümü içeren bir içerik sayfasının nasıl oluşturulacağını ve birden çok içerik bölümünü destekleyen bir düzen sayfası kullanarak nasıl işlendiğini gösterir.

Paylaşılan klasöründe _Layout2.cshtml adlı bir dosya oluşturun.

Mevcut içeriği aşağıdakilerle değiştirin:

<!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 üst bilgi hem de liste bölümlerini işlemek için yöntemini kullanırsınız RenderSection .

Kök klasörde Content2.cshtml adlı bir dosya oluşturun ve mevcut içeriği aşağıdakilerle değiştirin:

@{
    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 en üstünde bir kod bloğu içerir. Adlandırılmış her bölüm bir bölüm bloğunda yer alır. Sayfanın geri kalanı varsayılan (adsız) içerik bölümünü içerir.

Content2.cshtml dosyasını tarayıcıda çalıştırın.

İçerik Bölümlerini İsteğe Bağlı Yapma

Normalde, içerik sayfasında oluşturduğunuz bölümlerin düzen sayfasında tanımlanan bölümlerle eşleşmesi gerekir. Aşağıdakilerden herhangi biri oluşursa hata alabilirsiniz:

İçerik sayfası, düzen sayfasında karşılık gelen bölümü olmayan bir bölüm içerir.
Düzen sayfasında içerik bulunmayan bir bölüm bulunur.
Düzen sayfası, aynı bölümü birden çok kez işlemeye çalışan yöntem çağrılarını içerir.

Ancak, düzen sayfasında bölümü isteğe bağlı olarak bildirerek adlandırılmış bir bölüm için bu davranışı geçersiz kılabilirsiniz. Bu, bir düzen sayfasını paylaşabilen ancak belirli bir bölüm için içeriği olan veya olmayan birden çok içerik sayfası tanımlamanızı sağlar.

Content2.cshtml dosyasını açın ve aşağıdaki bölümü kaldırın:

@section header {
  <div id="header">
    Creating a Consistent Look
  </div>
}

Sayfayı kaydedin ve tarayıcıda çalıştırın. İçerik sayfası düzen sayfasında tanımlanan bir bölümün içeriğini (üst bilgi bölümü) sağlamadığından bir hata iletisi görüntülenir.
Paylaşılan klasöründe _Layout2.cshtml sayfasını açın ve şu satırı değiştirin:
```
@RenderSection("header")
```
aşağıdaki kodla:
```
@RenderSection("header", required: false)
```
Alternatif olarak, önceki kod satırını aynı sonuçları üreten aşağıdaki kod bloğuyla değiştirebilirsiniz:
```
@if (IsSectionDefined("header")) {
    @RenderSection("header")
}
```
Content2.cshtml sayfasını tarayıcıda yeniden çalıştırın. (Bu sayfa tarayıcıda hala açıksa, sayfayı yenileyebilirsiniz.) Bu kez üst bilgisi olmasa da sayfa hatasız olarak görüntülenir.

Düzen Sayfalarına Veri Geçirme

İçerik sayfasında bir düzen sayfasında başvurmanız gereken veriler tanımlanmış olabilir. Öyleyse, içerik sayfasındaki verileri düzen sayfasına geçirmeniz gerekir. Örneğin, bir kullanıcının oturum açma durumunu görüntülemek veya kullanıcı girişine göre içerik alanlarını göstermek veya gizlemek isteyebilirsiniz.

bir içerik sayfasından düzen sayfasına veri geçirmek için, içerik sayfasının özelliğine PageData değerler koyabilirsiniz. PageData özelliği, sayfalar arasında geçirmek istediğiniz verileri tutan bir ad/değer çiftleri koleksiyonudur. Düzen sayfasında, değerleri özelliğinden PageData okuyabilirsiniz.

İşte başka bir diyagram. Bu, ASP.NET bir içerik sayfasından PageData düzen sayfasına değerleri geçirmek için özelliğini nasıl kullanabileceğini gösterir. ASP.NET web sayfasını oluşturmaya başladığında koleksiyonu oluşturur PageData . İçerik sayfasında, koleksiyona veri PageData koymak için kod yazarsınız. Koleksiyondaki değerlere PageData içerik sayfasındaki diğer bölümler veya ek içerik blokları tarafından da erişilebilir.

İçerik sayfasının PageData sözlüğü doldurup bu bilgileri düzen sayfasına nasıl geçirebileceğini gösteren kavramsal diyagram.

Aşağıdaki yordamda, bir içerik sayfasından düzen sayfasına nasıl veri geçirileceği gösterilmektedir. Sayfa çalıştırıldığında, kullanıcının düzen sayfasında tanımlanan bir listeyi gizlemesine veya göstermesine olanak tanıyan bir düğme görüntüler. Kullanıcılar düğmeye tıkladığında, özelliğinde PageData true/false (Boole) değerini ayarlar. Düzen sayfası bu değeri okur ve yanlışsa listeyi gizler. Değer, listeyi gizle düğmesinin mi yoksa ListeyiGöster düğmesinin mi görüntüleneceğini belirlemek için içerik sayfasında da kullanılır.

[Veri Geçirme sayfasını gösteren ekran görüntüsü.]

Kök klasörde Content3.cshtml adlı bir dosya oluşturun ve mevcut içeriği aşağıdakilerle değiştirin:

@{
    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 özelliğinde PageData iki veri parçası depolar: web sayfasının başlığı ve listenin görüntülenip görüntülenmeyeceğini belirtmek için true veya false.

ASP.NET, bir kod bloğu kullanarak sayfaya koşullu olarak HTML işaretlemesi yerleştirmenize olanak tanır. Örneğin, sayfanın gövdesindeki blok, if/else true olarak ayarlanıp ayarlanmadığına PageData["ShowList"] bağlı olarak hangi formun görüntüleneceğini belirler.

Paylaşılan klasöründe _Layout3.cshtml adlı bir dosya oluşturun ve mevcut içeriği aşağıdakilerle değiştirin:

<!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ı, öğesinde <title> özelliğinden PageData başlık değerini alan bir ifade içerir. Ayrıca, liste içerik bloğunun PageData görüntülenip görüntülenmeyeceğini belirlemek için özelliğinin değerini kullanırShowList.

Paylaşılan klasöründe _List.cshtml adlı bir dosya oluşturun ve mevcut içeriği aşağıdakilerle değiştirin:

<ul>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
  <li>Consecte</li>
  <li>Eiusmod</li>
  <li>Tempor</li>
  <li>Incididu</li>
</ul>

Content3.cshtml sayfasını bir tarayıcıda çalıştırın. Sayfa, listenin sayfanın sol tarafında ve listeyi gizle düğmesinin en altında göründüğü şekilde görüntülenir.
Listeyi Gizle'ye tıklayın. Liste kaybolur ve düğme Listeyi Göster olarak değişir.
Listeyi Göster düğmesine tıkladığınızda liste yeniden görüntülenir.

Ek Kaynaklar

ASP.NET Web Sayfaları için Site-Wide Davranışını Özelleştirme

Aracılığıyla paylaş