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
Wally has put out another podcast following his series around some of the latest AJAX features in .Net 3.5 SP1. In this installment, he looks at the history (back button) support.
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>