Asp.Net ve Javascript

tarihinde gönderilmiş tarafından

javascript_callAsp.net sayfalarını hazırlarken sürekli olarak yapılan hata; basit işlemlerde bile PostBack kullanımıdır. Ama unutulmamalıdır ki; bu postback işlemleri hem işi yavaşlatır, hem de kullanıcıyı yorar.

Peki ama asp.net sayfalarında Javascript kodlamalarını nasıl yapabiliriz, mevcut ID bilgilerimiz ile browser tarafındaki ID bilgileri birbirini tutmuyor diyebilirsiniz.

O zaman yapılması gereken Javascript tarafında ClientID özelliğinin kullanılmasıdır Oppblåsbar Water Game.

Örnek olarak basit bir matematik hesabı yapalım;

bir aracın belirli bir mesafeye gidiş geliş sayısı ile birim mesafeyi çarparak toplam yapılan Km bilgisini hesaplayalım.

Burada önemli olan km bilgisinin ondalıklı yani float olabileceğini unutmamamızdır.

Aşağıdaki kodları Body alanına yazabilirsiniz.

 <form id="form1" runat="server">
    <div>
    <table>
        <tr>
            <td>Gidiş Geliş</td>
            <td>:</td>
            <td>
                <asp:TextBox ID="txt_gidisgelis" runat="server"></asp:TextBox></td>
        </tr>
         <tr>
            <td>Birim Mesafe (Km)</td>
            <td>:</td>
            <td>
                <asp:TextBox ID="txt_km" runat="server"></asp:TextBox></td>
        </tr>
         <tr>
            <td>Yapılan Yol</td>
            <td>:</td>
            <td>
                <asp:Label ID="lbl_sonuckm" runat="server" Text="..Km"></asp:Label></td>
        </tr>
    </table>
    </div>
    </form>

script kodlarımızı da gördüğünüz gibi Head alanına ekliyoruz.

<head runat="server">
    <title></title>
           <script type="text/javascript">
               function toplamkm() {
                   var count = parseInt(document.getElementById('<%=txt_gidisgelis.ClientID%>').value);
                   var km=parseFloat(document.getElementById('<%=txt_km.ClientID%>').value);
                   if (count > 0 && km > 0) { 
                   document.getElementById('<%=lbl_sonuckm.ClientID%>').innerHTML = count * km;
                   }

                                               }

</script>

</head>

Burada yapılmak istenen textbox alanlardan gelen verileri matematiksel olarak çarpıyoruz ve label alanına innerHtml olarak yazıyoruz. Ayrıca dikkat ettiyseniz

 if (count > 0 && km > 0) { 
                   document.getElementById('<%=lbl_sonuckm.ClientID%>').innerHTML = count * km;
                   }

if bloğu ile alanlara girilen verilerin her ikisinin de pozitif olmasını aksi halde hesaplama yapılmamasını belirtiyoruz. Yoksa Label alanımızda kocaman bir NaN yazısı ile karşılaşırız.

buraya kadar herşey iyi güzel ama bu text alanlarına veri girildiğini yani keypress / keyup yapıldığını nasıl yakalayabiliriz.

Bunun için de ilgili sayfanın Page_load bölümünde

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        txt_km.Attributes.Add("onKeyUp", "toplamkm()")
        txt_gidisgelis.Attributes.Add("onKeyUp", "toplamkm()")
    End Sub

tanımlaması yapılır. Bu sayede sayfa yüklendiğinde txt alanlara onKeyUp fonksiyonu eklenmiş olur.

İşte sonuç;

 

javascript Asp.net

Tüm bunlar yerine sayfamı düz html kodlarım scripti de bildiğim gibi yazarım diyebilirsiniz. Ancak, bu yöntem ile oluşan hesaplama bilgilerini programlarınızda rahatça kullanabilirsiniz, çünkü bilgileri hesapladığınız alanlar .Net araçlarıdır ve server tarafında da çalışabilir.

Kolay gelsin.

 

 

Loading