ASP.NET Core 6/MVC/Partial View'lar
Partial view'lar layout'larla aynı amaca hizmet eder, view'lardaki kod tekrarını önlerler. Ama tam ters mantıkla çalışırlar. Layout mantığında bir view kendini layout'taki RenderBody() ile işaretlenen yere yerleştirir, partial view'da ise başka bir view'ın içeriği asıl view'ın belirli bir yerine yerleştirilir.
Partial view'lara web geliştirmede çok ihtiyaç duyarız. Aslında günümüzdeki web sitelerine dikkatlice bakarsanız hepsi birer partial view karışımıdır. Örneğin bir haber sitesinin ana sayfasına girdiğinizde çok fazla içerikle karşılaşırsınız. Çeşitli kategorilerdeki haberler, videolu haberler, dönen bir son dakika bildirgeci, borsa kurları, hava durumu, galeriler, en çok okunanlar bölümü, burç yorumları, vs. Bütün bunların direkt tek bir view tarafından üretilmesi çok zordur. Bunun yerine ana view devasa bir veri kümesi alır, aldığı bu verileri partial view'lara dağıtır. Verilerin uygun formatta kullanıcılara gösterilmesinden partial view'lar sorumludur. Partial view'ların göreceli olarak küçük bir veri kümesi üzerinde çalıştığı için artık işini yapması daha kolaydır. Ana view'ın tek görevi partial view'ların üreteceği içeriğin yerini ayarlamaktır.
Partial view'ların bir başka önemli işlevi ise tekrar eden görüntüleme görevlerini kolaylaştırmasıdır. Örneğin blog sitesinin ana sayfasında blog postlarının görüntülenmesi bir partial view'la çok rahat yapılabilir. Bütün blog postları aynı formatta görüntülenmektedir. Postun üstünde postun başlığı, ortada içerik, içeriğin sağ altında postu yayınlayan kullanıcı, postun tarihi vs. olur. Bütün bu bilgilerin partial view'a verilip partial view'ın verilen bilgileri güzel bir HTML'e çevirmesini sağlayabiliriz. Daha sonra her blog gönderisi görüntülenmesi gerektiğinde ilgili partial view'ı ihtiyaç duyduğu bilgilerle çağırıp kod tekrarının önüne geçeriz. Dahası partial view'da değişiklik yaparak sitedeki bütün postların görüntülenme şeklini değiştirebiliriz. Örneğin yazar adını sağ alttan sol alta alabiliriz.
Partial view'ların tıpkı normal view'larda olduğu gibi bir model verisi olur ve bu modeli düzgün bir şekilde görüntülemeye yararlar. Normal view'lardan farkı içeriğin direkt istemciye gönderilmek yerine başka bir view'ın içine katıştırılmasıdır.
Partial view'ları kullanabilmek için tag helper'ları etkinleştirmemiz gerekiyor. Şimdi _ViewImports.cshtml dosyasının içeriğini aşağıdaki gibi değiştirin:
@using WebApp.Models @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Burada Microsoft.AspNetCore.Mvc.TagHelpers isim alanındaki bütün tag helper sınıflarına erişim hakkı elde ediyoruz. Tag helper konusu ileride işlenecektir.
Partial view oluşturma
[değiştir]Şimdi projenizin Views/Home klasörüne _RowPartial.cshtml isminde bir view ekleyin ve içeriği şöyle olsun:
@model Product
<tr>
<td>@Model.Name</td>
<td>@Model.Price</td>
</tr>
Bu partial view model olarak bir Products nesnesi almakta ve ilgili Product nesnesinin ismini ve fiyatını bir tablo satırı şeklinde görüntülemektedir.
Partial view'ı kullanma
[değiştir]Şimdi projenizin Views/Home klasöründe List.cshtml isimli bir view oluşturun ve ismi şöyle olsun:
@model IEnumerable<Product>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h6>Products</h6>
<div>
<table>
<thead>
<tr><th>Name</th><th>Price</th></tr>
</thead>
<tbody>
@foreach (Product p in Model)
{
<partial name="_RowPartial" model="p" />
}
</tbody>
</table>
</div>
</body>
</html>
Bu view model olarak bir Product ardılı almakta ve _RowPartial isimli partial view'ı kullanarak tüm ürünlerin isim ve fiyat bilgilerini tabloya eklemektedir. <partial> etiketi ile belirli bir partial view seçimi yapılmakta ve bu partial view'a model nesnesi sağlanmaktadır. <partial> etiketinin önemli seçenekleri şunlardır:
name: Partial view'ın ismi. Arama süreci normal view arama süreciyle aynıdır. Ana view'ı hangi controller render'ladıysa arama ilk önce o controller'ın klasöründe olur.
model: Partial view'ın modelini belirtmeye yarar.
for: Partial view'ın model nesnesi ilgili ifade sonucu belirlenir. Birazdan kullanımı örneklendirilecektir.
view-data: Partial view'a model dışında ekstra veri göndermeye yarar.
Partial view modelinin bir ifade sonucu belirlenmesi
[değiştir]Bazen direkt partial view'a model nesnesi vermektense modelin bir ifade sonucu oluşturulmasını isteyebiliriz. Şimdi Views/Home klasörüne _CellPartial.cshtml isimli bir view ekleyelim ve içeriği şöyle olsun:
@model string
<td>@Model</td>
Bu partial view basitçe bir string almakta ve bu stringi bir tablo hücresi şeklinde sayfaya basmaktadır. Şimdi _RowPartial.cshtml dosyasını şöyle değiştirelim:
@model Product
<tr>
<partial name="_CellPartial" for="Name" />
<td>@Model.Price</td>
</tr>
Gördüğünüz gibi bir partial view alt işlerini başka bir partial view'a delege edebiliyor. Buradaki for seçeneği partial view'ın aldığı Product nesnesindeki bir özellik çağrısıdır. Partial view aldığı bütün Product nesnesini göndermek yerine sadece Product nesnesinin Name özelliğinin değerini _CellPartial partial view'ına göndermiştir.
Şablonlu temsilciler kullanımı
[değiştir]Partial view'lara karşı kullanılabilecek bir alternatif şablonlu temsilcilerdir ve bir şablona göre HTML üretmeye yararlar. Örnek (List.cshtml):
@model IEnumerable<Product>
@{
Layout = null;
Func<Product, object> row =@<tr><td>@item.Name</td><td>@item.Price</td></tr>;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h6>Products</h6>
<div>
<table>
<thead>
<tr><th>Name</th><th>Price</th></tr>
</thead>
<tbody>
@foreach (Product p in Model)
{
@row(p)
}
</tbody>
</table>
</div>
</body>
</html>
Burada foreach döngüsünün her bir iterasyonunda row temsilcisine ilgili Product nesnesi verilmekte ve ilgili temsilci ilgili nesneyi belirli bir şablona göre HTML'e dönüştürmektedir. Şablonun içinde @item ile belirtilen şeyler ilgili Product nesnesidir. Kimine göre bu yaklaşım yeni view oluşturmayı gerektirmediği için daha basittir ancak ilgili işlevin tekrar kullanımına zarar vermektedir. Başka bir view'ın aynı işleve ihtiyacı olduğunda kendi kod bloğunda benzer temsilci nesnesi oluşturması gerekecektir.