Mvc de javascript ile div Yükleme

Bu örneğimizde bir başka uygulamalarda olduğu gibi sayfayı yeniden yüklemeyeceğiz oluşturduğumuz bir partial viewı javascript ile tetikleceğiz ve bulunduğumuz sayfaya ekleyeceğiz. Böylelikle sayfa yüklenmeden güncellenmiş olacaktır.

Öncelikle KarayelTasarimJavaScript adında bir tane daha mvc projesi oluşturalım daha sonra Home controllerımızın içerisine tetiklenecek PartialViewAction adında aşağıdaki gibi bir tane action metot ekliyoruz ve içerisini aşağıdaki gibi düzenliyoruz.

public ActionResult tetiklenecekPartialViewAction()

{

ViewBag.bilgi = "Karayel Tasarim javascript örnekleri";

return PartialView();

}

ActionResultımızı yazdıktan sonra tetiklenecekPartialViewAction metodumuza ait bir tane empty tipinde partial özelliğine sahip view ekliyoruz ve içerisine aşağıdaki kodları ekliyoruz.

Şimdi contact.cshtml sayfasına gidiyoruz ve içerisini aşağıdaki gibi javascritpt ve html kodlarını ekliyoruz.

<script>

function gonder() {

$('#yuklenecekYer').load("@Url.Action("tetiklenecekPartialViewAction", "Home" )");

}

</script>

<div id='yuklenecekYer'>burası</div>

<input id="btn" type="button" onclick="gonder()" value="çalıştır" />

Yukarıda gördüğünüz gibi javascript'in load metodunu ve mvcninde Url.action metodunu birlikte kullanarak yuklenecekYer adlı id'ye sahip html etiketine verileri yüklemiş olduk ve bunu da hemen aşağısında yer alan bir butonun onclick özeliğine bağlı kılarak sayfamızı javascript ile yüklenebilir hale getirmiş olduk. Şimdi ise projenizini çalıştırıp contact.cshtml sayfası tıklayıp uygulamanızı deneyebilirsiniz.

Yorum Yaz

Yorumlarınız denetimden geçtikten sonra yayınlanmaktadır...