Asp.Net MVC Render Section Kullanımı

Web ile proje geliştirirken bilirsiniz , web sayfalarımızda bağzı bölümler vardır sürekli sabittir.Genelde web sayfalarının üzerinde yer alan menü gibi.Bağzı bölümler de vardır ki ,her sayfada değişir örneğin menülere tıklanınca açılan her sayfanın başlığı ve içeriği gibi.

Aslında sayfalara özgü değişiklikleri ,örneğin sayfanın içeriği kısmını , ana layout’ta  RenderBody() ile çözeriz.Ancak yukarıda bahsettiğim sayfa ismi ve sayfa içeriği gibi birden fazla değişen kısımlar olduğunda ,bunu ana layouta RenderSection() lar ekleyerek yapabiliriz.

Şimdi hep sayfa başlığı ve içeriğinin değişmesinden ve menünün sabit kalmasından bahsettik , e hadi gelin birde örnek yapalım.

1)Öncelikle ana Layout’ımızı Shared klasöründe oluşturalım adını LayoutWithSection koyalım.

Layout ta RenderSection Kullanımı

 

2)Ardından Shared’da oluşan LayoutWithSection.cshtml sayfamızı aşağıdaki gibi kodlayalım.

 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>LayoutWithSection</title>
</head>
<body>
    <div>
        @Html.ActionLink("Sayfa1", "Page1", "Home") |
        @Html.ActionLink("Sayfa2", "Page2", "Home") |
        @Html.ActionLink("Sayfa3", "Page3", "Home") |
    </div>
    <div style="width: 650px; height: 50px; background-color: whitesmoke">
        @RenderSection("PageName")
    </div>
<div style="width: 650px; height: 250px; background-color: turquoise">
    @RenderSection("Content")
</div>
<div style="width: 650px; height: 50px; background-color: gainsboro">
    www.gencklavyeler.com
</div>
</body>
</html>

 

3)Ardından Home Conttorller a 3 adet action ekleyelim ve her bir action’ın view’ini ekleyelim ve LayoutPage’lerini LayoutWithSection.cshtml seçelim.

LayoutPage Kullanımı

 

4)Her bir view’in içini kendine özgü kodlarını yazalım.

@section dediğiniz anda oluşturduğumuz sectionlar gelir

 
@{
    ViewBag.Title = "Page1";
    Layout = "~/Views/Shared/LayoutWithSection.cshtml";
}
 
@section PageName
{
    Sayfa 1
} 
 
@section Content
{
    Sayfa 1 İçeriği
}
 
@{
    ViewBag.Title = "Page2";
    Layout = "~/Views/Shared/LayoutWithSection.cshtml";
}
 
@section PageName
{
    Sayfa 2
}
 
@section Content
{
    Sayfa 2 İçeriği
}
 
@{
    ViewBag.Title = "Page3";
    Layout = "~/Views/Shared/LayoutWithSection.cshtml";
}
 
@section PageName
{
    Sayfa 3
}
 
@section Content
{
    Sayfa 3 İçeriği
}

 

5)Evet artık projemizi çalıştırmaya hazırız. localhost…../Home/Page1 sayfamızı açalım ve sonra diğer sayfalarda gezelim.Her sayfanın kendine özgü belirlediğimiz yerleri değişecek sadece.

Render Section 1
Render Section 1
Render Section 2
Render Section 3

Tekrar görüşmek üzere…

 

 

 

 

 

 

Bir Cevap Yazın