Menggunakan AJAX untuk Menerapkan Skenario Pemetaan

oleh Microsoft

Unduh PDF

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

Langkah 11 menunjukkan cara mengintegrasikan dukungan pemetaan AJAX ke dalam aplikasi NerdDinner kami, memungkinkan pengguna yang membuat, mengedit, atau melihat makan malam untuk melihat lokasi makan malam secara grafis.

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

NerdDinner Langkah 11: Mengintegrasikan Peta AJAX

Kami sekarang akan membuat aplikasi kami sedikit lebih menarik secara visual dengan mengintegrasikan dukungan pemetaan AJAX. Ini akan memungkinkan pengguna yang membuat, mengedit, atau melihat makan malam untuk melihat lokasi makan malam secara grafis.

Membuat Tampilan Parsial Peta

Kita akan menggunakan fungsionalitas pemetaan di beberapa tempat dalam aplikasi kita. Untuk menjaga kode DRY kami, kami akan merangkum fungsionalitas peta umum dalam satu templat parsial yang dapat kita gunakan kembali di beberapa tindakan dan tampilan pengontrol. Kami akan menamai tampilan parsial ini "map.ascx" dan membuatnya dalam direktori \Views\Dinners.

Kita dapat membuat parsial map.ascx dengan mengklik kanan pada direktori \Views\Dinners dan memilih perintah menu Add-View>. Kami akan memberi nama tampilan "Map.ascx", memeriksanya sebagai tampilan parsial, dan menunjukkan bahwa kita akan meneruskannya kelas model "Makan Malam" yang sangat ditik:

Ketika kita mengklik tombol "Tambahkan" templat parsial kita akan dibuat. Kami kemudian akan memperbarui file Map.ascx agar memiliki konten berikut:

<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2" type="text/javascript"></script>
<script src="/Scripts/Map.js" type="text/javascript"></script>

<div id="theMap">
</div>

<script type="text/javascript">
   
    $(document).ready(function() {
        var latitude = <%=Model.Latitude%>;
        var longitude = <%=Model.Longitude%>;
                
        if ((latitude == 0) || (longitude == 0))
            LoadMap();
        else
            LoadMap(latitude, longitude, mapLoaded);
    });
      
   function mapLoaded() {
        var title = "<%=Html.Encode(Model.Title) %>";
        var address = "<%=Html.Encode(Model.Address) %>";
    
        LoadPin(center, title, address);
        map.SetZoomLevel(14);
    } 
      
</script>

Referensi skrip> pertama <menunjuk ke pustaka pemetaan Microsoft Virtual Earth 6.2. Referensi skrip> kedua <menunjuk ke file map.js yang akan segera kita buat yang akan merangkum logika pemetaan Javascript umum kita. Elemen <div id="theMap"> adalah kontainer HTML yang akan digunakan Virtual Earth untuk menghosting peta.

Kami kemudian memiliki blok skrip> tersemat <yang berisi dua fungsi JavaScript khusus untuk tampilan ini. Fungsi pertama menggunakan jQuery untuk menyambungkan fungsi yang dijalankan saat halaman siap menjalankan skrip sisi klien. Ini memanggil fungsi pembantu LoadMap() yang akan kita tentukan dalam file skrip Map.js kita untuk memuat kontrol peta bumi virtual. Fungsi kedua adalah penanganan aktivitas panggilan balik yang menambahkan pin ke peta yang mengidentifikasi lokasi.

Perhatikan bagaimana kami menggunakan blok %= %> sisi <server dalam blok skrip sisi klien untuk menyematkan garis lintang dan bujur Makan Malam yang ingin kami petakan ke dalam JavaScript. Ini adalah teknik yang berguna untuk menghasilkan nilai dinamis yang dapat digunakan oleh skrip sisi klien (tanpa memerlukan panggilan AJAX terpisah kembali ke server untuk mengambil nilai - yang membuatnya lebih cepat). Blok <%= %> akan dijalankan ketika tampilan merender di server – sehingga output HTML hanya akan berakhir dengan nilai JavaScript yang disematkan (misalnya: lintang var = 47.64312;).

Membuat pustaka utilitas Map.js

Sekarang mari kita buat file Map.js yang dapat kita gunakan untuk merangkum fungsionalitas JavaScript untuk peta kita (dan mengimplementasikan metode LoadMap dan LoadPin di atas). Kita dapat melakukan ini dengan mengklik kanan pada direktori \Scripts dalam proyek kita, dan kemudian memilih perintah menu "Add-New> Item", pilih item JScript, dan beri nama "Map.js".

Di bawah ini adalah kode JavaScript yang akan kita tambahkan ke file Map.js yang akan berinteraksi dengan Virtual Earth untuk menampilkan peta kita dan menambahkan pin lokasi ke dalamnya untuk makan malam kita:

var map = null;
var points = [];
var shapes = [];
var center = null;

function LoadMap(latitude, longitude, onMapLoaded) {
    map = new VEMap('theMap');
    options = new VEMapOptions();
    options.EnableBirdseye = false;

    // Makes the control bar less obtrusize.
    map.SetDashboardSize(VEDashboardSize.Small);
    
    if (onMapLoaded != null)
        map.onLoadMap = onMapLoaded;

    if (latitude != null && longitude != null) {
        center = new VELatLong(latitude, longitude);
    }

    map.LoadMap(center, null, null, null, null, null, null, options);
}

function LoadPin(LL, name, description) {
    var shape = new VEShape(VEShapeType.Pushpin, LL);

    //Make a nice Pushpin shape with a title and description
    shape.SetTitle("<span class=\"pinTitle\"> " + escape(name) + "</span>");
    if (description !== undefined) {
        shape.SetDescription("<p class=\"pinDetails\">" + 
        escape(description) + "</p>");
    }
    map.AddShape(shape);
    points.push(LL);
    shapes.push(shape);
}

function FindAddressOnMap(where) {
    var numberOfResults = 20;
    var setBestMapView = true;
    var showResults = true;

    map.Find("", where, null, null, null,
           numberOfResults, showResults, true, true,
           setBestMapView, callbackForLocation);
}

function callbackForLocation(layer, resultsArray, places,
            hasMore, VEErrorMessage) {
            
    clearMap();

    if (places == null) 
        return;

    //Make a pushpin for each place we find
    $.each(places, function(i, item) {
        description = "";
        if (item.Description !== undefined) {
            description = item.Description;
        }
        var LL = new VELatLong(item.LatLong.Latitude,
                        item.LatLong.Longitude);
                        
        LoadPin(LL, item.Name, description);
    });

    //Make sure all pushpins are visible
    if (points.length > 1) {
        map.SetMapView(points);
    }

    //If we've found exactly one place, that's our address.
    if (points.length === 1) {
        $("#Latitude").val(points[0].Latitude);
        $("#Longitude").val(points[0].Longitude);
    }
}

function clearMap() {
    map.Clear();
    points = [];
    shapes = [];
}

Mengintegrasikan Peta dengan Buat dan Edit Formulir

Kami sekarang akan mengintegrasikan dukungan Peta dengan skenario Buat dan Edit yang ada. Kabar baiknya adalah bahwa ini cukup mudah dilakukan, dan tidak mengharuskan kami untuk mengubah kode Pengontrol kami. Karena tampilan Buat dan Edit kami berbagi tampilan parsial "DinnerForm" umum untuk mengimplementasikan UI formulir makan malam, kami dapat menambahkan peta di satu tempat dan memiliki skenario Buat dan Edit kami menggunakannya.

Yang perlu kita lakukan adalah membuka tampilan parsial \Views\Dinners\DinnerForm.ascx dan memperbaruinya untuk menyertakan parsial peta baru kami. Di bawah ini adalah tampilan DinnerForm yang diperbarui setelah peta ditambahkan (catatan: elemen formulir HTML dihilangkan dari cuplikan kode di bawah ini untuk keringkasan):

<%= Html.ValidationSummary() %>
 
<% using (Html.BeginForm()) { %>
 
    <fieldset>

        <div id="dinnerDiv">
            <p>
               [HTML Form Elements Removed for Brevity]
            </p>                 
            <p>
               <input type="submit" value="Save"/>
            </p>
        </div>
        
        <div id="mapDiv">    
            <%Html.RenderPartial("Map", Model.Dinner); %>
        </div> 
            
    </fieldset>

    <script type="text/javascript">

        $(document).ready(function() {
            $("#Address").blur(function(evt) {
                $("#Latitude").val("");
                $("#Longitude").val("");

                var address = jQuery.trim($("#Address").val());
                if (address.length < 1)
                    return;

                FindAddressOnMap(address);
            });
        });
    
    </script>

<% } %>

DinnerForm parsial di atas mengambil objek jenis "DinnerFormViewModel" sebagai jenis modelnya (karena membutuhkan objek Makan Malam, serta SelectList untuk mengisi daftar dropdown negara). Parsial Peta kami hanya membutuhkan objek jenis "Makan Malam" sebagai jenis modelnya, dan jadi ketika kami merender peta parsial, kami hanya meneruskan sub-properti Makan Malam dari DinnerFormViewModel ke dalamnya:

<% Html.RenderPartial("Map", Model.Dinner); %>

Fungsi JavaScript yang telah kami tambahkan ke parsial menggunakan jQuery untuk melampirkan peristiwa "blur" ke kotak teks HTML "Alamat". Anda mungkin pernah mendengar peristiwa "fokus" yang diaktifkan saat pengguna mengklik atau tab ke dalam kotak teks. Sebaliknya adalah peristiwa "kabur" yang diaktifkan saat pengguna keluar dari kotak teks. Penanganan aktivitas di atas menghapus nilai kotak teks lintang dan bujur saat ini terjadi, lalu memplot lokasi alamat baru di peta kami. Penanganan aktivitas panggilan balik yang kami tentukan dalam file map.js kemudian akan memperbarui kotak teks bujur dan lintang pada formulir kami menggunakan nilai yang dikembalikan oleh bumi virtual berdasarkan alamat yang kami berikan.

Dan sekarang ketika kita menjalankan aplikasi lagi dan klik tab "Host Dinner" kita akan melihat peta default yang ditampilkan bersama dengan elemen formulir Makan Malam standar kita:

Ketika kita mengetikkan alamat, dan kemudian tab pergi, peta akan diperbarui secara dinamis untuk menampilkan lokasi, dan penanganan aktivitas kita akan mengisi kotak teks lintang/bujur dengan nilai lokasi:

Jika kita menyimpan makan malam baru dan kemudian membukanya lagi untuk pengeditan, kita akan menemukan bahwa lokasi peta ditampilkan ketika halaman dimuat:

Setiap kali bidang alamat diubah, peta dan koordinat lintang/bujur akan diperbarui.

Sekarang setelah peta menampilkan lokasi Makan Malam, kita juga dapat mengubah bidang bentuk Lintang dan Bujur dari kotak teks yang terlihat menjadi elemen tersembunyi (karena peta secara otomatis memperbaruinya setiap kali alamat dimasukkan). Untuk melakukan ini, kita akan beralih dari menggunakan pembantu HTML Html.TextBox() ke menggunakan metode pembantu Html.Hidden():

<p>
    <%= Html.Hidden("Latitude", Model.Dinner.Latitude)%>
    <%= Html.Hidden("Longitude", Model.Dinner.Longitude)%>
</p>

Dan sekarang bentuk kami sedikit lebih ramah pengguna dan menghindari menampilkan garis lintang /bujur mentah (sambil tetap menyimpannya dengan setiap Makan Malam dalam database):

Mengintegrasikan Peta dengan Tampilan Detail

Sekarang kita memiliki peta yang terintegrasi dengan skenario Buat dan Edit kita, mari kita juga mengintegrasikannya dengan skenario Detail kita. Yang perlu kita lakukan adalah memanggil <% Html.RenderPartial("map"); %> dalam tampilan Detail.

Di bawah ini adalah seperti apa kode sumber ke tampilan Detail lengkap (dengan integrasi peta) :

<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>
    
    <div id="mapDiv">
        <%Html.RenderPartial("map"); %>    
    </div>   
         
</asp:Content>

Dan sekarang ketika pengguna menavigasi ke URL /Dinners/Details/[id] mereka akan melihat detail tentang makan malam, lokasi makan malam di peta (lengkap dengan push-pin yang ketika diarahkan ke menampilkan judul makan malam dan alamatnya), dan memiliki tautan AJAX ke RSVP untuk itu:

Menerapkan Pencarian Lokasi di Database dan Repositori kami

Untuk menyelesaikan implementasi AJAX kami, mari kita tambahkan Peta ke halaman beranda aplikasi yang memungkinkan pengguna untuk mencari makan malam secara grafis di dekat mereka.

Kami akan mulai dengan menerapkan dukungan dalam database dan lapisan repositori data kami untuk melakukan pencarian radius berbasis lokasi secara efisien untuk Makan Malam. Kita dapat menggunakan fitur geospasial baru SQL 2008 untuk mengimplementasikan ini, atau secara alternatif kita dapat menggunakan pendekatan fungsi SQL yang dibahas Gary Dryden dalam artikel di sini: http://www.codeproject.com/KB/cs/distancebetweenlocations.aspx.

Untuk menerapkan teknik ini, kita akan membuka "Server Explorer" dalam Visual Studio, pilih database NerdDinner, lalu klik kanan pada sub-simpul "fungsi" di bawahnya dan memilih untuk membuat "fungsi bernilai skalar" baru:

Kami kemudian akan menempelkan fungsi DistanceBetween berikut:

CREATE FUNCTION [dbo].[DistanceBetween](@Lat1 as real,
                @Long1 as real, @Lat2 as real, @Long2 as real)
RETURNS real
AS
BEGIN

DECLARE @dLat1InRad as float(53);
SET @dLat1InRad = @Lat1 * (PI()/180.0);
DECLARE @dLong1InRad as float(53);
SET @dLong1InRad = @Long1 * (PI()/180.0);
DECLARE @dLat2InRad as float(53);
SET @dLat2InRad = @Lat2 * (PI()/180.0);
DECLARE @dLong2InRad as float(53);
SET @dLong2InRad = @Long2 * (PI()/180.0);

DECLARE @dLongitude as float(53);
SET @dLongitude = @dLong2InRad - @dLong1InRad;
DECLARE @dLatitude as float(53);
SET @dLatitude = @dLat2InRad - @dLat1InRad;
/* Intermediate result a. */
DECLARE @a as float(53);
SET @a = SQUARE (SIN (@dLatitude / 2.0)) + COS (@dLat1InRad)
                 * COS (@dLat2InRad)
                 * SQUARE(SIN (@dLongitude / 2.0));
/* Intermediate result c (great circle distance in Radians). */
DECLARE @c as real;
SET @c = 2.0 * ATN2 (SQRT (@a), SQRT (1.0 - @a));
DECLARE @kEarthRadius as real;
/* SET kEarthRadius = 3956.0 miles */
SET @kEarthRadius = 6376.5;        /* kms */

DECLARE @dDistance as real;
SET @dDistance = @kEarthRadius * @c;
return (@dDistance);
END

Kita kemudian akan membuat fungsi bernilai tabel baru di SQL Server yang akan kita sebut "NearestDinners":

Fungsi tabel "NearestDinners" ini menggunakan fungsi pembantu DistanceBetween untuk mengembalikan semua Makan Malam dalam jarak 100 mil dari garis lintang dan bujur, kami menyediakannya:

CREATE FUNCTION [dbo].[NearestDinners]
      (
      @lat real,
      @long real
      )
RETURNS  TABLE
AS
      RETURN
      SELECT Dinners.DinnerID
      FROM   Dinners 
      WHERE  dbo.DistanceBetween(@lat, @long, Latitude, Longitude) <100

Untuk memanggil fungsi ini, pertama-tama kita akan membuka LINQ ke perancang SQL dengan mengklik dua kali pada file NerdDinner.dbml dalam direktori \Models kami:

Kami kemudian akan menyeret fungsi NearestDinners dan DistanceBetween ke perancang LINQ ke SQL, yang akan menyebabkan fungsi ditambahkan sebagai metode pada LINQ kami ke kelas SQL NerdDinnerDataContext:

Kami kemudian dapat mengekspos metode kueri "FindByLocation" pada kelas DinnerRepository kami yang menggunakan fungsi NearestDinner untuk mengembalikan Makan Malam mendatang yang berada dalam jarak 100 mil dari lokasi yang ditentukan:

public IQueryable<Dinner> FindByLocation(float latitude, float longitude) {

   var dinners = from dinner in FindUpcomingDinners()
                 join i in db.NearestDinners(latitude, longitude)
                 on dinner.DinnerID equals i.DinnerID
                 select dinner;

   return dinners;
}

Menerapkan Metode Tindakan Pencarian AJAX berbasis JSON

Kita sekarang akan menerapkan metode tindakan pengontrol yang memanfaatkan metode repositori FindByLocation() baru untuk mengembalikan daftar data Makan Malam yang dapat digunakan untuk mengisi peta. Kita akan memiliki metode tindakan ini mengembalikan data Makan Malam dalam format JSON (JavaScript Object Notation) sehingga dapat dengan mudah dimanipulasi menggunakan JavaScript pada klien.

Untuk menerapkan ini, kita akan membuat kelas "SearchController" baru dengan mengklik kanan pada direktori \Controllers dan memilih perintah menu Add-Controller>. Kami kemudian akan menerapkan metode tindakan "SearchByLocation" dalam kelas SearchController baru seperti di bawah ini:

public class JsonDinner {
    public int      DinnerID    { get; set; }
    public string   Title       { get; set; }
    public double   Latitude    { get; set; }
    public double   Longitude   { get; set; }
    public string   Description { get; set; }
    public int      RSVPCount   { get; set; }
}

public class SearchController : Controller {

    DinnerRepository dinnerRepository = new DinnerRepository();

    //
    // AJAX: /Search/SearchByLocation

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult SearchByLocation(float longitude, float latitude) {

        var dinners = dinnerRepository.FindByLocation(latitude,longitude);

        var jsonDinners = from dinner in dinners
                          select new JsonDinner {
                              DinnerID = dinner.DinnerID,
                              Latitude = dinner.Latitude,
                              Longitude = dinner.Longitude,
                              Title = dinner.Title,
                              Description = dinner.Description,
                              RSVPCount = dinner.RSVPs.Count
                          };

        return Json(jsonDinners.ToList());
    }
}

Metode tindakan SearchByLocation SearchController secara internal memanggil metode FindByLocation di DinnerRepository untuk mendapatkan daftar makan malam terdekat. Alih-alih mengembalikan objek Makan Malam langsung ke klien, sebaliknya mengembalikan objek JsonDinner. Kelas JsonDinner mengekspos subset properti Makan Malam (misalnya: karena alasan keamanan, kelas JsonDinner tidak mengungkapkan nama-nama orang yang memiliki RSVP untuk makan malam). Ini juga termasuk properti RSVPCount yang tidak ada pada Makan Malam - dan yang dihitung secara dinamis dengan menghitung jumlah objek RSVP yang terkait dengan makan malam tertentu.

Kami kemudian menggunakan metode pembantu Json() pada kelas dasar Pengontrol untuk mengembalikan urutan makan malam menggunakan format kawat berbasis JSON. JSON adalah format teks standar untuk mewakili struktur data sederhana. Di bawah ini adalah contoh seperti apa daftar berformat JSON dari dua objek JsonDinner saat dikembalikan dari metode tindakan kami:

[{"DinnerID":53,"Title":"Dinner with the Family","Latitude":47.64312,"Longitude":-122.130609,"Description":"Fun dinner","RSVPCount":2}, 
{"DinnerID":54,"Title":"Another Dinner","Latitude":47.632546,"Longitude":-122.21201,"Description":"Dinner with Friends","RSVPCount":3}]

Memanggil metode AJAX berbasis JSON menggunakan jQuery

Kami sekarang siap untuk memperbarui halaman beranda aplikasi NerdDinner untuk menggunakan metode tindakan SearchByLocation SearchController. Untuk melakukan ini, kita akan membuka templat tampilan /Views/Home/Index.aspx dan memperbaruinya untuk memiliki kotak teks, tombol pencarian, peta kami, dan <elemen div> bernama dinnerList:

<h2>Find a Dinner</h2>

<div id="mapDivLeft">

    <div id="searchBox">
        Enter your location: <%=Html.TextBox("Location") %>
        <input id="search" type="submit" value="Search"/>
    </div>

    <div id="theMap">
    </div>

</div>

<div id="mapDivRight">
    <div id="dinnerList"></div>
</div>

Kita kemudian dapat menambahkan dua fungsi JavaScript ke halaman:

<script type="text/javascript">

    $(document).ready(function() {
        LoadMap();
    });

    $("#search").click(function(evt) {
        var where = jQuery.trim($("#Location").val());
        if (where.length < 1) 
            return;

        FindDinnersGivenLocation(where);
    });

</script>

Fungsi JavaScript pertama memuat peta saat halaman pertama kali dimuat. Fungsi JavaScript kedua menghubungkan penanganan aktivitas klik JavaScript pada tombol pencarian. Ketika tombol ditekan, tombol memanggil fungsi JavaScript FindDinnersGivenLocation() yang akan kita tambahkan ke file Map.js:

function FindDinnersGivenLocation(where) {
    map.Find("", where, null, null, null, null, null, false,
       null, null, callbackUpdateMapDinners);
}

Fungsi FindDinnersGivenLocation() ini memanggil peta. Temukan() di Kontrol Bumi Virtual untuk memusatkannya pada lokasi yang dimasukkan. Ketika layanan peta bumi virtual kembali, peta. Metode Find() memanggil metode panggilan balik callbackUpdateMapDinners, kami meneruskannya sebagai argumen akhir.

Metode callbackUpdateMapDinners() adalah tempat pekerjaan nyata dilakukan. Ini menggunakan metode pembantu $.post() jQuery untuk melakukan panggilan AJAX ke metode tindakan SearchByLocation() SearchController kami - melewatinya garis lintang dan bujur peta yang baru dipusatkan. Ini mendefinisikan fungsi sebaris yang akan dipanggil ketika metode pembantu $.post() selesai, dan hasil makan malam berformat JSON yang dikembalikan dari metode tindakan SearchByLocation() akan diteruskan menggunakan variabel yang disebut "makan malam". Kemudian melakukan foreach selama setiap makan malam yang dikembalikan, dan menggunakan garis lintang dan bujur makan malam dan properti lain untuk menambahkan pin baru di peta. Ini juga menambahkan entri makan malam ke daftar HTML makan malam di sebelah kanan peta. Kemudian menghubungkan peristiwa hover untuk pushpin dan daftar HTML sehingga detail tentang makan malam ditampilkan ketika pengguna mengarah ke atasnya:

function callbackUpdateMapDinners(layer, resultsArray, places, hasMore, VEErrorMessage) {

    $("#dinnerList").empty();
    clearMap();
    var center = map.GetCenter();

    $.post("/Search/SearchByLocation", { latitude: center.Latitude, 
                                         longitude: center.Longitude },     
    function(dinners) {
        $.each(dinners, function(i, dinner) {

            var LL = new VELatLong(dinner.Latitude, 
                                   dinner.Longitude, 0, null);

            var RsvpMessage = "";

            if (dinner.RSVPCount == 1)
                RsvpMessage = "" + dinner.RSVPCount + "RSVP";
            else
                RsvpMessage = "" + dinner.RSVPCount + "RSVPs";

            // Add Pin to Map
            LoadPin(LL, '<a href="/Dinners/Details/' + dinner.DinnerID + '">'
                        + dinner.Title + '</a>',
                        "<p>" + dinner.Description + "</p>" + RsvpMessage);

            //Add a dinner to the <ul> dinnerList on the right
            $('#dinnerList').append($('<li/>')
                            .attr("class", "dinnerItem")
                            .append($('<a/>').attr("href",
                                      "/Dinners/Details/" + dinner.DinnerID)
                            .html(dinner.Title))
                            .append(" ("+RsvpMessage+")"));
        });

        // Adjust zoom to display all the pins we just added.
        map.SetMapView(points);

        // Display the event's pin-bubble on hover.
        $(".dinnerItem").each(function(i, dinner) {
            $(dinner).hover(
                function() { map.ShowInfoBox(shapes[i]); },
                function() { map.HideInfoBox(shapes[i]); }
            );
        });
    }, "json");

Dan sekarang ketika kita menjalankan aplikasi dan mengunjungi halaman beranda kita akan disajikan dengan peta. Ketika kita memasukkan nama kota peta akan menampilkan makan malam yang akan datang di dekatnya:

Melayang di atas makan malam akan menampilkan detail tentang hal itu.

Mengklik judul Makan Malam baik di gelembung atau di sisi kanan dalam daftar HTML akan menavigasi kita ke makan malam - yang kemudian dapat secara opsional RSVP untuk:

Langkah Selanjutnya

Kami sekarang telah menerapkan semua fungsionalitas aplikasi aplikasi NerdDinner kami. Sekarang mari kita lihat bagaimana kita dapat mengaktifkan pengujian unit otomatis.

SebelumnyaBerikutnya