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

admin — Tue, 01 Jul 2008 14:15:00 GMT

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>

ASP.NET Podcast : Podcast, back

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