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

Question

我正在使用圖書館subgurim來處理Google地圖。 發生部分PostBack時， GMap1在AJAX UpdatePanel保持GMap1的高度和寬度？

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>

這是我的JavaScript代碼 ，在window.onload和window.resize為GMap1分配寬度和高度：

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

這里有一個現有的問題，它討論UpdatePanels中的控件在部分回發中丟失其已訂閱的JavaScript函數。 我強烈建議您通讀此書，以了解此處發生的情況，這是一本不錯的書，提供了幾種不同的解決方案！

上面的鏈接接受的答案顯示了如何在jQuery中的部分回發中重新綁定事件，在您的情況下，這將允許您再次設置控件的寬度和高度。 我不確定您是使用jQuery還是純JavaScript，但是它至少應該提供一些有關您的問題的見解。

實現尚未實現的最簡單方法是開始使用jQuery（如果尚未使用的話）。 然后，您可以使用下面的代碼初始化綁定事件，並在部分回發后重新綁定它們：

$(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
});

希望能幫助到你！