ASP.NET Podcast Show #119 - Using the History (Back) Functionality with the ASP.NET AJAX Web Services in .NET 3.5 Service Pack 1 Beta 1
Subscribe to M4V for iPod Users.
Subscribe to MP3 (Audio only).
Show Notes:
- This show is an extension of Show #110 on ASP.NET AJAX and Live Maps.
- Back and forward are now enabled.
- Data stored on the url.
- Upcoming Community Events:
- GiveCamp in Ann Arbor, MI. http://www.annarborgivecamp.org. Check for Satellite events.
- CodeStock in Knoxville on August 9. http://www.codestock.org.
- devLink in Nashville on August 22-23. http://www.devlink.net.
- INETA Silverlight Challenge.. http://www.ineta.org/silverlight.
Source Code:
<asp:ScriptManager ID="sm" runat="server"EnableHistory="true"
EnableSecureHistoryState="true" >
<Services>
<asp:ServiceReference Path="~/GetMaps.asmx" />
</Services>
</asp:ScriptManager>
<script language="javascript" type="text/javascript">
var Map;
var userNavigated = false;
function pageLoad() {
Sys.Application.add_navigate(onNavigate);
GetMaps.MapData(SetupMap);
}
function onNavigate(sender, e) {
if (userNavigated) {
restorePage(e.get_state());
}
}
function restorePage(PageState) {
var UpperLeftLat = new Number(PageState.UpperLeftLat);
var UpperLeftLon = new Number(PageState.UpperLeftLon);
var BottomRightLat = new Number(PageState.LowerRightLat);
var BottomRightLon = new Number(PageState.LowerRightLon);
var ZoomLevel = new Number(PageState.ZoomLevel);
var Lat = (UpperLeftLat + BottomRightLat ) / 2;
var Lon = (UpperLeftLon + BottomRightLon) / 2;
if (!(isNaN(Lat) || isNaN(Lon))) {
Map.LoadMap(new VELatLong(Lat, Lon), ZoomLevel, 'h', false);
GetMaps.GetPointData(10, UpperLeftLat, UpperLeftLon,
BottomRightLat, BottomRightLon, GetDataSuccess);
}
}
function SetupMap(result) {
var Lat = result.Center.Lat;
var Lon = result.Center.Lon;
var ZoomLevel = result.ZoomLevel;
var MapView, TopLeft, BottomRight;
try {
Map = new VEMap('MapDiv');
Map.LoadMap(new VELatLong(Lat, Lon), ZoomLevel, 'h', false);
MapView = Map.GetMapView();
TopLeft = MapView.TopLeftLatLong;
BottomRight = MapView.BottomRightLatLong;
//TopleftLatLong and BottomRightLatLong return a VELatLong object.
Map.AttachEvent("onchangeview", MapChangedView);
SetupHistory();
GetMaps.GetPointData(10, TopLeft.Latitude, TopLeft.Longitude,
BottomRight.Latitude, BottomRight.Longitude, GetDataSuccess);
}
catch (e) {
alert("Error: " + e);
}
}
function GetDataSuccess(result) {
var i = 0;
var Lat, Lon;
for (i = 0; i < result.length; i++) {
Lat = result[i].Location.Lat;
Lon = result[i].Location.Lon;
var shape = new VEShape(VEShapeType.Pushpin, new VELatLong(Lat, Lon));
shape.SetTitle("Title: " + i);
shape.SetDescription(result[i].Description);
Map.AddShape(shape);
}
}
function SetupHistory() {
var PageTitle;
var now = new Date();
var CurrentTime = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
PageTitle = "AJAX History Test Time:" + CurrentTime;
MapView = Map.GetMapView();
TopLeft = MapView.TopLeftLatLong;
BottomRight = MapView.BottomRightLatLong;
ZoomLevel = Map.GetZoomLevel();
var PageState =
{
"UpperLeftLat": TopLeft.Latitude,
"UpperLeftLon": TopLeft.Longitude,
"LowerRightLat": BottomRight.Latitude,
"LowerRightLon": BottomRight.Longitude,
"ZoomLevel": ZoomLevel
}
userNavigated = false;
Sys.Application.addHistoryPoint(PageState, PageTitle);
userNavigated = true;
}
function MapChangedView(e) {
Map.DeleteAllShapes();
MapView = Map.GetMapView();
TopLeft = MapView.TopLeftLatLong;
BottomRight = MapView.BottomRightLatLong;
SetupHistory();
GetMaps.GetPointData(10, TopLeft.Latitude, TopLeft.Longitude,
BottomRight.Latitude, BottomRight.Longitude, GetDataSuccess);
}
</script>
<div id="MapDiv" style="position:relative; width:450px; height: 350px;" ></div>