Background

The search interface was further enhanced with sliders so that users could quickly narrow down the search results, giving the application a very visual and interactive feel. In most cases a user would be able to narrow down to their desired vehicle in a couple of minutes.

Step 2: De-serializing, Manipulating and Serializing data

Since the client-side JavaScript cannot access the remote eBay service directly we set up a proxy service on our server and leverage the ASP.NET AJAX infrastructure to directly call this service from the browser. This service makes a call on behalf of the client and additionally geocodes the data as it is received from
the eBay servers.

We add the [System.Web.Script.Services.ScriptService] attribute to the webservice, this creates a javascript helper class that can be directly called from the client

[System.Web.Script.Services.ScriptService]
public class eBayMotorsDemoSvc : System.Web.Services.WebService {
 [WebMethod]
 public string GeteBayMotorsData()
 {
 return eBayMotors.GetMotors();
 }
}

Looking at the format of the returned JSON, we now create classes to hold the deserialised values.
These classes will mirror the properties we are interested in, for the returned JSON.

public class FindItemsAdvancedResponse
{
 public string Ack { get; set; }
 public searchResult[] SearchResult { get; set; }
}

public class searchResult
{
 public itemArray ItemArray { get; set; }
}

public class itemArray
{
 public List Item { get; set; }
}

public class item
{
 public long ItemID { get; set; } 
 public string ViewItemURLForNaturalSearch { get; set; }
 public string GalleryURL { get; set; } 
 public string PostalCode { get; set; }
 public int BidCount { get; set; }
 public string Title { get; set; }
 public float lat { get; set; }
 public float lng { get; set; }
 public USDPrice ConvertedCurrentPrice { get; set; }
}

public class USDPrice
{
 public float Value { get; set; }
}

Except for the lat and lng fields in items, which will be filled in by our custom geocoder, the rest of the values will be automatically filled in by the deserialization process. Now all that is left is to make the call and deserialize the data. The calls below set up the JavaScriptSerializer. This will be used to both serialize and deserialize the data.

JavaScriptSerializer eBaySerializer = new JavaScriptSerializer();
Uri jsonCallURI = new Uri("http://demoebaymotors.findyourauto.net/shopping.aspx");
HttpWebRequest webRequest = (HttpWebRequest)System.Net.WebRequest.Create(jsonCallURI);
HttpWebResponse webResponse = (HttpWebResponse)webRequest.GetResponse();

After we get the response we parse it into a StreamReader

string jsoneBayResponse = string.Empty;
using (StreamReader sr = new StreamReader(webResponse.GetResponseStream()))
{
 jsoneBayResponse = sr.ReadToEnd(); 
}

Now the magic of deserialization of the stream into C# objects happens

FindItemsAdvancedResponse ebayResponse = eBaySerializer.Deserialize(jsoneBayResponse);

If the call was successful, we take each of the objects representing the auction information about a particular vehicle and send it to be geocoded. For the sake of this example, since we are using static data I just setup a dummy geocoder.

if (ebayResponse.Ack == "Success")
{
 eBayItems = ebayResponse.SearchResult[0].ItemArray.Item;
 foreach (item eBayItem in eBayItems)
 {
 geocode(eBayItem);
 }
 return(eBaySerializer.Serialize(eBayItems));
}

After the geocoding is complete, we serialize the data for transfer to the client browser

return(eBaySerializer.Serialize(eBayItems));

Step 3: Displaying data on the map

Now we add a web-form to the application, and add a reference to the VE API as well as our proxy web service

<asp:ScriptManager ID="ScriptManager1" runat="server">
 <Scripts>
 <asp:ScriptReference Path="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2" />
 </Scripts>
 <Services>
 <asp:ServiceReference Path="~/eBayMotorsDemoSvc.asmx" />
 </Services>
</asp:ScriptManager>

We also setup a default instance of a VE map on the page, along with a button that initiates the call to the eBay web-service.

<input id="getData" type="button" value="Display eBay data" onclick="calleBayWS();" />
<div id="myMap" style="position: relative; width: 600px; height: 400px; top: 0px; overflow: hidden" />

On page load we initialize this instance of the map. Note we are using pageLoad() function provided by ASP.NET AJAX to encapsulate our initialization logic.

function pageLoad() {
 if (map == null) {
 map = new VEMap('myMap');
 map.LoadMap(new VELatLong(40, -100), 4);
 }
}

We then tie up the click event for the button to a call to the web-service

function calleBayWS() {
 eBayMotorsDemoSvc.GeteBayMotorsData(calleBaySuccess, onFailed);
}

This service call takes two parameters, the first one is a pointer to the function that will be executed if the web service call was successful, and the 2nd parameter points to a function that is executed on call failure

function calleBaySuccess(e) {
 var eBayData = Sys.Serialization.JavaScriptSerializer.deserialize(e);
 if (eBayData.length > 0) {
 Array.forEach(eBayData, DisplayOnMap);
 }
}

In case the call completes successfully, the call return value is accessible through the parameter e. This parameter is now deserialized using the JavaScriptSerializer in ASP.NET AJAX. This process populates an Array of auction items into eBayData. We now iterate over this array using the Array.forEach provided by the AJAX client library.

As we iterate over each item we create the appropriate title and description for the pushpin and display them on the map. Here we again use the String.format function provided by the AJAX client library to create an appropriately formatted tooltip for our pushpin.

function DisplayOnMap(eBayDataItem) {
 var htmlDescription = "<img src='{0}' width='150'/><br/><b>Bids:</b> {1}<br/><b>Current Price (USD)</b>: {2} <br/><A href='{3}' target='_blank'>Details</a>"

 var title = eBayDataItem.Title;
 var description = String.format(htmlDescription, eBayDataItem.GalleryURL, eBayDataItem.BidCount, eBayDataItem.ConvertedCurrentPrice.Value, eBayDataItem.ViewItemURLForNaturalSearch);
 var lat = eBayDataItem.lat;
 var lng = eBayDataItem.lng;

 var point = new VELatLong(lat, lng);
 var shp = new VEShape(VEShapeType.Pushpin, point);
 shp.SetTitle(title);
 shp.SetDescription(description);
 map.AddShape(shp); 
}

The final application looks like this

Link to the application: http://demoebaymotors.findyourauto.net/

Download Code