Menggunakan AJAX untuk Memberikan Updates Dinamis

oleh Microsoft

Unduh PDF

Ini adalah langkah 10 dari tutorial aplikasi "NerdDinner" gratis yang memandu cara membangun aplikasi web kecil, tetapi lengkap menggunakan ASP.NET MVC 1.

Langkah 10 menerapkan dukungan untuk pengguna yang masuk ke RSVP yang mereka minati untuk menghadiri makan malam, menggunakan pendekatan berbasis Ajax yang terintegrasi dalam halaman detail makan malam.

Jika Anda menggunakan ASP.NET MVC 3, kami sarankan Anda mengikuti tutorial Memulai MVC 3 atau MVC Music Store .

NerdDinner Langkah 10: AJAX Mengaktifkan RSVP Menerima

Sekarang mari kita terapkan dukungan untuk pengguna yang masuk ke RSVP minat mereka untuk menghadiri makan malam. Kami akan mengaktifkan ini menggunakan pendekatan berbasis AJAX yang terintegrasi dalam halaman detail makan malam.

Menunjukkan apakah pengguna adalah RSVP

Pengguna dapat mengunjungi URL /Dinners/Details/[id] untuk melihat detail tentang makan malam tertentu:

Metode tindakan Details() diimplementasikan seperti:

//
// GET: /Dinners/Details/2

public ActionResult Details(int id) {

    Dinner dinner = dinnerRepository.GetDinner(id);

    if (dinner == null)
        return View("NotFound");
    else
        return View(dinner);
}

Langkah pertama kami untuk menerapkan dukungan RSVP adalah menambahkan metode pembantu "IsUserRegistered(nama pengguna)" ke objek Makan Malam kami (dalam kelas parsial Dinner.cs yang kami bangun sebelumnya). Metode pembantu ini mengembalikan true atau false tergantung pada apakah pengguna saat ini adalah RSVP untuk Makan Malam:

public partial class Dinner {

    public bool IsUserRegistered(string userName) {
        return RSVPs.Any(r => r.AttendeeName.Equals(userName, StringComparison.InvariantCultureIgnoreCase));
    }
}

Kami kemudian dapat menambahkan kode berikut ke templat tampilan Details.aspx kami untuk menampilkan pesan yang sesuai yang menunjukkan apakah pengguna terdaftar atau tidak untuk peristiwa tersebut:

<% if (Request.IsAuthenticated) { %>
 
    <% if (Model.IsUserRegistered(Context.User.Identity.Name)) { %>       

        <p>You are registred for this event!</p>
    
    <% } else {  %>  
    
        <p>You are not registered for this event</p>
        
    <% }  %>
    
<% } else { %>
 
    <a href="/Account/Logon">Logon</a> to RSVP for this event.

<% } %>

Dan sekarang ketika pengguna mengunjungi Makan Malam, mereka terdaftar untuk mereka akan melihat pesan ini:

Dan ketika mereka mengunjungi Makan Malam, mereka tidak terdaftar untuk mereka akan melihat pesan di bawah ini:

Menerapkan Metode Tindakan Register

Sekarang mari kita tambahkan fungsionalitas yang diperlukan untuk memungkinkan pengguna ke RSVP untuk makan malam dari halaman detail.

Untuk menerapkan ini, kita akan membuat kelas "RSVPController" baru dengan mengklik kanan pada direktori \Controllers dan memilih perintah menu Add-Controller>.

Kami akan menerapkan metode tindakan "Daftar" dalam kelas RSVPController baru yang mengambil id untuk Makan Malam sebagai argumen, mengambil objek Makan Malam yang sesuai, memeriksa apakah pengguna yang masuk saat ini berada dalam daftar pengguna yang telah mendaftarkannya, dan jika tidak menambahkan objek RSVP untuk mereka:

public class RSVPController : Controller {

    DinnerRepository dinnerRepository = new DinnerRepository();

    //
    // AJAX: /Dinners/RSVPForEvent/1

    [Authorize, AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Register(int id) {

        Dinner dinner = dinnerRepository.GetDinner(id);

        if (!dinner.IsUserRegistered(User.Identity.Name)) {
        
            RSVP rsvp = new RSVP();
            rsvp.AttendeeName = User.Identity.Name;

            dinner.RSVPs.Add(rsvp);
            dinnerRepository.Save();
        }

        return Content("Thanks - we'll see you there!");
    }
}

Perhatikan di atas bagaimana kita mengembalikan string sederhana sebagai output dari metode tindakan. Kita bisa saja menyematkan pesan ini dalam templat tampilan - tetapi karena sangat kecil kita hanya akan menggunakan metode pembantu Content() pada kelas dasar pengontrol dan mengembalikan pesan string seperti di atas.

Memanggil Metode Tindakan RSVPForEvent menggunakan AJAX

Kami akan menggunakan AJAX untuk memanggil metode tindakan Daftar dari tampilan Detail kami. Menerapkan ini cukup mudah. Pertama, kita akan menambahkan dua referensi pustaka skrip:

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

Pustaka pertama mereferensikan inti ASP.NET pustaka skrip sisi klien AJAX. File ini berukuran sekitar 24k (terkompresi) dan berisi fungsionalitas AJAX sisi klien inti. Pustaka kedua berisi fungsi utilitas yang terintegrasi dengan metode pembantu AJAX bawaan ASP.NET MVC (yang akan segera kami gunakan).

Kami kemudian dapat memperbarui kode templat tampilan yang kami tambahkan sebelumnya sehingga alih-alih mengeluarkan pesan "Anda tidak terdaftar untuk peristiwa ini", kami malah merender tautan yang ketika didorong melakukan panggilan AJAX yang memanggil metode tindakan RSVPForEvent kami pada pengontrol RSVP dan RSVP pengguna:

<div id="rsvpmsg">

<% if(Request.IsAuthenticated) { %>
 
    <% if(Model.IsUserRegistered(Context.User.Identity.Name)) { %>       

        <p>You are registred for this event!</p>

    <% } else { %>  
    
        <%= Ajax.ActionLink( "RSVP for this event",
                             "Register", "RSVP",
                             new { id=Model.DinnerID }, 
                             new AjaxOptions { UpdateTargetId="rsvpmsg"}) %>         
    <% } %>
    
<% } else { %>
 
    <a href="/Account/Logon">Logon</a> to RSVP for this event.

<% } %>
    
</div>

Metode pembantu Ajax.ActionLink() yang digunakan di atas adalah bawaan ASP.NET MVC dan mirip dengan metode pembantu Html.ActionLink() kecuali bahwa alih-alih melakukan navigasi standar, ia melakukan panggilan AJAX ke metode tindakan ketika tautan diklik. Di atas kita memanggil metode tindakan "Daftar" pada pengontrol "RSVP" dan meneruskan DinnerID sebagai parameter "id" ke dalamnya. Parameter AjaxOptions akhir yang kita lewati menunjukkan bahwa kita ingin mengambil konten yang dikembalikan dari metode tindakan dan memperbarui elemen div> HTML <pada halaman yang id-nya adalah "rsvpmsg".

Dan sekarang ketika pengguna menjelajah ke makan malam, mereka belum terdaftar, mereka akan melihat tautan ke RSVP untuk itu:

Jika mereka mengklik tautan "RSVP untuk peristiwa ini" mereka akan melakukan panggilan AJAX ke metode tindakan Daftar pada pengontrol RSVP, dan ketika selesai, mereka akan melihat pesan yang diperbarui seperti di bawah ini:

Bandwidth jaringan dan lalu lintas yang terlibat ketika melakukan panggilan AJAX ini benar-benar ringan. Ketika pengguna mengklik tautan "RSVP untuk peristiwa ini", permintaan jaringan HTTP POST kecil dibuat ke URL /Dinners/Register/1 yang terlihat seperti di bawah ini pada kawat:

POST /Dinners/Register/49 HTTP/1.1
X-Requested-With: XMLHttpRequest
Content-Type: application/x-www-form-urlencoded; charset=utf-8
Referer: http://localhost:8080/Dinners/Details/49

Dan respons dari metode tindakan Register kami hanyalah:

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 29
Thanks - we'll see you there!

Panggilan ringan ini cepat dan akan berfungsi bahkan melalui jaringan yang lambat.

Menambahkan Animasi jQuery

Fungsionalitas AJAX yang kami terapkan bekerja dengan baik dan cepat. Namun, terkadang hal itu dapat terjadi begitu cepat sehingga pengguna mungkin tidak melihat bahwa tautan RSVP telah diganti dengan teks baru. Untuk membuat hasilnya sedikit lebih jelas, kita dapat menambahkan animasi sederhana untuk menarik perhatian pada pesan pembaruan.

Templat proyek ASP.NET MVC default mencakup jQuery – pustaka JavaScript sumber terbuka yang sangat baik (dan sangat populer) yang juga didukung oleh Microsoft. jQuery menyediakan sejumlah fitur, termasuk pilihan DOM HTML yang bagus dan pustaka efek.

Untuk menggunakan jQuery, pertama-tama kita akan menambahkan referensi skrip ke dalamnya. Karena kita akan menggunakan jQuery dalam berbagai tempat dalam situs kita, kita akan menambahkan referensi skrip dalam file halaman site.master kita sehingga semua halaman dapat menggunakannya.

<script src="/Scripts/jQuery-1.3.2.js" type="text/javascript"></script>

Kode yang ditulis menggunakan JQuery sering menggunakan metode JavaScript "$()" global yang mengambil satu atau beberapa elemen HTML menggunakan pemilih CSS. Misalnya, $("#rsvpmsg") memilih elemen HTML apa pun dengan id rsvpmsg, sementara $(".something") akan memilih semua elemen dengan nama kelas CSS "sesuatu". Anda juga dapat menulis kueri yang lebih canggih seperti "kembalikan semua tombol radio yang dicentang" menggunakan kueri pemilih seperti: $("input[@type=radio][@checked]").

Setelah memilih elemen, Anda dapat memanggil metode untuk mengambil tindakan, seperti menyembunyikannya: $("#rsvpmsg").hide();

Untuk skenario RSVP kami, kami akan menentukan fungsi JavaScript sederhana bernama "AnimateRSVPMessage" yang memilih div> "rsvpmsg" <dan menganimasikan ukuran konten teksnya. Kode di bawah ini memulai teks kecil dan kemudian menyebabkannya meningkat lebih dari jangka waktu 400 milidetik:

<script type="text/javascript">

    function AnimateRSVPMessage() {
        $("#rsvpmsg").animate({fontSize: "1.5em"},400);
    }

</script>

Kami kemudian dapat menghubungkan fungsi JavaScript ini untuk dipanggil setelah panggilan AJAX kami berhasil diselesaikan dengan meneruskan namanya ke metode pembantu Ajax.ActionLink() kami (melalui properti peristiwa AjaxOptions "OnSuccess"):

<%= Ajax.ActionLink( "RSVP for this event",
                     "Register", "RSVP",
                     new { id=Model.DinnerID }, 
                     new AjaxOptions { UpdateTargetId="rsvpmsg",
                                       OnSuccess="AnimateRSVPMessage"}) %>

Dan sekarang ketika tautan "RSVP untuk acara ini" diklik dan panggilan AJAX kami berhasil diselesaikan, pesan konten yang dikirim kembali akan menganimasikan dan tumbuh besar:

Selain menyediakan peristiwa "OnSuccess", objek AjaxOptions mengekspos peristiwa OnBegin, OnFailure, dan OnComplete yang dapat Anda tangani (bersama dengan berbagai properti lain dan opsi yang berguna).

Pembersihan - Merefaktor Tampilan Parsial RSVP

Templat tampilan detail kami mulai sedikit panjang, yang lembur akan membuatnya sedikit lebih sulit untuk dipahami. Untuk membantu meningkatkan keterbacaan kode, mari kita selesaikan dengan membuat tampilan parsial – RSVPStatus.ascx – yang merangkum semua kode tampilan RSVP untuk halaman Detail kami.

Kita dapat melakukan ini dengan mengklik kanan pada folder \Views\Dinners lalu memilih perintah menu Add-View>. Kita akan memilikinya mengambil objek Makan Malam sebagai ViewModel yang kuat-ketik. Kami kemudian dapat menyalin/menempelkan konten RSVP dari tampilan Details.aspx kami ke dalamnya.

Setelah kami melakukannya, mari kita juga membuat tampilan parsial lain - EditAndDeleteLinks.ascx - yang merangkum kode tampilan tautan Edit dan Hapus kami. Kami juga akan memintanya mengambil objek Makan Malam sebagai ViewModel yang sangat ditik, dan menyalin/menempelkan logika Edit dan Hapus dari tampilan Details.aspx kami ke dalamnya.

Templat tampilan detail kami kemudian hanya dapat menyertakan dua panggilan metode Html.RenderPartial() di bagian bawah:

<asp:Content ID="Title" ContentPlaceHolderID="TitleContent"runat="server">
    <%= Html.Encode(Model.Title) %>
</asp:Content>

<asp:Content ID="details" ContentPlaceHolderID="MainContent" runat="server">

    <div id="dinnerDiv">

        <h2><%=Html.Encode(Model.Title) %></h2>
        <p>
            <strong>When:</strong> 
            <%=Model.EventDate.ToShortDateString() %> 

            <strong>@</strong>
            <%=Model.EventDate.ToShortTimeString() %>
        </p>
        <p>
            <strong>Where:</strong> 
            <%=Html.Encode(Model.Address) %>,
            <%=Html.Encode(Model.Country) %>
        </p>
         <p>
            <strong>Description:</strong> 
            <%=Html.Encode(Model.Description) %>
        </p>       
        <p>
            <strong>Organizer:</strong> 
            <%=Html.Encode(Model.HostedBy) %>
            (<%=Html.Encode(Model.ContactPhone) %>)
        </p>
    
        <% Html.RenderPartial("RSVPStatus"); %>
        <% Html.RenderPartial("EditAndDeleteLinks"); %>
 
    </div>
         
</asp:Content>

Ini membuat kode lebih bersih untuk dibaca dan dirawat.

Langkah Selanjutnya

Sekarang mari kita lihat bagaimana kita dapat menggunakan AJAX lebih jauh dan menambahkan dukungan pemetaan interaktif ke aplikasi kita.

SebelumnyaBerikutnya