Ajax ın her nekadar eski bir teknoloji olduğu düşünülse de Hala köklü ve büyük projelerde sıklıkla kullanıldığı ve en azında yeni teknolojiler içinde kullanım mantığı sunduğu bir gerçektir. Ajax Asynchronous JavaScript And XML yani JavaScript ve XML kısaltmasıdır. Ajax web sayfalarını yenilemeden arka planda veri gönderme ve veri alma işlemleri için kullanılır. AJAX taleplerini gerçekleştirdiğimiz ajax methodu parametre olarak istek yapılacak url, varsa parametre verilerini, bu verileri iletme yöntemini (GET, POST gibi), talep sonucunda okunacak veriler barındırır. Sonuç başarılı dönerse sayfada güncelleme yapılmasını sağlayan veya hata yı yöneten fonksiyonlarıda vardır.
Ajax methodu içeriği aşağıda;
|
1 2 3 4 5 6 7 8 9 10 |
$.ajax({ type: ‘GET’, url: ‘Index.aspx’, dateType:‘json’ success: function(response) { $(‘#’).html(response); }, }); |
type: Hangi yöntemle talepte bulunacağız. GET, POST gibi.
url: Talebin yapılacağı adres.
dataType: Boş bırakılırsa, kendisi veri tipini (xml, json, html, text) belirler. Dönecek olan değer kesin ve tek tip ise, bu değerlerden herhangi birini tanımlayabiliriz. json yada text gibi
success: Talebin başarılı bitmesi durumunda çalışacak fonksiyon. Burada talep sonucunda gelen veriler sayfaya işlenir.
Şimdide BackEnd tarafından data nasıl çekilir onu görelim.
Önce Oluşturduğum MVC projeme Home controller a aşağıdaki tanımlamaları yaptım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
public class Student { public int Id { get; set; } public string Name { get; set; } public string Gender { get; set; } public int Age { get; set; } } public static List<Student> students = new List<Student>() { new Student() { Id =1,Name = “Suresh Dasari”, Gender = “Female”,Age=20 }, new Student() { Id =2,Name = “Rohini Alavala”, Gender = “Male”, Age=35 }, new Student() { Id =3,Name = “Praveen Alavala”, Gender = “Female”,Age=20 }, new Student() { Id =4,Name = “Sateesh Alavala”, Gender = “Male”, Age =35}, new Student() { Id =5,Name = “Adrian Sai”, Gender = “Male”, Age=35}, new Student() { Id =6,Name = “Alvin Dustin”, Gender = “Male”, Age=35}, new Student() { Id =7,Name = “Axel Sai”, Gender = “Female”, Age=20}, new Student() { Id =8,Name = “Brice Dustin”, Gender = “Female”, Age=20}, }; public IActionResult Index() { return View(); } public IActionResult StudentList() { var student = students.ToList(); var studentList = JsonConvert.SerializeObject(student); return Json(studentList); } |
Sonrada Index safasına görsel ve ajax kodlarını yazdım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<div class=“text-center”> <button type=“button” id=“btnGetList” class=“btn btn-outline-success mb-3”> Student List</button> <button type=“button” id=“btnGetSingle” class=“btn btn-outline-primary mb-3”> Student Get</button> <div id=“studentList” class=“container”> </div> <br /> </div> @section scripts { <script> $(“#btnGetList”).click(function () { $.ajax({ contentType: “application/json”, dataType: “”, type: “Get”, url: “/Home/StudentList”, success: function (response) { let list = jQuery.parseJSON(response) let listTable = “<table class = table table – bordered><tr><th>ID</th> <th>NAME</th><th>GENDER</th><th>AGE</th></tr>” $.each(list, function (index, emp) { listTable += `<tr> <td> ${emp.Id}</td> <td> ${emp.Name}</td><td> ${emp.Gender}</td><td> ${emp.Age}</td></tr>`; }); listTable += “</table>” $(‘#studentList’).html(listTable); }, error: function () { alert(“Content load failed!!”); } }); }); </script> } |
Öğrenci Listesini çekmek isterseniz
Tek bir öğrenci çekmek isterseniz backEnd tarafı
|
1 2 3 4 5 6 7 8 |
public IActionResult GetStudentById(int studentId) { var student = students.FirstOrDefault(i => i.Id == studentId); var studentJson = JsonConvert.SerializeObject(student); return Json(studentJson); } |
Görsel tarafı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<div class=“text-center”> <button type=“button” id=“btnGetList” class=“btn btn-outline-success mb-3”> Student List</button> <button type=“button” id=“btnGetSingle” class=“btn btn-outline-primary mb-3”> Student Get</button> <div id=“studentList” class=“container”> </div> <br /> </div> <div> <span>Student ID</span> <input type=“text” id=“studentId” class=“form-control col-6” /> </div> <script> $(“#btnGetSingle”).click(function () { let id = $(“#studentId”).val(); $.ajax({ contentType: “application/json”, dataType: “json”, type: “Get”, url: “/Home/GetStudentById”, data: { studentId: id }, success: function (response) { let list = jQuery.parseJSON(response) let listTable = `<table class = table table – bordered><tr><th>ID</th> <th>NAME</th><th>GENDER</th><th>AGE</th></tr> <tr> <td> ${list.Id}</td> <td> ${list.Name}</td><td> ${list.Gender}</td><td> ${list.Age}</td></tr></table>`; $(‘#studentList’).html(listTable); }, error: function () { alert(“Content load failed!!”); } }); }); </script> |
Sonuç
Sayfa yenilemeden dataları hızlı bir şekilde çekmiş olduk. Sağlıcakla kalın
Bir yanıt yazın