Ajax Post, Bu makalemizde ajax teknolojisini ve .Net WebMethod’lar yardımıyla kayıt çekme, güncelleme, silme ve kayıt ekleme gibi işlemlerinın nasıl gerçekleştiğini görmüş olacağız ve bu işlemler yapılırken ajax teknolojisi sayesinde sayfa hiç post edilmeyecek.
Ajax Post ve WebMethod Kullanarak CRUD İşlemleri
Veritabanı işlemleri Entitiy Framework üzerinden gerçekleştirmekteyim. Sayfanın post olmadan işlem yapması için UserControl’u ajax tarafında yapacağımız işlemler doğrultusunda çekip sayfaya yazdırıyoruz böylece sayfa post olmadan ajax silme, güncelleme gibi işlemleri gerçekleştiriyor.
Hemen kullanılan sayfalar ve içeriklerine gözatmaya başlayalım.
Uygulama.aspx
1 2 | <input id="kayittext" type="text"/> <input onclick="yenikayit()" type="button" value="Kaydet" /> |
Uygulama.aspx.cs
Sayfanın HTML kodunu alma Metodu
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | [WebMethod] public static string UCGetir(string sayfa) { string sonuc = ""; Page p = new Page(); UserControl u = (UserControl)p.LoadControl(sayfa); u.LoadControl(sayfa); p.Controls.Add(u); StringWriter sw = new StringWriter(); HttpContext.Current.Server.Execute(p, sw, false); sonuc = sw.ToString(); sw.Close(); return sonuc; } |
Yeni Kayıt Metodu
1 2 3 4 5 6 7 8 9 10 11 12 | [WebMethod] public static string yeni(string kayit) { DENEMEEntities test = new DENEMEEntities(); //Entity nesnemizi oluşturuyoruz. OGRENCI_NOT ogr = new OGRENCI_NOT //Entity'e ekleyeceğimiz objeyi oluşturuyoruz. { OGRADI = kayit }; test.OGRENCI_NOT.Add(ogr); //Entity'e kayıt ekliyoruz. test.SaveChanges(); //Entity üzerindeki değişiklikleri kaydediyoruz. return "Kayıt Başarılı"; } |
Kayıt Sil Metodu
1 2 3 4 5 6 7 8 9 10 11 12 13 | [WebMethod] public static string kayitsil(int id) { //Entity nesnemizi oluşturuyoruz. DENEMEEntities test = new DENEMEEntities(); //OGRENCI_NOT tablosunda bulunan ve OGRID'si fonksiyondan gelen id'ye eşit olan kaydı getiriyoruz. OGRENCI_NOT ogr = test.OGRENCI_NOT.Where(u => u.OGRID == id).Single(); //Getirdiğimiz kaydı siliyoruz. test.OGRENCI_NOT.Remove(ogr); //Değişiklikleri kaydediyoruz. test.SaveChanges(); return "Silme Başarıyla gerçekleşti"; } |
Güncelleme Alanı
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | [WebMethod] public static string guncellemealani(int id) { string sonuc = ""; //Entity nesnemizi oluşturuyoruz. DENEMEEntities test = new DENEMEEntities(); //OGRENCI_NOT tablosunda bulunan ve OGRID'si fonksiyondan gelen id'ye eşit olan kaydı getiriyoruz. var a = test.OGRENCI_NOT.Where(u => u.OGRID == id).Single(); sonuc = "<input id="guncelle" type="text" value="" + a.OGRADI.Trim() + "" /><input a.ogrid="" onclick=""guncelleme("" type="button" value="Güncelle" />"; return sonuc; /*sonuc için açıklama: *ilk sutun(td) içinde bir textbox oluşturuyoruz. *ikinci sutun(td) içindeyse button oluşturuyoruz ve bu buton sayesinde guncelleme *işleminin gerçekleşeceği guncellemeislemiyap method'una bağlanıyoruz. *guncellemeislemiyap için gerekli olan textbox içine girilen değeri ve id'sini yolluyoruz. */ } |
1 2 3 4 5 6 7 8 9 | [WebMethod] public static string guncellemeyap(int id, string kayit) { DENEMEEntities test = new DENEMEEntities(); //Entity nesnemizi oluşturuyoruz. var b = test.OGRENCI_NOT.Where(u => u.OGRID == id).Single(); b.OGRADI = kayit; test.SaveChanges(); return "Güncelle Gerçekleşti"; } |
Uygulama.js
Html response’u sunucudan alıp sayfada bastırılmasını sağlayan ve yeni kayıt metodununda bulunduğu ilgili kod bloğu şu şekilde olmalıdır.
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 | $(function () { usercontrolgetir("AsynUserControl.ascx"); //usercontrol çağırılır }); //User Control içeriği getiriliyor function usercontrolgetir(sayfa) { $.ajax({ type: "POST", url: "indelup.aspx/UCGetir", data: "{sayfa: '" + sayfa + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) { $("#kayitalani").html(msg.d); } }); } //Yeni Kayıt Ekleme function yenikayit() { $.ajax({ type: "POST", url: "indelup.aspx/yeni", data: "{kayit:'" + $("#kayittext").val() + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (msg) { alert(msg.d); usercontrolgetir("AsynUserControl.ascx"); } }); } |
AsynUserControl.ASCX:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div><strong>Departman Tablosu</strong> <asp:repeater id="Repeat1" runat="server"> <itemtemplate> <table border="1px" style="border: 1px solid #708090;"> <thead> <tr> <th>Departman Adı</th> <th style="text-align: center;">İşlem</th> </tr> </thead> <tbody> <tr id="<%# Eval("OGRID") %>"> <td><%# Eval("OGRADI") %></td> <td> <input id="silbtn" input="" onclick="silkayit(<%# Eval(" style="margin-left: 10px;" td="" type="button" value="Sil" /> </td> </tr> </tbody> </table> </itemtemplate></asp:repeater></div> |
AsynUserControl.JS
Javascript tarafında gerçekleştireceğiniz işlemler ise şu şekilde olmalıdır.
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 41 42 43 44 45 46 47 48 49 | //Guncelleme Islemi Gerceklestirir function guncelleme(id, kayit) { $.ajax({ type: "POST", url: "indelup.aspx/guncellemeyap", data: "{id:" + id + ", kayit:'" + kayit + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (msg) { alert("kayit başarılı"); usercontrolgetir("AsynUserControl.ascx"); }, error: function(msg) { alert("kayıt yapılamadı"); } }); } //Guncelleme Alanı Oluştur function guncellemeolustur(id) { $.ajax({ type: "POST", url: "indelup.aspx/guncellemealani", data: "{id:'" + id + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) { $("#" + id).fadeOut("slow", function() { $(this).html(msg.d); }).fadeIn("slow"); } }); } //Kayıt Silme function silkayit(id) { $.ajax({ type: "POST", url: "indelup.aspx/kayitsil", data: "{id: '" + id + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) { alert(msg.d); usercontrolgetir("AsynUserControl.ascx"); }, error: function(msg) { alert(msg.d); } }); } |
Güncelleme: 26.12.2019 – Artık pure olarak javascript tarafında herhangi bir kütüphaneye ihtiyaç duymadan fetch ile http request işlemlerimizi javascript’den kolaylıkla gerçekleştirebiliyoruz isterseniz bu fonksiyonu kullanarak herhangi bir yardımcı kütüphane olmadan basit bir şekilde http request işlemlerinizi gerçekleştirebilirsiniz. Bu konuda yazmış olduğum detaylı bir makale de yer almaktadır Javascript fetch fonksiyonu ile http işlemleri linkine tıklayıp ilgili makaleye ulaşabilirsiniz. Kim bilir belki değişim zamanı gelmiştir 😁 zamanında lider durumda olan ve neredeyse alternatifi olmayan jquery yardımcı metodlarının yazılım camiasının gelişmesiyle yüzlerce alternatif yönteme kavuştu ve artık bu kadar çeşitlilik arasından en iyi olanı seçmeye çalışıyoruz ve jquery kullanmama sebepleri arasında mağlesef performans değerleri çok büyük etken olabiliyor sırf bu yüzden herkesin zamanında yardımına koşan jquery yardımcı metodları için jquery is dead başlıklı başlıklar, makaleler ve kampanyalar dahi başlatılmış durumda. Yazılım camiası acımasız 😔
📚 İlgilenebileceğiniz Diğer Makalelerden Bazıları
- Javascript fetch fonksiyonu ile http işlemleri
- Javascript array işlemleri için yardımcı olabilecek ipuçları
- Javascript “Opsiyonel Zincirleme” – Optional Chaining Operatörü Nedir?
📚 Kaynaklar
✏️ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
Çok güzel bir paylaşım emeginize sağlık.Daha önceleri aspx hiç çalışmadım fazla bi bilgimde yok size sormak istediğim sey ise uygulama aspx.cs sayfanın html kodunu alma kısmı (yeni kayıt, kayıt silme,guncelleme) alanlarını body kısmına mı entegre etmek gerekiyor yoksa header kısmında script tagları arasına mı entegre etmem gerekiyor. Yardımcı olursanız çok sevinirim
Bu konuda hangisine eklerseniz ekleyin ikiside ihtiyacınızı karşılayacaktır ama şöyle bir fark var head etiketleri arasına eklediğiniz script nesneleriniz içerisinde dom elementlerine erişmenize izin verilmeyecektir(eğer sayfanın yüklenmesini bekle ve çalış gibi bir durum yok ise örnek jquery’deki şu kod gibi
$(() => { // sayfanın yüklenmesi tamamlandığında çalışacak kodlar. })) çünkü body’den önce head etiketleri arasındaki script, link gibi tanımlamalar download edilir ve diğer tanımlarınız işlenir sonra body tag’leri arasındaki etiketlerin render aşamasına geçilir fazla detaya girmeden script’iniz çalışır çalışmaz bir dom elementine erişiminiz söz konusu ise o zaman body tag’leri arasında almalısınız ama yok sayfa hazır olduğunda işlemimi yapıyorum diyorsanız o zaman hangisine eklemek isterseniz ekleyebilirsiniz.projeyi paylasabilirmisiniz