İnternet sayfalarında artık yeni teknolojilerle birlikte javascript’in gücü iyice gösterilmeye başlandı. Sayfa yenilemeleri yapmak yerine sadece javascript ile sayfa üzerindeki etiketler(div) güncellenmekte. Linklere, butonlara tıklandığında istenen sonuçlar etkili bir biçimde bizi rahatsız etmeden önümüze dökülmekte. Son zamanlarda özellikle sosyal paylaşım sitelerinde javascript kendini o kadar belli ediyor ki, javascript’i icat edenler bile birgün bu kadar kullanılacağını tahmin etmemiştir.
Lafı fazla uzatmadan javascript özelliğini, liklere tıklandığında sayfa yenilemesi yapmadan önümüze getiren özelliği ASP.NET MVC mimarisinde kullanmaya çalışacağız.
Bir restorantın menü listesini önümüze getiren bir senaryomuz olduğunu varsayalım. Menü listesinde ürün adı ve fiyatı olsun. Bu yapıyı temsilen bir Menu adında sınıf oluşturmalıyız.
public class Menu
{
public int Id { get; set; }
public string Name { get; set; }
public decimal Price { get; set; }
}
Şimdi MenuController adında bir controller sınıfı oluşturup bu controller sınıfının Index metodu ve Index view sayfası oluşturalım.
public class MenuController : Controller
{
List<Menu> menu = new List<Menu>
{
new Menu{Id =1, Name="Hamburger", Price=3.15M},
new Menu{Id =2, Name="Cheeseburger", Price=4.05M},
new Menu{Id =3, Name="Cola", Price=2.0M},
new Menu{Id =4, Name="Cips", Price=1.25M},
};
public ActionResult Index()
{
return View();
}
public ActionResult GetMenu()
{
return PartialView("_MenuPart", menu);
}
}
Menu Listesi linkine tıklandığında sayfa yenilenmeksizin yukardaki liste tablo halinde linkin aldına indirilacek.
Bunun için yapılacak hazırlıklardan biri jquery.unobtrusive-ajax.min.js dosyasının view sayfasına referans edilmesi gerekmektedir. Aksi taktirde yaptığımız işlem çalışmayacaktır. Bu söylediklerim ASP.NET MVC3 için geçerli tabiki.
Referans olarak ana Layout sayfasına ekliyorum javascript dosyasını.
Şimdi Index view sayfası içine “Menu Listesi” linkini oluşturmalıyız.
@Ajax.ActionLink("Menu Listesi",
"GetMenu",
new AjaxOptions{
InsertionMode=InsertionMode.Replace,
UpdateTargetId="MenuBox",
HttpMethod="GET",
})
<div id="MenuBox"></div>
Ajax helper sınıfının ActionLink Extension metodu ile link oluşturma işlemini gerçekleştirebiliriz. Bu metodun aldığı AjaxOptions parametresinde belirtilen, InsertionMode özelliği Replace olarak işaretlenir. Bu sayede işlem sonrasında, yani GetMenu metodundan dönen değeri UpdateTargerId parametresindeki html element içeriği ile değiştirileceğini belirtiyoruz.
Örneğimizde GetMenu metodu bir _MenuPart adında bir PartialView döndürüyor.
_MenuPart partial view içeriği ise şu şeklide olacaktır.
<table>
<tr>
<th>Name</th>
<th>Price</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>@Html.DisplayFor(modelItem => item.Name)</td>
<td>@Html.DisplayFor(modelItem => item.Price)</td>
<td>@Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
@Html.ActionLink("Details", "Details", new { id=item.Id }) |
@Html.ActionLink("Delete", "Delete", new { id=item.Id })
</td>
</tr>
}
</table>
Sonuç olarak Index sayfasındaki Menu Listesi linkine tıklandığında bu tablo önümüze gelecek.
