Partial View – ASP.NET MVC

Partial View Nedir?

ASP.NET MVC’deki partial view (kısmi görünüm), view içeriğinin bir bölümünü işleyen özel bir view türüdür. Partial View’ler, View’lerinizi bölümlerden oluşmasına imkan sağlayan yapılardır. Bir partial view, birden çok view içerisinde yeniden kullanılabilir böylece sayfa tasarımlarında kod tekrarını azaltmamıza yardımcı olur.

Bir başka deyişle partial view, belirli bir parça görüntü tasarımı yapıp bu parçaya görüntüyü bir veya birçok view içerisinde kullanabildiğimiz bir tasarımdır.

Partial View, view içerisinde bulunan bir ViewDataDictionary nesnesinin kendi kopyasıyla başlatır. Böylece partial view’in verilerine view erişebilir hale gelir. Bu verilerde (ViewDataDictionary nesnesi) değişiklik yapılsa dahi view verileri bundan etkilenmez.

Peki bir parça görüntü tasarımını yani partial view’ı neden kullanmak isteriz?

Bunun en bariz nedeni, elbette bir View’in bir bölümünü alıp onu Partial bir View’e ayırabilmeniz ve bu belirli bölümü istediğiniz gibi başka View’lerde yeniden kullanmanıza olanak tanımanızdır. Örneğin, sayfanızda bir oturum açma formunuz varsa, bunu Partial View’e yerleştirebilir ve oturum açma formunun birden çok sayfada görünmesini istediğiniz yere ekleyebilirsiniz. Ek bir avantaj olarak, orijinal View’i daha küçük bileşenlere ayırarak daha az karmaşık hale getirebilirsiniz.

Partial View Oluşturma/Ekleme

ASP.NET MVC’de Partial View oluşturulurken aşağıda kurallara dikkat edilir.

• Bunu kullanan View ile aynı klasörde bulunurlar veya birden fazla View onu kullanıyorsa (en yaygın durum), Views klasörünüzün içindeki “Shared” adlı klasöre yerleştirilir.

• Dosya adı, bunun normal/tam bir View olmadığını belirtmek için genellikle bir alt çizgi ile başlatılır.

Bu kuralarla, bir Partial View ekleyelim. Tüm View’lerimizin buna kolayca erişebilmesini sağlamak için onu Shared klasörümüze ekleyeceğiz:

Açılan Dialog kutusunda, “Create as a partial view” seçeneğini işaretlediğinizden emin olun ve bir isim isim giriniz.

Visual Studio şimdi sizin için normal bir View’de olduğu gibi html ve Razor kodunu koyabileceğiniz yeni bir boş View yapısı oluşturacaktır.

Örneğin açılan partial view yapsını aşağıda ki gibi değiştirelim.

<div>Merhaba Dünya!</div>
<div>Bugün: @DateTime.Now.ToString()</div>

Şimdi buna View’lerinizin birinden referans vermeyi deneyelim, örneğin View-Home klasorü içerisinde olan Index View’ımızı (Index.cshtml) kullanabiliriz. Oluşturduğumuz bir Partial View’i sayfamızın istediğimiz herhangi bir yerine ekleyebiliriz. Bizde view’ımızın en üstüne ekleyelim.

Bunun için Partial() veya PartialAsync() adlı MVC framework’ünde bulunan Html Helper nesnesinin metotlarından birini kullanacağız.

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

@await Html.PartialAsync("_Greeting")

<span>Diğer görevler veya html yapıları....</span>

Burada kullandığımız @await anahtar sözcüğü PartialAsync() metodunun Asenkron doğasıyla ilgilidir, ancak bu farklı bir eğitimin kapsamına girmektedir. Bu işlemi @Html.Partial(“_Greetin”) koduyla da gerçekleştirebilirsiniz.

Artık View’imiz işlendiğinde veya derlendiğinde, Partial View’in içeriği, PartialAsync() metodunu çağırdığınız yere otomatik olarak enjekte edildiğini ve View’in geri kalanıyla kaynaştığını görüceksiniz.

Yukarıda ki örnekte Partial View’in tam bir dosya adını ve yolunu belirtmeden ekledik bunun nedeni Partial View’ı Shared klasörü içerisinden tanımlamamızdan kaynaklanır. Eğer, Partial View’i tamamen farklı bir yere yerleştirebilirsiniz de, bu sefer tam yolu belirtmeniz gerekir.

@await Html.PartialAsync("/Views/SomeFolder/SomeSubFolder/_Greeting.cshtml")

Partial View’e Veri Gönderme

Partial View temelde yalnızca normal bir View olduğundan, Partial View’deki verilere erişmeniz gerekiyorsa aynı seçeneklere sahipsiniz. Kesin olarak girilmiş bir Model (ör. üst View’de kullanılan Modelin aynısı) veya bir ViewDataDictionary örneği aracılığıyla veya her ikisinin bir kombinasyonu aracılığıyla veriler gönderebilirsiniz.

Kısacası Partial View, içinde bulunduğu View ile bütünleşik olduğundan dolayı data göndermek için View’e bağlı controller kullanılır.

Örneğin controller üzerinden Partial View’i entegre ettiğimiz View’e bir data gönderelim.

        public IActionResult Index()
        {
            List<Student> Student = new List<Student>{
                new Student() { StudentId = 1, StudentName = "Fatih"} ,
                new Student() { StudentId = 2, StudentName = "Beyazıt"} ,
                new Student() { StudentId = 3, StudentName = "Cem"} ,
            };

            return View(Student);
        }

View’inizin içinde gelen modeli Partial View’e gönderelim.

@model IList<WebApplication1.Models.Student>

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    @Html.Partial("_Greeting",Model);
</div>

Partial View’ımızın içerisinde gelen modeli listeleyelim.

@model List<WebApplication1.Models.Student>

<table class="table">
    <tr>
        <th>
            ID
        </th>
        <th>
            Name
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @item.StudentId
            </td>
            <td>
                @item.StudentName
            </td>
        </tr>
    }
</table>