javascript - UpdatePanel 触发时图像不显示

Question

我目前正在使用 ASP.NET 和 C# 开发一个网站。在这个网站上，我展示了 2 组图像横幅，第一个是用我的 C# 代码填充的，并且保持静止(不会改变)。

 <div class="divArticleCar">

    <div id="OwlDemo" class="owl-carousel owl-theme" style="padding:25px;" runat="server">
    </div>

    <div class="customNavigation ">
        <a class="btn prev "><span class="glyphicon glyphicon-menu-left"></span><br/></a>
        <a class="btn next "><span class="glyphicon glyphicon-menu-right"></span><br/></a>

    </div>
</div>

第二个使用从图像数据库到外部 API 的连接。我有一个文本输入和一个按钮，因此当用户搜索关键字时，第二个横幅会更新为新图像。我正在使用 AJAX <asp:UpdatePanel>标记以更新图像结果。

<asp:UpdatePanel runat="server" id="UpdatePanel2" updatemode="Conditional">
  <Triggers>
    <asp:AsyncPostBackTrigger controlid="btnSearchImage" EventName="ServerClick" />
  </Triggers>
  <ContentTemplate>
    <div class="divArticleCar">
      <div id="OwlDemo2" class="owl-carousel owl-theme" style="padding:25px;" runat="server">
      </div>
    <div class="customNavigation CN2">
          <a class="btn prev2 ">
              <span class="glyphicon glyphicon-menu-left"></span>  <br>
            </a>
            <a class="btn next2 ">
                <span class="glyphicon glyphicon-menu-right"></span> <br>
            </a>
      </div>
    </div>
  </ContentTemplate>
</asp:UpdatePanel>

问题是更新 ContentTemplate 中的图像时。它们只是没有显示，横幅消失了。我已经检查了我的后台代码，C# 正在获取 API 结果并正在添加新图像，它们只是不可见。横幅由 2 个 Javascript 文件管理。

第一个:carrusel.js

第二个:owlCarousel.js

有人知道为什么图像消失了吗？

Answer 1

当您使用 UpdatePanel 时，页面加载完成时调用的每个 javascript 函数都需要再次触发。

假设您在某个地方有类似这样的东西来构建轮播:

$(document).ready(function () {
    buildCarousel();
});

您需要添加一些代码以确保 buildCarousel() 在部分回发后再次触发。

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

prm.add_endRequest(function () {
    buildCarousel();
});