如何在AJAX UpdatePanel中保持div的高度和宽度

Question

I'm using the library subgurim to work with google maps. How to keep the height and width of GMap1 inside AJAX UpdatePanel when partial PostBack occurs?

Default.aspx:

   <div id="mainContent" style="width: 100%; height: 90%;">           
    <div id="content" style="width: 75%; border-left-style: groove; border-width: 1px;
        overflow: auto; float: left;">            
        <asp:UpdatePanel ID="updtepnl_map" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Timer runat="server" ID="timer1" OnTick="upt_Tick" Enabled="False">
                </asp:Timer>
                <cc1:GMap ID="GMap1" runat="server" Key="AIzaSyDPnaewjFYzDu1acq_NorccJ_VNx_nOgio"
                    Height="100%" Width="100%" Version="3" Language="es" enableServerEvents="true" enableRotation="true"
                    OnClick="GMap1_Click" OnMapLoad="GMap1_MapLoad" OnMoveEnd="GMap1_MoveEnd" OnDragEnd="GMap1_DragEnd" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Bttn_Search" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="Bttn_startRefresh" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="timer1" EventName="Tick" />
                <asp:AsyncPostBackTrigger ControlID="Center_Map" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="CkBxList_ADFSA" />
                <asp:AsyncPostBackTrigger ControlID="CkBx_ADFSA" />
                <asp:AsyncPostBackTrigger ControlID="CkBx_FEMSA" />
                <asp:AsyncPostBackTrigger ControlID="CkBxList_FEMSA" />
                <asp:AsyncPostBackTrigger ControlID="ImgBttn_SearchByS" />
                <asp:AsyncPostBackTrigger ControlID="ImgBttn_SearchByIP" />
            </Triggers>
        </asp:UpdatePanel>                     
    </div>         
    <div id="menu" style="width: 25%; border-style:hidden; border-width: 1px; overflow: auto;">

    </div>
    <div id="footer">
        ADFSA © 2015
    </div>
</div>

This is my javascript code where you assign a width and height to GMap1 in window.onload and window.resize :

var w = window, d = document, e = d.documentElement,
    g = d.getElementsByTagName('body'),
    x = w.innerWidth || w.clientWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight || e.clientHeight || g.clientHeight;

window.onresize = function () {
    var obj3 = document.getElementById('divTop');
    var obj1 = document.getElementById('general'),
        footer = document.getElementById('footer'),
         gmap1 = document.getElementById('GMap1'),
         content= document.getElementById('content');

    y = w.innerHeight || e.clientHeight || g.clientHeight;

    window.content.style.height = y - (obj3.clientHeight + footer.clientHeight) + 'px';
    window.menu.style.height = y - (obj3.clientHeight + footer.clientHeight) + 'px';

    window.GMap1.style.height = content.clientHeight - 20 + 'px';
    window.GMap1.style.width = content.clientWidth - 20 + 'px';
    window.GMap1.style.margin = 10 + 'px';
}

window.onload = function () {
    var obj3 = document.getElementById('divTop');
    var obj1 = document.getElementById('general'),
        footer = document.getElementById('footer'),
         gmap1 = document.getElementById('GMap1'),
         content= document.getElementById('content');

    y = w.innerHeight || e.clientHeight || g.clientHeight;

    window.content.style.height = y - (obj3.clientHeight + footer.clientHeight) + 'px';
    window.menu.style.height = y - (obj3.clientHeight + footer.clientHeight) + 'px';

    window.GMap1.style.height = content.clientHeight - 20 + 'px';
    window.GMap1.style.width = content.clientWidth - 20 + 'px';
    window.GMap1.style.margin = 10 + 'px';
}

Answer 1

There is an existing question here that talks about controls in UpdatePanels losing their subscribed JavaScript functions on Partial PostBacks. I strongly recommend reading through this to understand what is happening here, it's a great read with several different solutions!

The accepted answer from the above link shows you how to rebind events on a Partial Postback in jQuery, which in your case would allow you to set your control width and height again. I'm not sure if you are using jQuery though or just plain JavaScript, but it should at least provide some insight into your problem.

The easiest way to achieve what you are trying to do is start using jQuery if you aren't already. Then you can use the code below to bind your events initally, as well as re-bind them after a partial Postback:

$(document).ready(function() {
    // bind your jQuery events here initially
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
    // re-bind your jQuery events here
});

Hope it helps!