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

Question

我正在使用图书馆 subgurim 来处理谷歌地图。 AJAX UpdatePanel发生部分PostBack时，如何保持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

有一个现有的问题here 谈到 UpdatePanels 中的控件在 Partial PostBacks 上丢失了订阅的 JavaScript 函数。我强烈建议通读这篇文章以了解这里发生了什么，这是一本很好的阅读材料，有多种不同的解决方案！

上述链接中接受的答案向您展示了如何在 jQuery 中重新绑定 Partial Postback 上的事件，在您的情况下，这将允许您再次设置控件的宽度和高度。我不确定您是使用 jQuery 还是仅使用纯 JavaScript，但它至少应该为您的问题提供一些见解。

实现您想要做的最简单的方法是start using 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
});

希望对你有帮助！