mehmetduran.com - Paylaşmak Güzeldir...
Jquery ve Ajax ile Edit Update İşlemleri
Bu yazımda jquery ve ajax ile veritabanındaki verileri nasıl değiştirebileceğimizi göstereceğim. Uzun zamandır düşündüğüm ancak şu anda yapmayı başardığım bu uygulamayı tamamen bitirdim. Data ile yüklediğimiz herhangi bir data kontrolünde (gridview, datalist, repeater... ) bu işlemi yapabileceğiz. Ancak bu işlemleri yaparken yine user control kullanacağız. User control üzerinde data yüklediğimiz kontroldeki datalar ile oynacağız. Kodlarımızı ve nasıl yapıldığını kısaca açıklayalım.

Öncelikle verileri değiştireceğimiz veritabanı tablosunda primary key olan bir sutün bulunmalı. Bu olmadan bu işlemleri yapamayız. Bu primary alana göre tüm işlemleri gerçekleştireceğiz.

Öncelikle user control (edit.ascx) kontrolümüzün html ve script kodlarına bakalım.

<script type="text/javascript">
  function gonder(data_id)
  {
  $.ajax({
  type: "POST",
  url: "Default.aspx/bak",
  data: "{data_id:"+data_id+"}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(msg) {
  $("#"+data_id).fadeOut("slow",function() {
  $(this).html(msg.d)}).fadeIn("slow");
  }
  });
  }
  function deis(data_id, isim)
  {
  $.ajax({
  type: "POST",
  url: "Default.aspx/deis",
  data: "{isim:'"+isim+"', data_id:"+data_id+"}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(msg){
  al("edit.ascx");
  }
  });
  }
</script>
<div id="data">
  <asp:Repeater ID="rp" runat="server">
    <ItemTemplate>
      <div id="<%# Eval("id") %>">
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td style="width:70px; height:30px;">
              <%# Eval("isim") %>
            </td>
            <td style="width:70px;">
              <input type="button" onclick="gonder("<%# Eval("id") %>)" value="Değiştir" />
            </td>
          </tr>
        </table>
      </div>
    </ItemTemplate>
  </asp:Repeater>
  <div id="topla"></div>
</div>

Daha sonra bu kontrolü yükleyeceğimiz Default.aspx sayfamızın html ve script kodlarına bakalım.

<head runat="server">
  <title>Ajax Edit - Update</title>
  <style type="text/css">
    body{cursor:default;}
  </style>
  <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
  <script type="text/javascript">
    function al(adres)
    {
    $.ajax({
    type: "POST",
    url: "Default.aspx/doldur",
    data: "{adres:'"+adres+"'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg){
    $("#dt").html(msg.d);
    }
    });
    }
    $(document).ready(function(){
    al("edit.ascx");
    });
  </script>
</head>
<body>
  <form id="form1" runat="server">
    <div id="dt">
    </div>
  </form>
</body>

En son olarak hem user kontrolü kullanacak olam hem de edit update işlemlerini yapacak olan Default.aspx sayfamızın kodlarına (metotlara) bakalım.

    [System.Web.Services.WebMethod]
    public static string doldur(string adres)
    {
        string sonuc = "";
        Page p = new Page();
        UserControl u = (UserControl)p.LoadControl(adres);
        u.LoadControl(adres);
        p.Controls.Add(u);
        StringWriter sw = new StringWriter();
        HttpContext.Current.Server.Execute(p, sw, false);
        sonuc = sw.ToString();
        sw.Close();
        return sonuc;
    }
 
    [System.Web.Services.WebMethod]
    public static string bak(int data_id)
    {
        string sonuc = "";
        OleDbConnection bg = new OleDbConnection("provider=microsoft.jet.oledb.4.0; data source=" + HttpContext.Current.Server.MapPath("~/isimler.mdb"));
        OleDbCommand komut = new OleDbCommand("select * from isimler where id=@id", bg);
        komut.Parameters.AddWithValue("@id", data_id);
        bg.Open();
        OleDbDataReader dr = komut.ExecuteReader();
        dr.Read();
        sonuc = "<input id=guncelle type=text value=" + dr["isim"].ToString() + " /><input type=button value=Güncelle onclick=deis(" + data_id + ",document.getElementById('guncelle').value) />";
        bg.Close();
        return sonuc;
    }
 
    [System.Web.Services.WebMethod]
    public static string deis(string isim, int data_id)
    {
        OleDbConnection bg = new OleDbConnection("provider=microsoft.jet.oledb.4.0; data source=" + HttpContext.Current.Server.MapPath("~/isimler.mdb"));
        OleDbCommand komut = new OleDbCommand("update isimler set isim='" + isim + "' where id=" + data_id, bg);
        bg.Open();
        komut.ExecuteNonQuery();
        bg.Close();
 
        return "";
    }

Görüldüğü tüm kodlarımız böyle. Biraz karışık olabilir ancak jquery ve ajax işlemlerini anladıktan sonra gayet basit ve anlaşılır. Bu uygulamayı yapmam fazla zamanımı almadı. Çok kısa sürede hazırladım. Çalışır halini en kısa sürede ajax uygulamalarım sitesine koyacağım.
Ayrıca çalışır haldeki örneği buradan indirebilirsiniz. Uygulamamızın örnek ekran çıktısı ise şöyle:

Jquery ve Ajax ile Edit Update İşlemleri

Bundan sonra bu uygulamayı daha da geliştirerek daha fonksiyonel daha kullanılır daha görsel bir araç haline getirmeyi düşünüyorum. Yapacağım uygulamaları ve değişiklikleri buradan takip edebilirsiniz.

İyi Çalışmalar!
Mehmet Duran 07 Ekim Salı 2008 23 33469 3,3
Ajax Asp.net Veritabanı jQuery Jquery Tanıtım Webmethod JSON
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Asp.net'te Jquery ve Ajax Kullanarak Email Gönderme Jquery ile Asp.net Sayfasına Ajax İsteğinde Bulunma Javascript ile FCK Editör Kullanımı (Oluşturma, Değer Alma ve Diğer İşlemler) Jquery ile Cookie İşlemleri Jquery, Ajax ve FaceBox ile Edit Update Uygulaması
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Serdar BÖLÜM 13 Kasım Perşembe 2008 18:18 #1
Merhaba; Bu uygulamaların hepsi çok güzel ama asp.net 2.0 ile çalışmaması biraz kötü olmuş. 2.0 ile veritabanı işlemleri yapabileceğimiz başka yol da yok galiba.
Mehmet Duran 13 Kasım Perşembe 2008 18:40 #2
Evet maalesef öyle. Bende kendi bloğumda kullanmak istiyordum ama uygulayamadım. Host 2.0 destekliyor ve 2.0'da da ajax çalışmıyor. Sadece jquery ajax değil microsoft'un kendi ajax uygulamaları da çalışmıyor.
Ellerinize Sağlık Çok Güzel olmuş 14 Kasım Cuma 2008 23:31 #3
Süper olmuş Peki aynı şekilde DataList Yada GridView Kullanabilirmiyiz.
Mehmet Duran 14 Kasım Cuma 2008 23:33 #4
Merhabalar. Bu uygulamada tüm data kontrollerini kullanabilirsiniz. Bu işlemde data kontrollerinin itemtemplate bölümünü kullanıyoruz. Bu yüzden tüm data kontrolleri kullanalabilirsiniz.
Kaan 22 Kasım Cumartesi 2008 09:31 #5
ASP.Net 2.0 ve jquery ile gayet rahat çalışıyorum arkadaşlar. update, insert into delete.. hiç birinde sorun yok. Fakat, derim ki bütün kontrolü hiç bir zaman ASP.Net e bırakmayın. Sayfanın gereksiz kodla, tabloyla dolmaması için bu gerekiyor.
Mehmet Duran 22 Kasım Cumartesi 2008 10:42 #6
Merhaba. Asp.net 2.0 ile çalıştırıyor iseniz çok iyi. Ben hem Visual Studio 2005 hem de Visual Studio 2008 ile denemiştim ama çalıştıramamıştım.
Kaan 23 Kasım Pazar 2008 04:23 #7
Selamlar, css çalıştığım için GridView gibi şeyleri kesinlikle kullanmıyorum. Eğer değer ajaxla geliyorsa stringbuilder ile gerekli metni hazırlayıp sonunda response.write diyorum. tabii page.controls.clear() en başta. Yok normal bir sayfaysa bir literal oluşturup forma ekliyor ve stringbuilder deki metni literale bindiriyorum. Böylece hem sayfa gereksiz kod ve tabloyla dolmuyor hem de jquery de hiç bir sorun çıkmıyor.
Kaan 23 Kasım Pazar 2008 08:01 #8
Selamlar, http://demo.evitrin.net adresine asp.net 2.0 (c#) ve jquery birlikteliğinin bir örneğini koydum. amacım arama motoru yapmak değildi. o yüzden google'da arama yapan küçük bir örnek sadece. Ayrıca jquery olmasa da olur derseniz, amacınız ajax sa, http://www.asprehberi.com/forum/ASPR_topics29.aspx adresinde bu konuyla ilgili ilginizi çekebilecek yazılarım var. Kolay gelsin
Kaan 23 Kasım Pazar 2008 08:04 #9
Ardarda spam gibi oldu ama mesajları editleme imkanı olmadığı için umarım affedersiniz. Yazmayı unutuyorum her defasında, ben vs 2008 kullanıyorum ve çalıştığım hosting firmam henüz .Net framework 3.0 veya 3.5 desteği vermediği için 2.0 kullanıyorum.
efe 10 Şubat Salı 2009 17:31 #10
peki ya güvenlik? web method`a dışarıdan çok rahat erişebilirim. web methodları sadece read-only işlemler için kullanmanız lehine. yoksa güvenlikten feragat etmeniz gerekir.
Mehmet Duran 10 Şubat Salı 2009 17:35 #11
Evet güvenlik konusunda haklısın. Ama bazı konularda da kullanmak mecburiyetindeyiz. Yoksa bazı uygulamaları yapmak zor olacaktır.
HasanG 25 Ağustos Salı 2009 22:20 #12
Asp.Net hosting için turhost'u öneririm. Sunucuları iyi ve fiyatları gayet uygun. Şu ana kadar hiç deneme fırsatım olmadı ama paket detaylarında ajax.net desteği olduğu yazıyor..
Mehmet Duran 25 Ağustos Salı 2009 22:27 #13
Bir hostun Asp.net desteği varsa zaten tüm .Net ürünleri kullanılabilir. Ayrıca desteklemeye gerek yok. Eğer destek yoksa yayınlayacağımız projeye gerekli bileşenleri kendimiz eklemeli ve sunucuda öyle yayınlamalıyız. Mesela bloğum MVC ve serverda MVC desteği yok. Ancak gerekli bileşenleri kendim projeme ekledim ve sorunsuzca çalışmakta. ;)
HasanG 25 Ağustos Salı 2009 22:30 #14
Uygulamada küçük bir bug var: Güncelleme html'i şöyle olmalı, olmazsa arasında boşluk olan bir isim verisi geldiğinde sadece ilk isim görünecektir. HTML Kurallarına uyalım, uymayanları uyaralım :) : bak metodunda sonuc = ile başlayan satırda id=guncelle value=" + dr["isim"].ToString() + " şeklinde kullanılmış. id=\"guncelle\" şekinde ya da id='guncelle' olarak düzeltilirse sorun ortadan kalkıyor.
Mehmet Duran 25 Ağustos Salı 2009 22:54 #15
Hasan sanırım bugün sitemi baştan aşağı geziyorsun. Bu arada oradaki bir bug falan değil ve uygulama sorunsuz çalışıyor. Ekran görüntüsü de mevcut ve çalışan halini de burada bulabilirsin. Ayrıca o zamanki bilgimle o kadar yapmam bile çok iyi. Ancak onları aştık artık. Zaten yeni yazdığım kodlara bakarsan aynen dediğin gibi bir kullanım olduğunu görürsün. ;)
Kursad Koc 20 Mart Cumartesi 2010 02:45 #16
Buradaki uygulamaya benzer bir şey yapıyorum.Kullanıcı değiştir butonuna basılınca bir diğer user control sayfaya dinamik olarak yükleniyor ancak şöyle bir sıkıntı var.Bu işlem sırasında user controle ait bir property'e nasıl değer atanabilir.User control adres bilgisine göre dinamik ekleniyor.Yani user control id property'sine göre ilgili id'nin bilgilerini yükleyecek.Bir fikrin var mı acaba?Farklı bir metodoloji de olabilir.ama edit için ayrı bir user control kullanmak istiyorum.İyi günler
Mehmet Duran 21 Mart Pazar 2010 00:31 #17
Merhaba. Son dönemde UserControl ile Ajax işlemlerini etkin bir biçimde yapıyorum. Bahsettiğin gibi bir değeri direk olarak UserControl altında tanımlanmış değişkene atayarak ve UserControlü render ederek istediğin sonucu elde edebilirsin. Ancak burada render konusunda sıkıntı oluşabilmekte. Bunun yanında Attributes özelliği ile render edeceğin UserControl üzerine değer gönderebilir ve bu değeri UserControl içinde yine Attributes olarak alabilirsin.
Kursad Koc 21 Mart Pazar 2010 00:59 #18
Cevap için teşekkürler. .cs kısmında yüklenecek kontrolün adres bilgisini parametre olarak verdiğimizden property e otomatik olarak erişemiyoruz.Şöyle bir yol halletti benim işimi. PropertyInfo prop = uc.GetType().GetProperty("id"); prop.SetValue(uc, 5, null); Hangi user controlü yüklediğimizi bilmeden id isimli bir property si varsa ona 5 değerini atabilmemizi sağladı..İlgin için teşekkürler iyi günler.
Mehmet Duran 24 Mart Çarşamba 2010 00:49 #19
Çözdüğüne sevindim. İyi çalışmalar dilerim.
müslüm 17 Ocak Pazartesi 2011 11:09 #20
merhaba arkadaşlar acaba bu uygulamayı facebook'taki paylaşımlara yorum kısmı için uyarlayabilirmiyiz böyle bir uygulama yapmak istiyorum ne önerirsiniz acaba. özellikle Mehmet hocam bu uygulama için siz ne önerirsiniz. Başarılar dilerim.
Mehmet Duran 04 Şubat Cuma 2011 15:23 #21
@müslüm, zaten amacım bu türlü işler için bu yöntemin kullanılabileceğini göstermekti. Söylediğin iş için oldukça uygun olduğunu düşünüyorum.
Barış 18 Nisan Pazartesi 2011 16:18 #22
Bu yöntemi veritabanına ekleme yapmak için kullandığımızı varsayalım. Peki eğer datasource repeater ise static olarak tanımlamak zorunda olduğumuz bir methodun içerisinde repeater'ı nasıl update edebiliriz ? Zira method static olunca repeater nesnesini kullanamıyoruz.
Mehmet Duran 18 Nisan Pazartesi 2011 16:57 #23
@Barış, eğer bu tür işlemler yapacaksak normal yönteme göre biraz farklı düşünmek durumundayız. Örneğin verilerin olduğu bölümü de Ajax ile çekmeliyiz. Böylece ekleme, silme, güncelleme işlemlerinde ilgili alanı yenileycek fonksiyonu çağırmamız yeterli olacaktır. Buradaki ve buradaki yazılarım fikir verici olabilir.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Hata yapmayan bir insan genellikle hiçbirşey yapmıyordur.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009