The Web.Maps.VE v2.0 ASP.NET AJAX Virtual Earth Mapping Control allows you to perform all you Map manipulations (moving the map, adding shape, loading driving directions, etc.) from within server-side .NET code. This is all fine when handling the Map’s own events, but what about using Buttons and Hyperlinks to perform manipulations? This tutorial will show you how to utilize the ASP.NET UpdatePanel control to be able to manipulate the Map during Server Control Events (such as OnClick).

Prerequisites

This tutorial assumes that you already have a basic understanding of how to place a Map on a Page within your ASP.NET Website or Web Application Project.

If you need to get an overview of how to place a Map on the Page, then I recommend you go check out the “Getting Started with Web.Maps.VE v2.0” tutorial.

Add Pushpin to the Map when user clicks on an ASP.NET Button or LinkButton Control

Once you have a Map control place on the page, you can then create an ASP.NET Button or LinkButton control and manipulate the Map during its OnClick Event. You can perform many different Map manipulations, including (but definitely not limited to) Adding Pushpins, Zooming In and Loading Driving Directions.

You would define an ASP.NET Button like this:

<asp:Button runat="server" ID="Button1"
    Text="Do Something" OnClick="Button1_Click" />

And, you would manipulate the Map during the Buttons OnClick event like this:

protected void Button1_Click(object sender, EventArgs e)
{
    // Zoom In
    Map1.Zoom++;

    // Change to Hybrid Map Style
    Map1.MapStyle = MapStyle.Hybrid;

    // Add Pushpin
    Map1.AddShape(new Shape(Map1.LatLong));
}

If you run the above example, you’ll notice that every time the user clicks the ASP.NET Button control the entire Page reloads and the Map is completely redrawn. Next we will link up the Buttons OnClick event to an ASP.NET UpdatePanel to cause it to manipulate the Map using an Asynchronous Postback without reloading the entire Page.

Manipulate the Map without reloading the Page

Now that we’re manipulating the Map during the OnClick event of an ASP.NET Button Control, it sure would be nice if we could manipulate the Map without reloading the entire Page and loosing all the current state of the Map (position, zoom level, currently plotted Shapes). This is where the ASP.NET UpdatePanel control comes in.

All we need to do is add an ASP.NET UpdatePanel control to the Page and add an AsyncPostBackTrigger for the Button Control’s Click Event. Also, since we aren’t using the UpdatePanel to update any visible html content, we will just leave it’s ContentTemplate “blank.”

To do this, just add the following code to the .aspx page that contains the Button control we created above:

<asp:UpdatePanel runat="server" ID="up1">
    <ContentTemplate></ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger
            ControlID="Button1"
            EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

Now the Buttons Click event will be raised using an Asynchronous Postback, and any Map manipulations we perform within the Event Handler will be passed down to the Client and implemented on Map already being displayed to the user.

Why leave the UpdatePanel’s ContentTemplate “blank”?

The reason we leave the ASP.NET UpdatePanel’s ContentTemplate “blank” in the above example is because we don’t want it to update any of the Page’s content.

But we do want it to update the Map on the Page, don’t we? Yes, that is correct. Except this UpdatePanel with the “blank” ContentTemplate isn’t actually the one that’s updating the Map. The Map updates are actually performed by a “hidden” UpdatePanel that is part of the Map control itself. This is described below.

How does the UpdatePanel do this?

The Web.Maps.VE v2.0 Map control actually contains a “hidden” ASP.NET UpdatePanel control that it adds to the Page behind the scenes. This “hidden” UpdatePanel is caused to reload when ever any other UpdatePanel on the Page generates an Asynchronous Postback.

The “hidden” UpdatePanel also passes the current Map state (zoom level, center location, map style, map mode, currently plotted shapes, etc.) back up to the server every time other UpdatePanels on the Page generate Asynchronous Postbacks.

This automatic communication via the “hidden” UpdatePanel is what allows the Map control to automatically transfer it’s state back and forth between the client and server as needed, and is what enables this rich ajax functionality to work.

Can I place Content/Controls within the UpdatePanel’s ContentTemplate

Yes, of course. If you have any content (other than the Map) that you want to update on Asynchronous Postbacks you can definitely place that content within the UpdatePanel’s ContentTemplate.

For example you could display the Maps current Center Location on the Page by placing an ASP.NET Labal control within the ContentTemplate and setting it’s Text within the Button’s Click Event Handler.

To do this, just add the following line to the Button’s Click Event Handler:

lblCenterLocation.Text = Map1.LatLong.ToString();

And, add an ASP.NET Label control to the UpdatePanel’s ContentTemplate:

<asp:UpdatePanel runat="server" ID="up1">
    <ContentTemplate>
        <asp:Label runat="server"
            ID="lblCenterLocation">
        </asp:Label>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger
            ControlID="Button1"
            EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

Some Tips on using the UpdatePanel Control

Here are a few things to note/remember when using ASP.NET UpdatePanel controls on the Page along with the Web.Maps.VE v2.0 Map control:

• Do not place the Map control within an UpdatePanel! It will cause the control to not function properly, and is not supported.
• If you have multiple Button, LinkButton or other server controls that will be raising Asynchronous Postbacks to Update the Map, then you’ll want to use only a single UpdatePanel with a “blank” ContentTemplate and add all the necessary AsyncPostBackTriggers to it.
• If you aren’t updating the Button, LinkButton or other Server Control that is firing the Asynchronous Postback, then don’t place it within the UpdatePanel’s ContentTemplate. This would just generate extra overhead and could affect the overall performance of the Page.

If you want to read some more Tips and Tricks on using the UpdatePanel control in general, then I recommend you read the “UpdatePanel Tips and Tricks” article by Jeff Prosise on MSDN. You may also be interested in the “Some ASP.NET AJAX Tips and Tricks” article I wrote a while back.

Conclusion

As you can see it’s fairly simple and straight forward to update the Map during an Asynchronous Postback. And, it can be done from any Server Control’s Event that can be wired up to an UpdatePanel using an AsyncPostBackTrigger.