Seri Tutorial : ASP.NET dengan JQuery (Part2)

Tutorial ini adalah sambungan dari Tutorial “ASP.NET dengan JQuery” : Part1

Pada Bagian yang kedua akan dibahas beberapa topik yaitu:

  • Mengambil nilai dari HTML Control
  • Menggunakan JQuery pada MasterPage
  • AJAX dengan JQuery pada Aplikasi ASP.NET

Mengambil nilai dari HTML Control dengan JQuery

1. Buat ‘web form’ baru dengan nama SimpleCalculator.aspx

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Simple Calculator</title>

    <script src="lib/jquery-1.3.2.js" type="text/javascript"></script>

    <script src="lib/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>

    

    <script type="text/javascript" language="javascript">

        function Calculate() {

            var bil1 = $("#txtBil1").val();

            var bil2 = $("#txtBil2").val();

            var hasil = parseInt(bil1) + parseInt(bil2);

            alert("Hasilnya :" + hasil);

        }

 

        $(document).ready(function() {

            $("#btnProses").click(function() {

                Calculate();

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        Bilangan 1 :<br />

        <asp:TextBox ID="txtBil1" runat="server"></asp:TextBox><br /><br />

        Bilangan 2 :<br />

        <asp:TextBox ID="txtBil2" runat="server"></asp:TextBox><br /><br />

        <asp:Button ID="btnProses" runat="server" Text="Proses" />

    </div>

    </form>

</body>

</html>

 

Menggunakan JQuery pada MasterPage

Jika anda pernah menggunakan ASP.NET Web Form, maka anda pasti pernah menggunakan Masster Page. Server Control yang terdapat pada Master Page ketika ditampilkan di browser maka nilai id-nya akan berbeda dengan nama id pada server control-nya.

Contoh anda memiliki server control yang ada dalam master page sebagai berikut:

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

  <asp:Label ID="lblNama" runat="server" Text="Erick Kurniawan" /><br />

  <asp:TextBox ID="txtNama" runat="server" Text="Erick Kurniawan" />

</asp:Content>

Sesudah diproses oleh server dan dikirimkan ke browser maka hasilnya:
<span id="ctl00_ContentPlaceHolder1_lblNama">Erick Kurniawan</span><br />

<input name="ctl00$ContentPlaceHolder1$txtNama" type="text" id="ctl00_ContentPlaceHolder1_txtNama" />

Dapat dilihat bahwa nilai id yang dihasilkan mendapatkan tambahan ‘ctl00_ContentPlaceHolder1_’ jika dibandingkan dengan nilai id pada server control. Untuk mengakses control yang ada dalam master page anda dapat menggunakan cara berikut:

<script type="text/javascript" language="javascript">

      var nama = $('#<%=txtNama.ClientID%>').val();

      alert("Nama anda :" + nama);

</script>

Menggunakan JQuery AJAX di ASP.NET

JQuery mendukung interaksi berbasis AJAX menggunakan JSON Communication. JSON (Javascript Object Notation) adalah format standar yang digunakan untuk pertukaran data pada AJAX. JQuery mendukung dua metode pengiriman data menggunakan GET dan POST.

Buat halaman dengan nama JqueryAjax.aspx, kemudian tulis kode berikut:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>JQuery AJAX</title>

    <script src="lib/jquery-1.3.2.js" type="text/javascript"></script>

    <script src="lib/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>

    

    <script type="text/javascript">

        $(function() {

 

            $("#txtTiketGet").change(function() {

                $("#Error1").html("");

                var ticketsReq = $("#txtTiketGet").val();

                $.get("CekTiket.aspx", function(result) {

                    var ticketsavailable = parseInt(result);

                    if (ticketsReq > ticketsavailable) {

                        $("#Error1").html("Hanya " + ticketsavailable + " yang tersedia!");

                    }

                });

            });

 

 

            $("#txtTiketPOST").change(function() {

                $("#Error2").html("");

                var ticketsReq = $("#txtTiketPOST").val();

                $.post("CekTiketPOST.aspx", { TicReq: ticketsReq }, function(result) {

                    if (result != "") {

                        $("#Error2").html(result);

                    }

                });

            });

 

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    Waktu Load :<asp:Label ID="lblDate" runat="server"></asp:Label><br /><br />

    <strong>By GET</strong><br />

    Jumlah Pembelian Tiket :<asp:TextBox ID="txtTiketGet" runat="server"></asp:TextBox>

    <div id="Error1" style="color:Red;"></div> 

    </div>

    <br />

    <strong>By POST</strong><br />

    Jumlah Pembelian Tiket :<asp:TextBox ID="txtTiketPOST" runat="server"></asp:TextBox>

    <div id="Error2" style="color:Red;"></div> 

    </form>

</body>

</html>

Kemudian buat web form dengan nama CekTiket.aspx untuk menangani request menggunakan method GET. Tulis kode sebagai berikut:

protected void Page_Load(object sender, EventArgs e)

{

        int JmlTiket = 12;

        Response.Write(JmlTiket.ToString());

        Response.End();

}

Buat juga web form dengan nama CekTiketPOST.aspx untuk menangani request menggunakan method POST. Tulis kode sebagai berikut:

protected void Page_Load(object sender, EventArgs e)

{

        string ticReq = Request["TicReq"];

        int tics = int.Parse(ticReq);

        int jmlTiket = 5;

 

        if (tics > jmlTiket)

        {

            Response.Write("Hanya " + jmlTiket.ToString() + " yang tersedia!");

            Response.End();

        }

}

Pada tutorial selanjutnya kita akan membahas penggunaan JQuery UI (bersambung ke part3)..

One thought on “Seri Tutorial : ASP.NET dengan JQuery (Part2)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s