CODEWITHSUNDEEP
javascriptasp.netgoogle-maps
megabytes
megabytes

Reputation: 185

ASP.Net buttons reload entire page

I'm dabbling in some ASP.NET web paging stuff. I'm a noob at this only starting yesterday.

I'm trying to write something basic, having a google map along with several locations that can be dropped via buttons. I'm finding that when I press a button though, the marker drops but then the whole page reloaded and resets the google map window to its original initialized state.

Any suggestions, ideas, direction would be great.

Cheers

my java script

<script type="text/javascript">

    var map;
    var myLatlng = new google.maps.LatLng(-27.4679, 153.0277);
    var googleMapOptions;

    function initialize()
    {
        googleMapOptions =
        {
            center: myLatlng,
            zoom: 15,
            panControl: true,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
            },
            scaleControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map-canvas"), googleMapOptions);
    }

    function addMyMarker()
    {

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP,
            title: "This a new marker!",
            icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
        });
        //alert('addMyMarker');
    }
</script>

my html/asp

<body onLoad="initialize()">
<div id="map-canvas" style="z-index: 1; left: 46px; top: 102px; position: absolute; height: 440px; width: 481px">
    </div>

<form id="form1" runat="server">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="images/WorldNormal.png" OnClick="OnClick" 
        OnMouseOver="src='images/WorldHighlight.png';" OnMouseOut="src='images/WorldNormal.png';" 
        style="z-index: 1; left: 549px; top: 88px; position: absolute; width: 87px; height: 21px" />
</form>
</body>

code behind

protected void OnClick(object sender, EventArgs e)
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "addMyMarker", "addMyMarker();", true);
}

Upvotes: 0

Views: 764

Answers (1)

Dave Zych
Dave Zych

Reputation: 21887

This is called a PostBack and is a huge part of ASP.NET WebForms. You don't need it, though, since your OnClick method only adds some JS to run on the page. You can define the OnClientClick event for the button right on the page and avoid the PostBack. 

<asp:ImageButton OnClientClick="addMyMarker(); return false;" />

(I removed the unimportant attributes on the tag to make my answer cleaner)

Note the return false; at the end - that tells the button to not do a PostBack.

Upvotes: 2

Related Questions