Görünüm Ana Sayfalarıyla Sayfa Düzenleri Oluşturma (C#)
Microsoft tarafından
Bu öğreticide, ana sayfaları görüntüleme avantajından yararlanarak uygulamanızda birden çok sayfa için ortak sayfa düzeni oluşturmayı öğreneceksiniz. Örneğin, bir görünüm ana sayfasını kullanarak iki sütunlu sayfa düzeni tanımlayabilir ve web uygulamanızdaki tüm sayfalar için iki sütunlu düzeni kullanabilirsiniz.
Görünüm Ana Sayfaları ile Sayfa Düzenleri Oluşturma
Bu öğreticide, ana sayfaları görüntüleme avantajından yararlanarak uygulamanızda birden çok sayfa için ortak sayfa düzeni oluşturmayı öğreneceksiniz. Örneğin, bir görünüm ana sayfasını kullanarak iki sütunlu sayfa düzeni tanımlayabilir ve web uygulamanızdaki tüm sayfalar için iki sütunlu düzeni 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 sitesi logonuzu, gezinti bağlantılarınızı ve başlık 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ı öğreneceksiniz.
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ıklayıp Ekle, Yeni Öğe menü seçeneğini belirleyip MVC Görünümü Ana Sayfa şablonunu seçerek MVC projesine yeni bir görünüm ana sayfası eklersiniz (bkz. Şekil 1).
Şekil 01: Görünüm ana sayfası ekleme (Tam boyutlu resmi görüntülemek için tıklayın)
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, diğer sayfaların ise üç 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 bir görünümden farklı olarak, görünüm ana sayfası bir veya daha fazla <asp:ContentPlaceHolder> 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, Liste 1'deki görünüm ana sayfası iki sütunlu bir düzen tanımlar. İki <contentplaceholder> etiket içerir. Her sütun için bir tane <ContentPlaceHolder> .
Listeleme 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>
Liste 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 iki etikete de <div> uygulanır. Bu sınıf, ana sayfanın en üstünde 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 işlendiğinin önizlemesini görüntüleyebilirsiniz. Kaynak kod düzenleyicisinin sol alt kısmındaki Tasarım sekmesine tıklayın (bkz. Şekil 2).
Şekil 02: Tasarımcıda ana sayfanın önizlemesini görüntüleme (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Görünüm İçerik Sayfası Oluşturma
Bir görünüm ana sayfası oluşturduktan sonra, görünüm ana sayfasını temel alan bir veya daha fazla görünüm içeriği sayfası oluşturabilirsiniz. Örneğin, Görünümler\Giriş klasörüne sağ tıklayıp Ekle, Yeni Öğe'yi, MVC Görünüm İçerik Sayfası şablonunu seçip Index.aspx adını girip Ekle düğmesine tıklayarak Giriş denetleyicisi için dizin görünümü içerik sayfası oluşturabilirsiniz (bkz. Şekil 3).
Şekil 03: Görünüm içeriği sayfası ekleme (Tam boyutlu resmi görüntülemek için tıklayın)
Ekle düğmesine tıkladıktan sonra, görünüm içeriği sayfasıyla ilişkilendirmek üzere bir görünüm ana sayfası seçmenizi sağlayan yeni bir iletişim kutusu görüntülenir (bkz. Şekil 4). Önceki bölümde oluşturduğumuz Site.master görünümü ana sayfasına gidebilirsiniz.
Şekil 04: Ana sayfa seçme (Tam boyutlu resmi görüntülemek için tıklayın)
Site.master ana sayfasını temel alan yeni bir görünüm içeriği 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, görünüm ana sayfasındaki etiketlerin her birine <asp:ContentPlaceHolder> karşılık gelen bir <asp:Content> etiket içerdiğine dikkat edin. Her <asp:Content> etiket, geçersiz kıldığını belirli <asp:ContentPlaceHolder> bir öğeye işaret eden bir ContentPlaceHolderID özniteliği içerir.
Ayrıca, Liste 2'deki içerik görünümü sayfasında normal açma ve kapatma HTML etiketlerinden hiçbirinin bulunmadığını da görebilirsiniz. Örneğin, açma ve kapatma <html> veya <head> etiketleri içermez. Normal açma ve kapatma etiketlerinin tümü görünüm ana sayfasında yer alır.
Görünüm içeriği sayfasında görüntülemek istediğiniz tüm içerikler bir <asp:Content> etiketin içine yerleştirilmelidir. Bu etiketlerin dışına herhangi bir HTML veya başka içerik yerleştirirseniz, sayfayı görüntülemeye çalıştığınızda bir hata alırsınız.
İçerik görünümü sayfasındaki bir ana sayfadaki her <asp:ContentPlaceHolder> etiketi geçersiz kılmanız gerekmez. Etiketi yalnızca belirli bir <asp:ContentPlaceHolder> içerikle değiştirmek istediğinizde geçersiz kılmanız gerekir.
Örneğin, Liste 3'teki değiştirilen Dizin görünümü yalnızca iki <asp:Content> etiket içerir. Etiketlerin <asp:Content> her biri biraz metin içerir.
Listeleme 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>
Liste 3'teki görünüm istendiğinde sayfayı Şekil 5'te işler. Görünümün iki sütunlu bir sayfayı işlediğini görebilirsiniz. Ayrıca, görünüm içeriği sayfasındaki içeriğin görünüm ana sayfasındaki içerikle birleştiğine de dikkat edin
Şekil 05: Dizin görünümü içerik sayfası (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Görünüm Ana Sayfa İçeriğini Değiştirme
Görünüm ana sayfalarıyla çalışırken neredeyse hemen karşılaştığınız bir sorun, farklı görünüm içeriği sayfaları istendiğinde ana sayfa içeriğini görüntülemeyi değiştirme sorunudur. Örneğin, web uygulamanızdaki her sayfanın benzersiz bir başlığı olmasını istersiniz. 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?
İçerik görüntüleme 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 en üstünde bildirilen yönergenin <%@ page %> title özniteliğine bir sayfa başlığı atayabilirsiniz. Örneğin, "Süper Harika Web Sitesi" sayfa başlığını Dizin görünümüne atamak istiyorsanız, Dizin görünümünün en üstü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ıda işlendiğinde, istenen başlık tarayıcı başlık çubuğunda görünür:
Başlık özniteliğinin çalışması için ana görünüm sayfasının karşılaması gereken önemli bir gereksinim vardır. Görünüm ana sayfası, üst bilgisi için normal <head> etiket yerine bir etiket içermelidir<head runat="server">. <head> Etiket runat="server" özniteliğini içermiyorsa başlık görünmez. Varsayılan görünüm ana sayfası gerekli <head runat="server"> etiketi içerir.
Tek bir görünüm içeriği sayfasından ana sayfa içeriğini değiştirmenin alternatif bir yaklaşımı, değiştirmek istediğiniz bölgeyi bir <asp:ContentPlaceHolder> etikette kaydırmaktır. Örneğin, yalnızca başlığı değil, ana görünüm sayfası tarafından işlenen meta etiketleri de değiştirmek istediğinizi düşünün. Liste 4'teki ana görünüm sayfası, etiketi içinde <head> bir <asp:ContentPlaceHolder> etiket içerir.
Listeleme 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 4'teki etiketin <asp:ContentPlaceHolder> varsayılan içerik içerdiğine dikkat edin: varsayılan başlık ve varsayılan meta etiketler. Bu <asp:ContentPlaceHolder> etiketi tek bir görünüm içeriği sayfasında geçersiz kılmazsanız, varsayılan içerik görüntülenir.
Liste 5'teki içerik görünümü sayfası, özel başlık ve özel meta etiketleri görüntülemek için etiketi geçersiz kılar <asp:ContentPlaceHolder> .
Listeleme 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 öğreticide ana sayfaları görüntülemeye ve içerik sayfalarını görüntülemeye temel bir giriş sağlanmıştır. Yeni görünüm ana sayfaları oluşturmayı ve bunları temel alan görünüm içeriği sayfaları oluşturmayı öğrendiniz. Ayrıca, bir görünüm ana sayfasının içeriğini belirli bir görünüm içeriği sayfasından nasıl değiştirebileceğinizi de inceledik.
Geri Bildirim
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz. https://aka.ms/ContentUserFeedback.
Gönderin ve geri bildirimi görüntüleyin