ASP.NET Web Pages (Razor) sitelerinde tutarlı bir düzen oluşturma

Tom FitzMacken tarafından

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.

Şunları öğreneceksiniz:

  • Üst bilgiler ve altbilgiler gibi yeniden kullanılabilir içerik blokları oluşturma.
  • Bir düzen kullanarak sitenizdeki tüm sayfalar için tutarlı bir görünüm oluşturma.
  • Çalışma zamanında verileri bir düzen sayfasına geçirme.

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

  • Birden çok sayfaya eklenecek HTML biçimli içerik içeren dosyalar olan içerik blokları.
  • Web sitesindeki sayfalarla paylaşılabilen, HTML biçimli içerik içeren sayfalar olan düzen sayfaları.
  • RenderPage, RenderBodyve RenderSection yöntemleri, bu da sayfa öğelerinin nereye ekleneceği ASP.NET bildirir.
  • İçerik blokları ve düzen sayfaları arasında veri paylaşmanıza olanak sağlayan PageData sözlüğü.

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

  • ASP.NET Web sayfaları (Razor) 3

Bu öğretici, ASP.NET Web Pages 2 ile de kullanılabilir.

Düzen sayfaları hakkında

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. 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. Daha sonra içerik bloğunu, bilgilerin görünmesini istediğiniz sitede diğer sayfalara ekleyebilirsiniz. Bu şekilde, aynı içeriği her sayfaya kopyalayıp yapıştırmanıza gerek kalmaz. Bu gibi yaygın içerik oluşturmak sitenizin güncelleştirilmesini de kolaylaştırır. İç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.

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

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. Aynı içerik bloklarını sitenizdeki herhangi bir sayfada kullanabilirsiniz. İşiniz bittiğinde şöyle bir sayfa alacaksınız:

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.

  2. Varolan biçimlendirmeyi aşağıdaki kodla 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>
    
  3. Kök klasörde, paylaşılanadlı bir klasör oluşturun.

    Note

    Paylaşılanadlı bir klasörde Web sayfaları arasında paylaşılan dosyaları depolamak yaygın bir uygulamadır.

  4. Paylaşılan klasörde, _Header. cshtmladlı bir dosya oluşturun.

  5. Var olan tüm içerikleri aşağıdakiler ile değiştirin:

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

    Dosya adının üst çizgi (_) bir ön ek olarak _Header. cshtmlolduğuna dikkat edin. ASP.NET, adı bir alt çizgiyle başlıyorsa tarayıcıya sayfa göndermez. Bu, kullanıcıların bu sayfaları doğrudan istememelerini (farkında veya başka şekilde) engeller. 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.

  6. Paylaşılan klasörde, _footer. cshtml adlı bir dosya oluşturun ve içeriği aşağıdaki ile değiştirin:

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

    <!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. RenderPage yöntemini çağırır ve bu noktada içeriğini eklemek istediğiniz dosyanın adını geçirin. Burada, _Header. cshtml ve _footer. cshtml dosyalarının içeriğini Index. cshtml dosyasına yerleştiriyoruz.

  8. Index. cshtml sayfasını bir tarayıcıda ç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.)

  9. Tarayıcıda, sayfa kaynağını görüntüleyin. (Örneğin, Internet Explorer 'da, sayfaya sağ tıklayın ve kaynağı görüntüle' ye tıklayın.)

    Bu, Dizin sayfası işaretlemesini içerik bloklarıyla birleştiren tarayıcıya gönderilen Web sayfası işaretlemesini görmenizi sağlar. Aşağıdaki örnek, Index. cshtmliçin işlenen sayfa kaynağını gösterir. 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.

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

Şimdiye kadar, aynı içeriği birden çok sayfaya eklemek kolay olduğunu gördünüz. 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. Düzen sayfası bir Web sayfasının yapısını tanımlar, ancak hiçbir gerçek içeriği içermez. 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. Bu sayfalar görüntülendiğinde, düzen sayfasına göre biçimlendirilir. (Bu anlamda, Düzen sayfası diğer sayfalarda tanımlanmış içerik için şablon türü olarak davranır.)

Düzen sayfası, her HTML sayfası gibi olduğundan, RenderBody yöntemine bir çağrı içerir. Düzen sayfasındaki RenderBody yönteminin konumu, içerik sayfasındaki bilgilerin nereye ekleneceğini belirler.

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. Tarayıcı bir içerik sayfası ister. İçerik sayfasında, sayfanın yapısı için kullanılacak düzen sayfasını belirten kod bulunur. Düzen sayfasında, içerik RenderBody yönteminin çağrıldığı noktaya eklenir. İçerik blokları, önceki bölümde yaptığınız şekilde RenderPage yöntemi çağırarak düzen sayfasına da eklenebilir. Web sayfası tamamlandığında tarayıcıya gönderilir.

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.

  1. Web sitenizin paylaşılan klasöründe, _layout1. cshtmladlı bir dosya oluşturun.

  2. Var olan tüm içerikleri aşağıdakiler ile 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ı eklemek için bir düzen sayfasında RenderPage yöntemini kullanırsınız. Düzen sayfası RenderBody metoduna yalnızca bir çağrı içerebilir.

  3. Paylaşılan klasörde, _Header2. cshtml adlı bir dosya oluşturun ve var olan tüm içerikleri şu şekilde değiştirin:

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

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

  6. Kök klasörde, Content1. cshtml adlı bir dosya oluşturun ve var olan tüm içerikleri şu şekilde 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 sayfasıdır. 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.

  7. Tarayıcıda Content1. cshtml dosyasını çalıştırın. İş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.

    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.

    Note

    Sitenizi, bir klasördeki tüm içerik sayfaları için otomatik olarak aynı düzen sayfasını kullanabilmeniz için ayarlayabilirsiniz. Ayrıntılar için bkz. ASP.NET Web Pages Için site genelinde davranışı özelleştirme.

Birden çok Içerik bölümü olan düzen sayfaları tasarlama

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. İçerik sayfasında, her bölüme benzersiz bir ad verirsiniz. (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. Daha sonra adlandırılmış bölümleri tek tek işlemek için ayrı RenderSection Yöntemler eklersiniz.

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. Her bir adlandırılmış bölüm, içerik sayfasındaki bir bölüm bloğunda bulunur. (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. Adlandırılmamış (varsayılan) bölüm, daha önce gördüğünüz gibi RenderBody yönteminin çağrıldığı noktaya eklenir.

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.

  1. Paylaşılan klasörde, _layout2. cshtmladlı bir dosya oluşturun.

  2. Var olan tüm içerikleri aşağıdakiler ile 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 üstbilgi hem de liste bölümlerini işlemek için RenderSection yöntemini kullanırsınız.

  3. Kök klasörde, Content2. cshtml adlı bir dosya oluşturun ve var olan tüm içerikleri şu şekilde 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 üst kısmında bir kod bloğu içerir. Her bir adlandırılmış bölüm bir bölüm bloğunda bulunur. Sayfanın geri kalanı varsayılan (adlandırılmamış) içerik bölümünü içerir.

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

    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 getirme

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. Aşağıdakilerden biri gerçekleşirse hata alabilirsiniz:

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

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

  1. 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>
    }
    
  2. Sayfayı kaydedin ve bir tarayıcıda çalıştırın. İç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.

    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:

    @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ğu ile değiştirebilirsiniz:

    @if (IsSectionDefined("header")) {
        @RenderSection("header")
    }
    
  4. Content2. cshtml sayfasını bir tarayıcıda yeniden çalıştırın. (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.

Düzen sayfalarına veri geçirme

İçerik sayfasında, bir düzen sayfasında başvurmanız gereken verileriniz olabilir. Bu durumda, içerik sayfasından düzen sayfasına veri geçirmeniz gerekir. Ö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.

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. PageData özelliği, sayfalar arasında geçiş yapmak istediğiniz verileri tutan ad/değer çiftleri koleksiyonudur. Düzen sayfasında, PageData özelliğinden dışarı değer okuyabilirsiniz.

Başka bir diyagram. 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. ASP.NET, Web sayfasını oluşturmaya başladığında PageData koleksiyonunu oluşturur. İçerik sayfasında, PageData koleksiyonuna veri koymak için kod yazarsınız. PageData koleksiyonundaki değerlere, içerik sayfasındaki diğer bölümler veya ek içerik blokları tarafından da erişilebilir.

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. 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. Kullanıcılar düğmeye tıkladığınızda, PageData özelliğinde bir true/false (Boolean) değeri ayarlar. Düzen sayfası bu değeri okur ve false ise listeyi gizler. 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.

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:

    @{
        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.

    ASP.NET, bir kod bloğu kullanarak HTML işaretlemesini sayfaya koşullu olarak koymanızı sağlar. Ö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.

  2. Paylaşılan klasörde, _Layout3. cshtml adlı bir dosya oluşturun ve var olan tüm içerikleri şu şekilde 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ı, PageData özelliğinden başlık değerini alan <title> öğesinde bir ifade içerir. 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.

  3. Paylaşılan klasörde, _List. cshtml adlı bir dosya oluşturun ve var olan tüm içerikleri şu şekilde 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>
    
  4. Content3. cshtml sayfasını bir tarayıcıda çalıştırın. Sayfa, sayfanın sol tarafında görünür liste ve alt kısımdaki liste Gizle düğmesi görüntülenir.

    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. Liste kaybolur ve düğme Listeyi gösterolarak değişir.

    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.

Ek Kaynaklar

ASP.NET Web sayfaları için site genelinde davranışı özelleştirme