当UpdatePanel触发时图片不显示

Question

当UpdatePanel触发时图片不显示

3

我目前正在使用ASP.NET和C#开发一个网站。在这个网站上，我展示了两组图片横幅广告，第一组是由我的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结果并添加了新的图片，但它们只是不可见。这些横幅由两个JavaScript文件管理。

第一个：carrusel.js

第二个：owlCarousel.js

有人知道为什么图片会消失吗？

- Alejandro Flores

无论你使用的是哪种技术栈，你仍然需要输出 HTML + CSS + JS。如果你能提供一个 [mcve] 来描述你的问题，我们就可以告诉你是哪个 CSS 规则或 JavaScript 函数决定了你元素的当前状态，你可以追踪到它的源头并修复它，或者你可以强制执行更强的规则来正确显示你的元素。在你的浏览器控制台中有什么有趣的信息吗？ - tao

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- VDWWD · Answer 1

每个在页面加载完成时调用的JavaScript函数需要在使用UpdatePanel时再次触发。

比如说，你在某个地方有这样一个东西来构建轮播图：

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

你需要添加一些代码来确保在部分异步回传后触发 buildCarousel() 函数。

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

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