Bir önceki makalemizde Asp.Net MVC 3 Razor View Engine’inde Layout(MasterPage) yapısını incelemiştik. Şimdi ASPX View Engine’inde MasterPage’de birden fazla ContentPlaceHolder ekleme işlemini Razor View Engine’inde nasıl yapacağımızı inceleyelim.
Yeni bir Asp.Net MVC 3 Web Application – Internet Application oluşturalım.
Views/Shared altına _Tema.cshtml isimli bir CsHtml dosyası oluşturalım ve kodunu şu şekilde düzenleyelim.
_Tema.cshtml
|
<div style="width:900px; height:100px; background-color:Gray">
Üst
</div>
<div style="width:200px;height:400px;float:left; background-color:Red">
Sol
</div>
<div style="width:700px;height:400px;float:left">
@RenderBody()
</div>
<div style="width:900px; height:100px; background-color:Yellow">
Alt
</div>
|
Bu _Tema.cshtml isimli layout’umuzu oluşturduk. Şimdi _ViewStart.cshtml dosyamıza gidelim ve projemizin layout’unu _Tema.cshtml olarak düzenleyelim.
_ViewStart.cshtml
|
@{
Layout = "~/Views/Shared/_Tema.cshtml";
}
|
Home/Index.cshtml dosyamıza gidelim ve buradaki kodu da aşağıdaki gibi düzenleyelim. (Ekranda fazla görüntü olmaması açısından ekranı temizliyoruz)
Index.cshtml
|
<p>
<h1>Anasayfa</h1>
</p>
|
Projemizi çalıştıralım ve ekranda nasıl bir görüntü olacak inceleyelim.
Anasayfa yazımız ortadaki beyaz alanda geldi. Bunun sebebi, @RenderBody()’i o bölgeye yerleştirmiş olmamızdı. Şimdi kırmızı (sol) ve sarı (alt) div’leri de Index.cshtml’den doldurmak için _Tema.cshtml dosyamızda aşağıdaki düzenlemeleri yapalım.
_Tema.cshtml
|
<div style="width:900px; height:100px; background-color:Gray">
Üst
</div>
<div style="width:200px;height:400px;float:left; background-color:Red">
@RenderSection("sol",required:true)
</div>
<div style="width:700px;height:400px;float:left">
@RenderBody()
</div>
<div style="width:900px; height:100px; background-color:Yellow">
@RenderSection("alt", required: true)
</div>
|
RenderSection() ile yeni bir bölüm belirliyoruz. Bu alanların isimleri “sol” ve “alt”, required (gereklilik) true yaptık. Bu temayı alan tüm sayfalarda “sol” ve “alt” isminde 2 alan olması gerekmektedir.
Index.cshtml dosyamızda herhangi bir değişiklik yapmadan projemizi çalıştıralım.
Ekrandaki gibi bir hatayla karşılaştık. Bunun nedeni, Index.cshtml içinde “sol” isimli section’ı bulamamasıdır. Şimdi “sol” ve “alt” isimli section’ları Index.cshtml’e ekleyelim.
Index.cshtml
|
<p>
<h1>Anasayfa</h1>
</p>
@section sol{
<b>Sol Menü</b>
}
@section alt{
<h2>Alt Menü</h2>
}
|
Projemizi çalıştıralım ve sonucunu inceleyelim.
Veysel Uğur KIZMAZ
Bilgisayar Mühendisi
veysel@ugurkizmaz.com
www.ugurkizmaz.com