ASP.NET Web Sayfaları (Razor) Sitelerinde Tutarlı Düzen Oluşturma
yazan: Tom FitzMacken
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
,RenderBody
veRenderSection
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.
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:
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">© 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"> © 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.
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"> © 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öntemineRenderBody
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.
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"> © 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.
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.
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ığınaPageData["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>© 2012 Contoso Pharmaceuticals. All rights reserved.</p> </div> </body> </html>
Düzen sayfası, öğesinde
<title>
özelliğindenPageData
başlık değerini alan bir ifade içerir. Ayrıca, liste içerik bloğununPageData
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
Geri Bildirim
https://aka.ms/ContentUserFeedback.
Ç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.Gönderin ve geri bildirimi görüntüleyin