Question

我有以下问题：

在按钮上单击我想填充图像源并在ModalPopupExtender中显示图像。为了打开ModalPopupExtender，我调用__doPostBack导致UpdatePanel进行回发并显示其中包含图像的相应视图。

 <script src="jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    window.pageLoad = function () {
        $addHandler($get('btn1'), 'click', function (e) {
            __doPostBack('pbcTest', '');
            // setTimeout("PopulateImage()", 100);
            PopulateImage();
            $find('<%=mpePopup.ClientID%>').show();
            e.preventDefault();
        });
    }

    function PopulateImage() {
        $(".testImage").attr("src", "6.jpg");
    }

</script>

<ajaxtoolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" CombineScripts="false">
    </ajaxtoolkit:ToolkitScriptManager>
    <button id="btn1"> Click</button>
    <asp:LinkButton ID="lbTest" runat="server" Text="show popup" Style="display: none;" />
    <ajaxtoolkit:ModalPopupExtender runat="server" ID="mpePopup" TargetControlID="lbTest"
        PopupControlID="pnlPopup" BackgroundCssClass="modalBackground" CancelControlID="lbClose" />
    <asp:Panel runat="server" ID="pnlPopup" CssClass="modalPopup">
        <asp:LinkButton runat="server" ID="lbClose">Close</asp:LinkButton>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:MultiView runat="server" ID="mvPopup">
                    <asp:View ID="View1" runat="server">
                        <img class="testImage" />
                    </asp:View>
                </asp:MultiView>
                <cs:PostBackControl runat="server" ID="pbcTest" OnCallBack="pbcTest_CallBack" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </asp:Panel>

 protected void pbcTest_CallBack(object sender, CallBackEventArgs e)
    {
        mvPopup.ActiveViewIndex = 0; 
    }

如果在__doPostBack之后我立即拨打PopulateImage()，则图片为空（虽然调用了PopulateImage()并且图片显示了一段时间，但在此消失后，可以看到萤火虫）。

但如果我暂停显示setTimeout("PopulateImage()", 100);图像。

这种行为可能是什么原因？

Answer 1

如果您希望在PopulateImage();完成刷新后始终呼叫UpdatePanel，则应通过注册要在UpdatePanel加载后执行的功能来执行此操作。您可以在加载页面时在javascript中执行以下操作来注册您的功能：

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

我认为您可能遇到同步问题，UpdatePanel代码运行后PopulateImage()刷新正在发生，因此它会替换它。

回发问题后填充图像

1 个答案: