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