Görünüm Ana Sayfalarıyla Sayfa Düzenleri Oluşturma (C#)

Microsoft tarafından

PDF’yi İndir

Bu öğreticide, ana sayfaları görüntüleyerek uygulamanızdaki birden çok sayfa için ortak bir sayfa düzeni oluşturmayı öğrenirsiniz. Ö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.

Ana Sayfaları Görüntüle ile Sayfa Düzenleri Oluşturma

Bu öğreticide, ana sayfaları görüntüleyerek uygulamanızdaki birden çok sayfa için ortak bir sayfa düzeni oluşturmayı öğrenirsiniz. Ö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.

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. Ö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. Bu şekilde, uygulamanızdaki her sayfa bu içeriği otomatik olarak görüntüler.

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.

Görünüm Ana Sayfası Oluşturma

İki sütunlu düzeni tanımlayan bir görünüm ana sayfası oluşturarak başlayalım. 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).

Görünüm ana sayfası ekleme

Şekil 01: Görünüm ana sayfası ekleme (Tam boyutlu resmi görüntülemek için tıklayınız)

Bir uygulamada birden fazla görünüm ana sayfası oluşturabilirsiniz. Her görünüm ana sayfası farklı bir sayfa düzeni tanımlayabilir. Örneğin, belirli sayfaların iki sütunlu düzeni ve diğer sayfaların üç sütunlu düzeni olmasını isteyebilirsiniz.

Görünüm ana sayfası standart ASP.NET MVC görünümüne çok benzer. Ancak, normal görünümün aksine, görünüm ana <asp:ContentPlaceHolder> sayfası bir veya daha fazla etiket içerir. 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.

Örneğin, Listeleme 1'deki görünüm ana sayfası iki sütunlu düzeni tanımlar. İki <contentplaceholder> etiket içeriyor. Her <ContentPlaceHolder> sütun için bir tane.

İlan 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. Basamaklı Stil Sayfası sütun sınıfı her <div> iki etikete de uygulanır. Bu sınıf, ana sayfanın üst kısmında bildirilen stil sayfasında tanımlanır. Tasarım görünümüne geçerek görünüm ana sayfasının nasıl oluşturulacağını önizleyebilirsiniz. Kaynak kod düzenleyicisinin sol alt kısmındaki Tasarım sekmesini tıklatın (Bkz. Şekil 2).

Tasarımcıda ana sayfaönizleme

Ş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)

Görünüm İçerik Sayfası Oluşturma

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

Görünüm içeriği sayfası ekleme

Ş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)

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). Bir önceki bölümde oluşturduğumuz Site.master görünüm ana sayfasına gidebilirsiniz.

Ana sayfa seçme

Şekil 04: Ana sayfa seçme (Tam boyutlu resmi görüntülemek için tıklayınız)

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.

Listeleme 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. Her <asp:Content> etiket, geçersiz kıladığı özelliğe <asp:ContentPlaceHolder> işaret eden bir ContentPlaceHolderID özniteliği içerir.

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. Örneğin, açma ve kapatma <html> veya <head> etiketleri içermez. Normal açılış ve kapanış etiketlerinin tümü görünüm ana sayfasında bulunur.

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

İçerik görüntüleme sayfasındaki ana <asp:ContentPlaceHolder> sayfadaki her etiketi geçersiz kılmanız gerekmez. Etiketi yalnızca belirli içerikle değiştirmek istediğinizde bir <asp:ContentPlaceHolder> etiketi geçersiz kılmanız gerekir.

Örneğin, Listeleme 3'teki değiştirilmiş Dizin görünümü yalnızca iki <asp:Content> etiket içerir. Etiketlerin <asp:Content> her biri bazı metin içerir.

İlan 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. Görünümün iki sütunlu bir sayfa yı işlettiğine dikkat edin. 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 edin

Dizin görünümü içerik sayfası

Şekil 05: Dizin görünümü içerik sayfası (Tam boyutlu resmi görüntülemek için tıklayınız)

Ana Sayfa İçeriğini Görüntüle

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. Örneğin, web uygulamanızdaki her sayfanın benzersiz bir başlığa sahip olmasını istiyorsunuz. Ancak, başlık görünüm içeriği sayfasında değil, görünüm ana sayfasında bildirilir. Peki, her görünüm içeriği sayfası için sayfa başlığını nasıl özelleştirebilirsiniz?

Görünüm içeriği sayfası tarafından görüntülenen başlığı değiştirmenin iki yolu vardır. İ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. Ö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:

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

Tarayıcı başlık çubuğu

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. Görünüm ana sayfası üstbilgi için <head runat="server"> normal <head> bir etiket yerine bir etiket içermelidir. <head> Etiket runat="server" özniteliğini içermiyorsa, başlık görünmez. Varsayılan görünüm ana sayfası <head runat="server"> gerekli etiketi içerir.

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. Ö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. Listeleme 4'teki ana <asp:ContentPlaceHolder> görünüm sayfası <head> etiketinde bir etiket içerir.

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

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.

İlan 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>

Özet

Bu öğretici, ana sayfaları görüntülemek ve içerik sayfalarını görüntülemek için temel bir giriş sağlar. Yeni görünüm ana sayfaları oluşturmayı ve bunlara dayalı görünüm içerik sayfaları oluşturmayı öğrendiniz. 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.