Asp.net Mvc'de bir PartialView sayfasını Jquery Ajax kullanarak yenileme. Partial View sayfamızda yenilenmesini istediğimiz bir tablomuz olsun. Bu tablo Jquery Datatable eklentisini kullansın. Gönderdiğimiz filtreye göre tablomuz yenilensin.
Jquery DataTable eklentisi listelenmiş veriler arasında kendisi filtreleme yapabiliyor fakat bu filrelemeyi yüklenmiş veriler üzerinde gerçekleştiriyor. Yani Pasif olanları göster dediğimde kendisine doldurulmuş olan tüm veriler arasından pasif kriterine uyanları listeliyor. Bu durum performans kaybına sebep olduğundan Ajax yenileme tekniğini kullanarak yapılan seçime göre tablonun yeni verilerle dolmasını sağlayacağız.
Partial View'ın çağrılacağı asıl sayfamız..
....
<div id="tabloBolum">
@Html.Partial("_PartialDataTable")
</div>
....
_PartialDataTable isimli Partial View saymaızdaki tablo yerleşimi ve ViewBag.TabloVeri ile verilerin gösterimi
....
<table class="m-datatable" id="dataTablo" width="100%">
<thead>
<tr>
<th title="#" data-field="RecordID">
<label class="m-checkbox m-checkbox--solid m-checkbox--brand cbSecim" style="margin-left:2px;">
<input type="checkbox" name="cbSecTumu" id="cbSecTumu">
<span></span>
</label>
</th>
<th title="Field #1" data-field="Islem">İşlem</th>
<th title="Field #2" data-field="Sayfa">Sayfa</th>
<th title="Field #3" data-field="NodId">NodId</th>
<th title="Field #4" data-field="SayfaTip">SayfaTip</th>
<th title="Field #5" data-field="Durum">Durum</th>
</tr>
</thead>
<tbody>
@foreach (var item in ViewBag.TabloVeri)
{
<tr>
<td>
<label class="m-checkbox m-checkbox--solid m-checkbox--brand">
<input type="checkbox" name="cbSecim[]" id="cbSecim[]" value="@item.SayfaId" class="cbSecim @item.SayfaId">
<span></span>
</label>
</td>
<td ..........
_PartialDataTable isimli Partial View sayfamızdaki Ajax işlemini yapacak script bloğu..
<script type="text/javascript">
//seçim yapıldıkça çağrılacak fonksiyonumuz
function TabloListele() {
var secilenDurum = $("#m_form_status").val();
var data = { seciliDurum: secilenDurum };
$.ajax({
url: '@Url.Action("TabloListe", "Sayfa")',
type: "POST",
data: JSON.stringify(data),
contentType: 'application/json',
success: function (result) {
$("#tabloBolum").html(result);
$("#m_form_status").val(secilenDurum);
}
});
}
</script>
Sayfa Controller içindeki TabloListe isimli Action..
[HttpPost]
public PartialViewResult TabloListe(string seciliDurum)
{
object durum = 1;
if (seciliDurum == "Pasif")
{
durum = 0;
}
else if (seciliDurum=="Tumu")
{
durum = null;
}
else
{
durum = 1;
}
var model = Islem.Sayfa.Listele(durum: durum);
ViewBag.TabloVeri = model;
return PartialView("_PartialDataTable", ViewBag.TabloVeri);
}
Gerekli Jquery ve Datatable eklentisi scriptlerinizi ilave etmelisiniz..
