ASP .NET MVC Partial Views

Partial Views

Partial View ana view (parent view) içerisinde render edilen bir view tanımlanmasını sağlar.  Partial View ASP.NET (.ascx) uygulamalarında kullanılan User Controller gibi çalışır.

Bir partial view oluşturulduğunda ana view içerisinde bulunan ViewDataDictionary nesnesinin bir kopyasını alır. Bu yolla ana viewin verisine erişir.  Ancak partial view veri güncellemesi yaptığında bu güncellemeler sadece partial view'in ViewData nesnesini etkiler. Ana viewde bulunan veri etkilenmez  veya değişime uğramaz.

Partial View kullanarak ana view içerisinde farklı bir view render edebilir ve proje içerisinde yeninden kullanılabilir içerikler oluşturabiliriz. Bir örnekle devam edelim;

PartialModel2.cs olarak adlandırılan bir partial view Model class oluşturuyoruz

PartialModel2.cs

[code lang="js"]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcApplication2.Models
{
public partial class PartialModel2
{
public string Ad { get; set; }
public int Yas { get; set; }

}
public partial class PartialModel2
{
public List<PartialModel2> partialModel { get; set; }

}

}
[/code]

Aşağıdaki metodları HomeController içerisine yerleştiriyoruz :

[code lang="js"]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication2.Models;

namespace MvcApplication2.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{

ViewBag.Message = "ASP.NET MVC!";

return View(new PartialModel2() { partialModel = Sampledetails() });
}
private List<partialmodel2> Sampledetails()
{
List<partialmodel2> model = new List<partialmodel2>();

model.Add(new PartialModel2()
{

Ad= "Ali",
yas = 20
});

model.Add(new PartialModel2()
{
Ad = "Hamit",
Yas = 22,
});

return model;
}

}
}
<pre>[/code]

Partial View ekliyoruz

'Home' üzerinde Sag tıkla >> Views>>Add>>View

'PartialView1' Viewin ismi ve 'Create as a partial view' kutusu işaretleniyor. Daha sonra 'Add' butonuna tıklayarak devam ediyoruz.



 

PartialView1.cshtml

[code lang="js"]
@model IEnumerable<MvcApplication2.Models.PartialModel2 >
@using MvcApplication2.Models

@if (Model != null)
{
<div class="grid">
<table cellspacing="0" width="80%">
<thead>
<tr>
<th>
Ad
</th>
<th>
Yas
</th>

</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td align="left">
@item.Ad
</td>
<td align="left">
@item.Yas
</td>


</tr>
}
</tbody>
</table>

</div>
}
[/code]

Ana viewimiz olan index.cshtml içerisinde partila viewi render ediyoruz.

[code lang="js"]
@model MvcApplication2 .Models.PartialModel2
@{
ViewBag.Title = "Home Page";
}

<p>

<div>
@Html.Partial("PartialView1", Model.partialModel)

</div>
</p>
[/code]

Projeyi çalıştırdığımızda partial view içerisindeki listemiz index.chstml içerisinde render edilmiş olarak gelecektir.