AJAX Kullanarak Eşleme Senaryoları Uygulama

Microsoft tarafından

PDF’yi İndir

Bu, ASP.NET MVC 1 kullanarak küçük ama eksiksiz bir web uygulaması oluşturmayı gösteren ücretsiz bir "NerdDinner" uygulaması öğreticisinin 11. adımıdır.

11. Adım, AJAX eşleme desteğini NerdDinner uygulamamızla tümleştirmeyi gösterir ve akşam yemeği oluşturan, düzenleyen veya görüntüleyen kullanıcıların akşam yemeğinin konumunu grafiksel olarak görmelerini sağlar.

ASP.NET MVC 3 kullanıyorsanız , MVC 3 veya MVC Music Store ile Çalışmaya Başlama öğreticilerini izlemenizi öneririz.

NerdDinner 11. Adım: AJAX Eşlemesini Tümleştirme

Şimdi AJAX eşleme desteğini tümleştirerek uygulamamızı görsel olarak biraz daha heyecan verici hale getireceğiz. Bu, akşam yemeği oluşturan, düzenleyen veya görüntüleyen kullanıcıların akşam yemeğinin konumunu grafik olarak görmesine olanak tanır.

Kısmi Harita Görünümü Oluşturma

Uygulamamızın içinde birkaç yerde eşleme işlevini kullanacağız. Kodumuzu DRY olarak tutmak için, birden çok denetleyici eyleminde ve görünümde yeniden kullanabileceğimiz tek bir kısmi şablonda ortak harita işlevini kapsülleyeceğiz. Bu kısmi görünümü "map.ascx" olarak adlandıracak ve \Views\Dinners dizininde oluşturacağız.

\Views\Dinners dizinine sağ tıklayıp Ekle-Görünüm> menü komutunu seçerek map.ascx kısmen oluşturabiliriz. Görünümü "Map.ascx" olarak adlandıracak, kısmi görünüm olarak denetleyeceğiz ve kesin olarak belirtilmiş bir "Dinner" model sınıfı geçireceğimizi belirteceğiz:

"Ekle" düğmesine tıkladığımızda kısmi şablonumuz oluşturulur. Ardından Map.ascx dosyasını aşağıdaki içeriğe sahip olacak şekilde güncelleştireceğiz:

<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>

İlk <betik> başvurusu, Microsoft Virtual Earth 6.2 eşleme kitaplığını gösterir. İkinci <betik> başvurusu, kısa süre içinde oluşturacağımız ve ortak Javascript eşleme mantığımızı kapsülleyen bir map.js dosyasına işaret eder. <div id="theMap"> öğesi, Virtual Earth'un haritayı barındırmak için kullanacağı HTML kapsayıcısıdır.

Ardından bu görünüme özgü iki JavaScript işlevi içeren ekli <bir betik> bloğumuz var. İlk işlev, sayfa istemci tarafı betiğini çalıştırmaya hazır olduğunda yürütülen bir işlevin kablolarını oluşturmak için jQuery kullanır. Sanal dünya haritası denetimini yüklemek için Map.js betik dosyamızda tanımlayacağımız bir LoadMap() yardımcı işlevini çağırır. İkinci işlev, bir konumu tanımlayan eşlemeye bir pin ekleyen bir geri çağırma olay işleyicisidir.

JavaScript'e eşlemek istediğimiz Akşam Yemeğinin enlemini ve boylamını eklemek için istemci tarafı betik bloğu içinde sunucu <tarafı %= %> bloğunu nasıl kullandığımıza dikkat edin. Bu, istemci tarafı betiği tarafından kullanılabilecek dinamik değerlerin çıkışını almak için kullanışlı bir tekniktir (değerleri almak için sunucuya ayrı bir AJAX çağrısı gerekmeden – bu da daha hızlı olmasını sağlar). <Görünüm sunucuda işlenirken %= %> blokları yürütülür ve bu nedenle HTML'nin çıkışı eklenmiş JavaScript değerleriyle sonuçlanır (örneğin: var latitude = 47.64312;).

Map.js yardımcı programı kitaplığı oluşturma

Şimdi haritamız için JavaScript işlevselliğini kapsüllemek için kullanabileceğimiz Map.js dosyasını oluşturalım (ve yukarıdaki LoadMap ve LoadPin yöntemlerini uygulayalım). Bunu yapmak için projemizdeki \Scripts dizinine sağ tıklayıp "Yeni Öğe Ekle>" menü komutunu, JScript öğesini seçip "Map.js" olarak adlandırabiliriz.

Aşağıda, haritamızı görüntülemek ve akşam yemeklerinde haritaya konum sabitlemeleri eklemek için Virtual Earth ile etkileşim kuracak Map.js dosyasına ekleyeceğimiz JavaScript kodu yer alır:

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 = [];
}

Haritayı Form Oluşturma ve Düzenleme ile Tümleştirme

Şimdi Harita desteğini mevcut Oluşturma ve Düzenleme senaryolarımızla tümleştireceğiz. İyi haber ise bunu yapmak oldukça kolaydır ve Denetleyici kodumuzu değiştirmemizi gerektirmez. Oluşturma ve Düzenleme görünümlerimiz, akşam yemeği formu kullanıcı arabirimini uygulamak için ortak bir "DinnerForm" kısmi görünümü paylaştığından, haritayı tek bir yere ekleyebilir ve hem Oluşturma hem de Düzenleme senaryolarımızın bunu kullanmasını sağlayabiliriz.

Tek yapmamız gereken \Views\Dinners\DinnerForm.ascx kısmi görünümünü açmak ve yeni haritamızı kısmi içerecek şekilde güncelleştirmektir. Harita eklendikten sonra güncelleştirilmiş DinnerForm'un nasıl görüneceği aşağıda verilmiştir (not: HTML form öğeleri kısa bir süre için aşağıdaki kod parçacığından atlanır):

<%= 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>

<% } %>

Yukarıdaki DinnerForm kısmen model türü olarak "DinnerFormViewModel" türünde bir nesne alır (çünkü hem Bir Dinner nesnesine hem de ülkelerin açılan listesini doldurmak için bir SelectList'e ihtiyacı vardır). Haritamız yalnızca model türü olarak "Dinner" türünde bir nesneye ihtiyaç duyuyor ve bu nedenle haritayı kısmi olarak işlediğimizde DinnerFormViewModel öğesinin yalnızca Dinner alt özelliğini ona geçiriyoruz:

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

Kısmi öğesine eklediğimiz JavaScript işlevi jQuery kullanarak "Address" HTML metin kutusuna bir "blur" olayı ekler. Büyük olasılıkla bir kullanıcı bir metin kutusuna tıkladığında veya sekmelerle tıkladığında tetikleyen "odak" olaylarını duymuşsunuzdur. Bunun tersi, kullanıcı bir metin kutusundan çıktığında tetikleyen bir "bulanıklaştırma" olayıdır. Yukarıdaki olay işleyicisi, bu olduğunda enlem ve boylam metin kutusu değerlerini temizler ve ardından haritamızda yeni adres konumunu çizer. map.js dosyasında tanımladığımız bir geri çağırma olayı işleyicisi, formumuzdaki boylam ve enlem metin kutularını, sanal dünya tarafından döndürülen değerleri ona verdiğiniz adrese göre kullanarak güncelleştirir.

Şimdi uygulamamızı yeniden çalıştırıp "Ev Sahibi Yemeği" sekmesine tıkladığımızda standart Akşam Yemeği form öğelerimizle birlikte varsayılan bir haritanın görüntülendiğini göreceğiz:

Bir adres yazıp sekme tuşuyla uzaklaştığımızda, harita konumu görüntülemek için dinamik olarak güncelleştirilir ve olay işleyicimiz enlem/boylam metin kutularını konum değerleriyle doldurur:

Yeni akşam yemeğini kaydeder ve düzenlemek üzere yeniden açarsak, sayfa yüklendiğinde harita konumunun görüntülendiğini göreceğiz:

Adres alanı her değiştirildiğinde harita ve enlem/boylam koordinatları güncelleştirilir.

Artık haritada Akşam Yemeği konumu görüntülendiğine göre, Enlem ve Boylam form alanlarını görünür metin kutuları yerine gizli öğeler olacak şekilde değiştirebiliriz (çünkü harita her adres girildiğinde bunları otomatik olarak güncelleştirir). Bunu yapmak için Html.TextBox() HTML yardımcısını kullanmaktan Html.Hidden() yardımcı yöntemini kullanmaya geçeceğiz:

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

Ve şimdi formlarımız biraz daha kullanıcı dostudur ve ham enlem/boylamı göstermekten kaçının (veritabanındaki her Akşam Yemeği ile birlikte bunları depolamaya devam ederken):

Haritayı Ayrıntılar Görünümü ile Tümleştirme

Haritayı Oluşturma ve Düzenleme senaryolarımızla tümleştirdiğimize göre, şimdi bunu Ayrıntılar senaryomuzla da tümleştirelim. Tek yapmamız gereken Ayrıntılar görünümünde % Html.RenderPartial("map"); %> öğesini çağırmaktır<.

Ayrıntılar görünümünün tamamına (harita tümleştirmesi ile) yönelik kaynak kodu aşağıdaki gibi görünür:

<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>

Ve şimdi bir kullanıcı /Dinners/Details/[id] URL'sine gittiği zaman akşam yemeğiyle ilgili ayrıntıları, yemeğin haritadaki konumunu (üzerine gelindiğinde yemeğin başlığını ve adresini gösteren bir raptiye ile tamamlandı) görür ve bunun için RSVP'ye bir AJAX bağlantısı olur:

Veritabanımızda ve Depomuzda Konum Araması Uygulama

AJAX uygulamamızı tamamlamak için uygulamanın giriş sayfasına kullanıcıların kendilerine yakın akşam yemekleri için grafik olarak arama yapmasını sağlayan bir Harita ekleyelim.

Akşam Yemekleri için konum tabanlı radius aramasını verimli bir şekilde gerçekleştirmek için veritabanımız ve veri deposu katmanımız içinde destek uygulayarak başlayacağız. Bunu uygulamak için SQL 2008'in yeni jeo-uzamsal özelliklerini kullanabilir veya alternatif olarak Gary Dryden'ın şu makalede ele aldığı bir SQL işlev yaklaşımı kullanabiliriz: http://www.codeproject.com/KB/cs/distancebetweenlocations.aspx.

Bu tekniği uygulamak için Visual Studio'da "Sunucu Gezgini"ni açacağız, NerdDinner veritabanını seçip altındaki "işlevler" alt düğümüne sağ tıklayıp yeni bir "Skaler değerli işlev" oluşturmayı seçeceğiz:

Ardından aşağıdaki DistanceBetween işlevini yapıştıracağız:

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

Ardından SQL Server içinde "NearestDinners" olarak adlandıracağımız yeni bir tablo değerli işlev oluşturacağız:

Bu "NearestDinners" tablo işlevi, sağladığımız enlem ve boylama 100 mil içindeki tüm Akşam Yemekleri'ni döndürmek için DistanceBetween yardımcı işlevini kullanır:

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

Bu işlevi çağırmak için önce \Models dizinimizdeki NerdDinner.dbml dosyasına çift tıklayarak LINQ to SQL tasarımcısını açacağız:

Daha sonra NearestDinners ve DistanceBetween işlevlerini LINQ to SQL tasarımcısına sürükleyerek bunların LINQ to SQL NerdDinnerDataContext sınıfımıza yöntem olarak eklenmesine neden olacağız:

Ardından DinnerRepository sınıfımızda, belirtilen konuma 100 mil mesafedeki yaklaşan Akşam Yemekleri'ni döndürmek için NearestDinner işlevini kullanan bir "FindByLocation" sorgu yöntemini kullanıma açabiliriz:

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;
}

JSON Tabanlı AJAX Arama Eylem Yöntemi Uygulama

Şimdi yeni FindByLocation() depo yönteminden yararlanarak haritayı doldurmak için kullanılabilecek Dinner verilerinin listesini geri döndüren bir denetleyici eylem yöntemi uygulayacağız. Bu eylem yönteminin Akşam Yemeği verilerini JSON (JavaScript Nesne Gösterimi) biçiminde geri döndürmesini sağlayacağız, böylece istemcide JavaScript kullanılarak kolayca işlenebilir.

Bunu uygulamak için\Controllers dizinine sağ tıklayıp Add-Controller> menü komutunu seçerek yeni bir "SearchController" sınıfı oluşturacağız. Ardından aşağıdaki gibi yeni SearchController sınıfı içinde bir "SearchByLocation" eylem yöntemi uygulayacağız:

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());
    }
}

SearchController'ın SearchByLocation eylem yöntemi, yakındaki akşam yemeklerinin listesini almak için DinnerRepository'de FindByLocation yöntemini dahili olarak çağırır. Ancak Dinner nesnelerini istemciye doğrudan döndürmek yerine JsonDinner nesnelerini döndürür. JsonDinner sınıfı, Dinner özelliklerinin bir alt kümesini kullanıma sunar (örneğin: güvenlik nedeniyle, akşam yemeği için RSVP'leri olan kişilerin adlarını açıklamaz). Ayrıca Dinner'da mevcut olmayan ve belirli bir akşam yemeğiyle ilişkili RSVP nesnelerinin sayısı sayılarak dinamik olarak hesaplanan bir RSVPCount özelliği içerir.

Ardından, JSON tabanlı tel biçimini kullanarak akşam yemeği sırasını döndürmek için Denetleyici temel sınıfında Json() yardımcı yöntemini kullanıyoruz. JSON, basit veri yapılarını temsil etmek için standart bir metin biçimidir. Aşağıda, eylem yöntemimizden döndürülen iki JsonDinner nesnesinin JSON biçimli listesinin nasıl göründüğüne bir örnek verilmiştir:

[{"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}]

jQuery kullanarak JSON tabanlı AJAX yöntemini çağırma

Artık NerdDinner uygulamasının giriş sayfasını SearchController'ın SearchByLocation eylem yöntemini kullanacak şekilde güncelleştirmeye hazırız. Bunu yapmak için /Views/Home/Index.aspx görünüm şablonunu açıp bir metin kutusu, arama düğmesi, haritamız ve dinnerList adlı bir <div> öğesine sahip olacak şekilde güncelleştireceğiz:

<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>

Ardından sayfaya iki JavaScript işlevi ekleyebiliriz:

<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>

Sayfa ilk yüklendiğinde ilk JavaScript işlevi haritayı yükler. İkinci JavaScript işlevi, arama düğmesine bir JavaScript tıklama olay işleyicisi ekler. Düğmeye basıldığında, Map.js dosyamıza ekleyeceğimiz FindDinnersGivenLocation() JavaScript işlevini çağırır:

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

Bu FindDinnersGivenLocation() işlevi map'i çağırır. Sanal Dünya Denetimi'ni girilen konuma ortalamak için Find() öğesini seçin. Sanal dünya haritası hizmeti geri döndüğünde harita. Find() yöntemi, son bağımsız değişken olarak geçirdiğimiz callbackUpdateMapDinners geri çağırma yöntemini çağırır.

CallbackUpdateMapDinners() yöntemi, gerçek işin yapıldığı yerdir. JQuery'nin $.post() yardımcı yöntemini kullanarak SearchController'ımızın SearchByLocation() eylem yöntemine AJAX çağrısı gerçekleştirir ve yeni ortalanan eşlemenin enlemini ve boylamını geçirir. $.post() yardımcı yöntemi tamamlandığında çağrılacak bir satır içi işlev tanımlar ve SearchByLocation() eylem yönteminden döndürülen JSON biçimli akşam yemeği sonuçları "dinners" adlı değişken kullanılarak geçirilir. Ardından döndürülen her akşam yemeği üzerinde ön erişim yapar ve akşam yemeğinin enlem ve boylamını ve diğer özelliklerini kullanarak haritaya yeni bir raptiye ekler. Ayrıca haritanın sağındaki akşam yemeği HTML listesine bir akşam yemeği girişi ekler. Ardından, hem raptiyeler hem de HTML listesi için bir vurgulama olayı alır, böylece bir kullanıcı üzerine geldiğinde akşam yemeğiyle ilgili ayrıntılar görüntülenir:

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");

Şimdi uygulamayı çalıştırıp giriş sayfasını ziyaret ettiğimizde bize bir harita sunulacak. Bir şehrin adını girdiğimizde harita, yakınıdaki yaklaşan akşam yemeklerini görüntüler:

Bir akşam yemeğinin üzerine geldiğinizde akşam yemeğiyle ilgili ayrıntılar görüntülenir.

Baloncuğun içinde veya HTML listesinde sağ taraftaki Akşam Yemeği başlığına tıklanması bizi akşam yemeğine doğru ilerler ve isteğe bağlı olarak aşağıdakiler için RSVP yapabiliriz:

Sonraki Adım

Artık NerdDinner uygulamamızın tüm uygulama işlevlerini uyguladık. Şimdi bunun otomatik birim testini nasıl etkinleştirebileceğimize bakalım.

ÖncekiSonraki