Bu durumda Jquery kullanabiliriz.
Ufak bir Jquery örneği yaparak buttona basıldığında dataları çekme işlemini yapalım.
$.get()
public class HomeController : Controller
{
private List<string> liste = new List<string>() { "Oktay", "Şaban", "Tuğberk" };
// GET: Home
public ActionResult Index()
{
return View();
}
public PartialViewResult VerileriGetir()
{
System.Threading.Thread.Sleep(3000);
return PartialView("_DataItemPartial",liste);
}
}
Index.cshtml
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<button id="btnLoad" type="button" class="btn btn-success">Verileri Yükle</button>
<hr />
<div id="loading" class="alert alert-warning" style="display:none">
Yükleniyor
</div>
<ul id="list" class="list-group">
</ul>
<script>
$(function () {
$("#btnLoad").click(function () {
$("#list").empty();
$("#loading").show(300, function () {
$.get("/Home/VerileriGetir", function (data) {
$("#list").html(data);
$("#loading").hide(300);
});
});
})
})
</script>
_DataItemPartial.cshtml
@model List<string>
@foreach (var item in Model)
{
<li class="list-group-item">@item</li>
}
Load işlemi
Yukarıdaki kod işlemlerinde sadece Index.cshtml yi aşağıdaki şekilde yazarsak
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<button id="btnLoad" type="button" class="btn btn-success">Verileri Yükle</button>
<hr />
<div id="loading" class="alert alert-warning" style="display:none">
Yükleniyor
</div>
<ul id="list" class="list-group">
</ul>
<script>
$(function () {
$("#btnLoad").click(function () {
$("#loading").show(300);
$("#list").load("/Home/VerileriGetir", function () {
$("#loading").hide(300);
})
})
})
</script>
aynı sonucu elde edebilriiz.
Ajax () işlemi ile yazılarak
aynı kod işlemlerinde sadece script içeriği farklı olacak şekilde düzenleme yaparsak.
<script>
$(function () {
$("#btnLoad").click(function () {
$.ajax({
method: "GET",
url: "/Home/VerileriGetir",
beforeSend: function () {
$("#loading").show(300);
}
}).done(function (data) {
$("#list").html(data);
}).fail(function () {
alert("Hata Oluştu");
}).always(function () {
$("#loading").hide(300);
})
})
})
</script>
aynı sonucu elde ederiz.
JSON ile işlem yaparsak
index ve partialview aynı
script değiştirirsek
public JsonResult VerileriGetir2()
{
return Json(liste,JsonRequestBehavior.AllowGet);
}
<script>
$(function () {
$("#btnLoad").click(function () {
$.ajax({
method: "GET",
url: "/Home/VerileriGetir2",
beforeSend: function () {
$("#loading").show(300);
}
}).done(function (data) {
// Json data {"Oktay","Altan"} gibi
for (var i in data) {
var dd = data[i];
var li = $("<li class='list-group-item'></li>");
li.html(dd);
$("#list").append(li);
}
}).fail(function () {
alert("Hata Oluştu");
}).always(function () {
$("#loading").hide(300);
})
})
})
</script>
Hiç yorum yok:
Yorum Gönder