ASP.net: Menjalankan Javascript dari Codebehind

Menjalankan kode javascript dari codebehind sebenarnya cukup mudah, meskipun saya sering bingung dibuatnya dan saya tidak bisa langsung berhasil menerapkannya.
Sebagai contoh, buat file aspx, dan tulis kode berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
        function msgbox()
        {
            alert("Centang dulu dong checkboxnya!");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:CheckBox ID="CheckBox1" runat="server" Text="Silahkan di check!" /><br />
        <asp:Button ID="Button1" runat="server" Text="Tekan aku" />
        <br /><br />
        <asp:Label ID="Label1" runat="server" ></asp:Label>
    </div>
    </form>
</body>
</html>

Saya mendefinisikan kode javascript dengan nama ‘msgbox’ di bagian head, sebuah checkbox, button dan label.
Untuk menjalankan javascript dari codebehind, tulis kode berikut di event button1.click

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) _
Handles Button1.Click
    If CheckBox1.Checked Then
        Label1.Text = "Anda telah mencentang checkbox! Good job"
    Else
        If (Not ClientScript.IsStartupScriptRegistered("alert")) Then
            Page.ClientScript.RegisterStartupScript(Me.GetType(), _
            "alert", "javascript: msgbox()", True)
        End If
    End If
End Sub

atau jika kode javascript tidak didefinisikan di page, bisa dipanggil secara langsung seperti berikut:

...
Page.ClientScript.RegisterStartupScript(Me.GetType(), _
"alert", "javascript: alert('Centang dulu dong checkboxnya!');", True)
...

Ketika button di click dan checkbox tidak di click hasilnya

Javascript dengan AJAX AsyncPostBack

Sekarang bagaimana jika kita menggunakan AJAX? Ubah kode html, tambahkan komponen AJAX ‘UpdatePanel’

...
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:CheckBox ID="CheckBox1" runat="server" Text="Silahkan di check!" /><br />
        <asp:Button ID="Button1" runat="server" Text="Tekan aku" />
        <br /><br />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" ></asp:Label>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
...

Disini saya menempatkan label di dalam updatepanel yang akan ditriger oleh button1.
Jika dijalankan, maka tidak ada efek apapun. Kode javascript seperti tidak dijalankan.
Agar kode javascript bisa dijalankan seperti contoh pertama, ubah kode di event button1 click.

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) _
Handles Button1.Click
    If CheckBox1.Checked Then
        Label1.Text = "Anda telah mencentang checkbox! Good job"
    Else
        If (Not ClientScript.IsStartupScriptRegistered("alert")) Then
            ScriptManager.RegisterClientScriptBlock(UpdatePanel1, UpdatePanel1.GetType(), _
            "alert", "javascript: alert('Centang dulu dong checkboxnya!');", True)
        End If
    End If
End Sub

Ok.. semoga bermanfaat
Happy coding

About Yuniar

Penulis sekarang lebih banyak bekerja menggunakan teknologi Microsoft .NET secara umum dan TIDAK lagi menggunakan aplikasi MapXtreme.net dari MapInfo. Karena itu mohon maaf, jika pertanyaan-pertanyaan mengenai MapXtreme sudah tidak bisa saya jawab lagi.

Posted on 9 Juni 2010, in ASP.net and tagged , , , . Bookmark the permalink. 7 Komentar.

  1. kaka Yuniar..
    Makasih infonya..
    cuman mau tanya neh… gimana caranya supaya pemanggilan javascript tersebut dapat dilakukan secara looping..??

    thx before

  2. Klo manggil sub di behind code asp.net dari Javascript piye mas ?

    • coba seperti ini, tapi gak yakin juga sih

      <script language="javascript">
      function namafunctionjs() {
         <%=namasubdicodebehind()%>
      }
      </script>
      
      • eror mas :

        Compilation Error
        Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

        Compiler Error Message: BC30518: Overload resolution failed because no accessible ‘Write’ can be called

      • iya sih. Karena codebehind ada di server maka harus ada proses postback ke server. Agar aplikasinya melakukan postback ke server, km harus menjalankan javascript untuk postback. Coba cari di google code postback di javascrip, kalo gak salah

        __doPostBack('targetcontrol ','')
        

        nah method yang dipanggil di javascript (contoh: namasubdicodebehind) harus menghasilkan string yang merupakan javascrip __dopostback().
        dan targetcontrol adalah control yang akan melakukan event. dimana event ini akan memanggil sub/method yang ingin km jalankan.
        Untuk contohnya, japri aja ya. hahahah

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: