只有一个由 JavaScript 触发的 UpdatePanel 更新了内容

Question

我有两个在 javascript 中触发的更新面板。运行代码后，只有第二个 Panel 的内容会更新。这是我的代码。

    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                            <div style="display: normal">
                                <asp:Button ID="PaperContent_Button1" runat="server" Text="Update box Panel" OnClick="LoadPaperData" />
                            </div>
                            <div class="ibox-content_v2" style="height: 150px;">                                    
                                <div style="display: inline; height: 100px; float: right; max-width: 70%; min-width: 165px; width: 70%">

                                    <asp:Label ID="uiBox1Value" runat="server" Style="font-size: 30px; font-weight: 600; color: #002467" />
                                    <asp:Label ID="uiBox1Unit" runat="server" Style="font-size: 13px; font-weight: 600; color: #002467" />

                                </div>
                                <div id="uiBox1TargetPanel" runat="server" onmouseover="document.getElementById('ContentPlaceHolder1_uiBox1Popup').style.visibility = 'visible';" onmouseout="document.getElementById('ContentPlaceHolder1_uiBox1Popup').style.visibility = 'hidden';">                                        
                                    <div id="uiBox1Popup" runat="server" style="float: left; position: relative; top: -50px; visibility: hidden; width: 100%; height: 40px; text-align: center; border-width: 1px; border-style: solid; border-color: #D2D9E3; background-color: #F2F3F6; font-size: 13px; font-weight: 600; padding-top: 10px;">
                                        <asp:Label ID="uiBox1TargetLabel" runat="server" />: 
                                        <asp:Image ID="uiBox1TargetUpOrDownImage" runat="server" Width="6" Height="9" Style="margin-right: 5px; margin-bottom: 4px;" ImageUrl="images/ico_arrow_xs_r_up.png" />
                                        <asp:Label ID="uiBox1TargetValue" runat="server" />%
                                    </div>
                                </div>
                            </div>
                        </ContentTemplate>
                    </asp:UpdatePanel>


                    <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                            <div style="display: normal">
                                <asp:Button ID="WaterContent_Button1" runat="server" Text="Update box Panel" OnClick="LoadWaterData" />
                            </div>
                            <div class="ibox-content_v2" style="height: 150px;">

                                <div style="display: inline; height: 100px; float: right; max-width: 70%; min-width: 165px; width: 70%">
                                    <asp:Label ID="uiBox2Value" runat="server" Style="font-size: 30px; font-weight: 600; color: #002467" />
                                    <asp:Label ID="uiBox2Unit" runat="server" Style="font-size: 13px; font-weight: 600; color: #002467" />                                    
                                </div>
                                <div id="uiBox2TargetPanel" runat="server" onmouseover="document.getElementById('ContentPlaceHolder1_uiBox2Popup').style.visibility = 'visible';" onmouseout="document.getElementById('ContentPlaceHolder1_uiBox2Popup').style.visibility = 'hidden';">                                        
                                    <div id="uiBox2Popup" runat="server" style="float: left; position: relative; top: -50px; visibility: hidden; width: 100%; height: 40px; text-align: center; border-width: 1px; border-style: solid; border-color: #D2D9E3; background-color: #F2F3F6; font-size: 13px; font-weight: 600; padding-top: 10px;">
                                        <asp:Label ID="uiBox2TargetLabel" runat="server" />: 
                                        <asp:Image ID="uiBox2TargetUpOrDownImage" runat="server" Width="6" Height="9" Style="margin-right: 5px; margin-bottom: 4px;" ImageUrl="images/ico_arrow_xs_r_up.png" />
                                        <asp:Label ID="uiBox2TargetValue" runat="server" />%
                                    </div>
                                </div>
                            </div>
                        </ContentTemplate>
                    </asp:UpdatePanel>

我使用javascript触发了后面的代码，但是，运行代码后，只更新了第二个。

<script>
    $(document).ready(function () {
        $("#ContentPlaceHolder1_PaperContent_Button1").click();
        $("#ContentPlaceHolder1_WaterContent_Button1").click();
    });
</script>

但我希望更新两个 UpdatePanel。我该怎么做才能同时更新两个更新面板？

Answer 1

如果可以，请更改第二个面板的UpdateMode：

UpdateMode="Always"

然后删除 javascript 中的第二个.click()。当第一个面板更新时（发生回发时），第二个面板应该更新。

如果您不能使用Always，您可以将OnLoad 事件添加到第二个面板并将您拥有的任何代码移动到该事件。当回发发生时，第二个面板将始终重新加载并且代码将触发。

Hth.