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

Published Wednesday, July 2, 2008 2:49 PM

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

Original Url: http://aspnetpodcast.com/CS11/blogs/asp.net_podcast/archive/2008/07/01/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.aspx

Subscribe to WMV format.

Subscribe to M4V for iPod Users.

Subscribe to MP3 (Audio only).

Download WMV.

Download M4V for iPod Users.

Download MP3 (Audio only).

Download PPT associated file.

Show Notes:

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>

Comments

# Florin said on Saturday, July 5, 2008 10:49 AM

Can you post a demo link please. For me it's not working. Thank you!

# Bert & Ernie said on Sunday, July 20, 2008 8:19 PM

Youre my hero glav! *swoon* I've been wanting AJAX history support out of the box for a while. Getting nasty little popups was annoying.

Leave a Comment

(required) 
(required) 
(optional)
(required) 

This Blog

Syndication