none
MS Knowledge Base: Bagaimana membangun aplikasi web chat menggunakan ASP.NET AJAX?(Part 2)

    General discussion

  • User Interface

     

    1.       Anda perlu untuk membuat beberapa JavaScript file untuk membuat panggilan sisi klien ke layanan WCF. Contoh kode ini berisi beberapa kode logika halaman, tetapi Anda dapat menentukan sendiri kode logika pada halaman tersebut. ASP.NET AJAX memungkinkan Anda untuk menambahkan beberapa referensi service. Dengan cara ini, ScriptManager akan  menghasilkan script kontrak pada client-side service secara otomatis. Anda dapat memanggil metode service dengan nama yang sama yang Anda gunakan pada server. Sebagai contoh, jika Anda ingin memanggil metode LeaveChatRoom dalam file Transition.svc, Anda dapat menggunakan kode berikut untuk menulis fungsi JavaScript:

      

     

      csaspnetajaxwebchat.transition.LeaveChatRoom(RoomID, SuccessCallBack, FailCallBack);

      vbaspnetajaxwebchat.transition.LeaveChatRoom(RoomID, SuccessCallBack, FailCallBack);

     

    Catatan
    - Csaspnetajaxwebchat adalah namespace untuk aplikasi ini.
    - Transition adalah nama service.
    - LeaveChatRoom adalah nama metode.
      Dalam sampel kode JavaScript, metode LeaveChatRoom memiliki satu parameter, RoomID.   

      Namun, jika Anda memiliki dua atau lebih parameter untuk satu metode, Anda harus  

      menentukan parameter sebelum fungsi SuccessCallBack.

    - SuccessCallBack adalah fungsi yang dipanggil saat service yang dipanggil berhasil.
    - FailCallBack adalah fungsi yang dipanggil saat service yang dipanggil gagal.

     

    Untuk informasi lebih lanjut tentang fungsi script, mengacu pada chatbox.js, chatMessage.js, dan file chatRoom.js dalam sampel kode.   

     

    2.       Buka halaman Default.aspx. Jika tidak ada halaman Default.aspx, Anda perlu membuatnya. Buat satu kontrol ScriptManager, dan kemudian masukkan kode berikut untuk menambahkan referensi service dan referensi script:

       

     	<asp:ScriptManager ID="ScriptManager1" runat="server">
                	<Services>
                    		<asp:ServiceReference Path="~/Services/Transition.svc" />
                	</Services>
                	<Scripts>
                    		<asp:ScriptReference Path="~/Scripts/chatbox.js" />
                	</Scripts>
        	   </asp:ScriptManager>

    Pada Head block, masukkan kode berikut untuk menambahkan JavaScript dan referensi CSS dari CDN: 

               

    		<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
    		<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/ jquery-ui.min.js"></script>
    		<script type="text/javascript" src="scripts/chatRoom.js"></script> 
    		<link rel="Stylesheet" type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/ 1.8.5/themes/dark-hive/jquery-ui.css" />

     

    Referensi ini akan memperbaiki tampilan pada sampel kode. Ada beberapa tambahan definisi markup UI yang direferensikan di halaman Default.aspx pada sampel kode.

     

    Catatan Untuk rincian lebih lanjut tentang Microsoft Ajax CDN, klik link di bagian "Referensi".

     

    3.       Buat halaman web baru. Dalam sampel kode, halaman web baru adalah halaman ChatBox.aspx. Pada halaman ChatBox.aspx, beberapa kontrol UI

          diciptakan untuk mengirim dan menerima pesan.

          Catatan Untuk informasi lebih lanjut tentang halaman ChatBox.aspx, lihat halaman ChatBox.aspx dalam sampel kode.

     

    4.      Anda sekarang siap untuk menguji aplikasi.


    Kategori Teknologi

    ·         Microsoft ASP.NET 3.5    

    ·         Microsoft ASP.NET 4

    Bahasa Pemograman 

    Contoh kode ini memuat bahasa pemograman dibawah ini:

    Language

    Project Name

    Visual C#

    CSASPNETAJAXWebChat

    Visual Basic.NET

    VBASPNETAJAXWebChat

     

    Prasyarat

    Untuk menjalankan sampel kode, anda harus memastikan .NET Framework 4 sudah terinstall dalam komputer anda.

    Referensi

    http://support.microsoft.com/kb/2494268/en-us
    Agnes Sannie [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, April 04, 2011 2:38 AM