Tekrar merhaba arkadaşlar.Bu gece biraz gaza geldim.Üst üste yazıyorum.Her zaman yazmam :)
Bu yazımda jquery ile .net arasında veri gönderip alıcaz.Veri gönderip almanın yanı sıra .Net kontrollerine jquery tarafında nasıl erişildiğini de görücez.(Daha çok şey görücez,bekleyin).

Jquery kütüphanesini <head></head> taglarımızın arasına yerleştirdikten sonra,jquery kodlarımızı şu şekilde yazalım.

   1: <script>
   2:      $(document).ready(function(){
   3:      
   4:      $("#button").click(function()
   5:      {
   6:      $("#loading").show();
   7:      $.ajax({
   8:         type: "Get",
   9:         url: "jquery.aspx",
  10:         data: "number1="+$('#<%=TextBox1.ClientID %>').val()+"&number2="+$('#<%=TextBox2.ClientID%>').val(), 
  11:         error: function() {
  12:         alert('Üzgünüm Bir Hata Oluştu.Lütfen Daha sonra Tekrar Deneyiniz');
  13:         $("#loading").hide();
  14:         },
  15:         success: function(data) 
  16:         {
  17:         $('#<%=TextBox3.ClientID %>').val(data);
  18:         $("#loading").hide();
  19:         }        
  20:      })
  21:      })
  22:      });
  23:      </script>

Basic yazımda bahsettiğim gibi göndereceğimiz veriyi “data” bloğuna yazıyoruz.(Bildiğimiz QueryString).

number1 ve number2 isimli 2 adet querystring keyimiz mevcut.

$(’#<%=TextBox1.ClientID %>’).val() = Bu kısımda TextBox1 kontrolümüzün client id değerini alıyoruz. “val()” kısmı ise bu kontrolün değerini döndürüyor bize.

Default.aspx sayfamız şu şekilde;

   1: <form id="form1" runat="server">
   2:     Hesaplamak için <span style="color:Red; cursor:hand" id="button">T&#305;klay&#305;n</span>&nbsp;
   3:     (TextBox lara integer veri girdiğinizi varsayıyorum.aksi takdirde hata vericektir.)
   4: <hr />
   5: <table>
   6: <tr>
   7: <td><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
   8: <td>+</td>
   9: <td><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
  10: <td>=</td>
  11: <td><asp:TextBox ID="TextBox3" runat="server" ReadOnly="True"></asp:TextBox></td>
  12: </tr>
  13: </table>
  14: <img id="loading" src="images/loading.gif" style="display:none" />
  15: </form>

jquery.aspx dosyamızın içeriği ise şöyle;

   1: <%@ Page Language="C#" %>
   2: <script runat="server">
   3:     protected void Page_Load(object sender, EventArgs e)
   4:     {
   5:         Toplama();
   6:     }
   7:     private void Toplama()
   8:     {
   9:         int number1 = int.Parse(Request.QueryString.Get("number1"));
  10:         int number2 = int.Parse(Request.QueryString.Get("number2"));
  11:         int toplam = number1 + number2;
  12:         Response.Write(toplam.ToString());
  13:     }
  14:     </script>

Bu kısımda querystring ile elde ettiğimiz 2 veriyi topluyor ve ekrana yazdırıyoruz.

Jquery tarafında ise geri dönen veriyi alıp sayfamızda belirtmiş olduğumuz kontrolün içerisine yazdırıyoruz.

Projenin demo çalışmasına buradan ulaşabilirsiniz.

Projenin kaynak kodlarına buradan ulaşabilirsiniz.

Technorati Etiketleri: ,,,,,


(Şu Galatasaray da bi yenilmese çok iyi olucaktı.Durup dururken aklıma geldi :( );