Asp.Net Mvc Layout Sayfaları – Partial View (Asp.Net Mvc Yazı Dizisi – 7)

Önceki Yazı : Asp.Net Mvc Layout Sayfaları – Render Page (Asp.Net Mvc Yazı Dizisi – 6)

Merhaba Arkadaşlar,

Önceki dersimizde Render Page konusunu işlemiştik. Bu dersimizde ise Partial View konusunu işliyor olacağız. Öncelikle genel bir tanım yapmakta fayda var.

Partial View : Sayfaların istediğimiz kısmına rahatça ekleyebileceğimiz, özel işlevleri yerine getirebilen, ancak kendi başına çalışmayan, bir sayfanın içerisinde entegre halde çalışan kısımlardır. Bir kere yazıp, aynı viewi istediğimiz kadar kullanma imkanına sahip oluruz. Asp.Net Web Forms mimarisinde ki karşılığı User Control'dür.

Genel tanımımızı da yaptıktan sonra, daha iyi anlayabilmek için hemen örneğimize geçelim.

  • Önceki derslerimizde kullandığımız IlkMvcProjesi adlı projemizi açalım.
  • Solution Explorer altında Views>Home üzerine sağ tıklayarak Add>View seçelim. Çıkan ekrana bir göz gezdirelim.

Partial view ekleme

Burada ki önemli nokta Create as a partial view kutucuğunun işaretlenmiş olmasıdır. Böylelikle ekleyeceğimiz View'in Partial View olacağını belirtmiş oluyoruz. 

  • Resimde de görüldüğü gibi Create as partial view kutucuğunu işaretleyip Name kısmına ise DenemePartial yazıp, Add tuşuna tıklayalım.
  • Boş bir sayfa açıldı. Dikkat ederseniz, herhangi bir Layout tanımı yok. Tamamen bağımsız bir yapı var karşımızda.
  • Şimdi ise içeriğine aşağıdaki kodlarımızı ekleyelim.
<div>
    <ul>
        <li>Ana Sayfa</li>
        <li>Hakkımızda</li>
        <li>İletişim</li>
    </ul>
</div>
  • Dosyamızı kaydettikten sonra, Views>Home>Index.cshtml dosyasını açalım. Açtığımız sayfanın en altına,
@Html.Partial("DenemePartial")

satırını ekleyelim. Ardından projemizi çalıştıralım. Ana sayfa açıldığı zaman aşağıdaki resimde ki gibi Partial View'imizin eklendiğini görebiliriz. @Html.Partial("Partial Adı") satırını eklediğimiz herhangi bir yerde, otomatik olarak Partial View'in içeriği görüntülenecektir. Böylelikle modüler yapılar hazırlayabilir, yapılacak değişiklikleri tek seferde uygulayarak, her sayfada otomatik güncellenmesini sağlayabiliriz.

Bunun yanında sadece görsel değil, sunucu taraflı işlemleri de Partial View içerisinde uygulayabiliriz. Bunlarla alakalı detaylı bilgiler, ilerleyen derslerde verilecektir.

Bir yazımızın daha sonuna geldik. Sonraki dersimizde ise 2 bölümlük Razor View Engine konusunun ilkini işleyeceğiz. 

Hepinize kolaylıklar diliyorum.