Question

我有一个令人烦恼的问题，涉及javascript / jquery和asp：ContentPlaceHolders，我似乎无法解决，而且我一整天都在尝试。

我有一个带有C＃的ASP.NET网站。首页 - Default.aspx，有一个母版页 - MasterPage.master。我也有一个控件 - bslider.ascx

中显示的图像滑块

我的控件中的代码如下所示

<script src="../scripts/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.bxSlider.min.js" type="text/javascript">
    $(document).ready(function () {
        $('#slider1').bxSlider();
    });    
</script>

<div id="slider1">
    <div>Slide one content</div>
    <div>Slide two content</div>
    <div>Slide three content</div>
    <div>And so on...</div>
</div>

Default.aspx中的相关代码如下：

<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
    <div class="sliderContainer">
        <uc4:BSlider ID="slider1" runat="server" />  
    </div>
</asp:Content>

MasterPage.master中的相关代码如下：

<body>
<form id="form1" runat="server">
    <div id="ContentContainer">
        <asp:contentplaceholder id="ContentPlaceHolder2" runat="server">
            <uc3:headerLeft ID="Header2" runat="server" /> 
        </asp:contentplaceholder>
    </div>
</form>
</body>

然而，这不起作用，它显示内部div的内容，但一个接一个。我已经在一个标准的.html网页上对它进行了测试，但是它必须与ASP.NET方面有关。

任何人都可以帮忙解决这个问题吗？

提前致谢。

Answer 1

我已经解决了这个问题！这是JQuery库和BxSlider库之间的冲突。

使用以下代码修复：

<script src="../scripts/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    jQuery.noConflict();
    $('#slider1').bxSlider();
});    
</script>

踢自己没有意识到这是一个冲突问题。我希望这可以帮助其他人遇到类似情况。

Answer 2

我想那个

<script src="../scripts/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.bxSlider.min.js" type="text/javascript">
    $(document).ready(function () {
        $('#slider1').bxSlider();
    });    
</script>

实际上位于<uc3:headerLeft ID="Header2" runat="server" />，如果是，您只是在页面上没有打印脚本。

<body>
<form id="form1" runat="server">
    <div id="ContentContainer">
        <asp:contentplaceholder id="ContentPlaceHolder2" runat="server">
            <uc3:headerLeft ID="Header2" runat="server" /> 
        </asp:contentplaceholder>
    </div>
</form>
</body>

在上面的代码（来自母版页）中，您定义了默认内容。只有在当前执行的页面中否 <asp:Content ContentPlaceHolderID="ContentPlaceHolder2"时才会打印。尝试简单地将headerLeft移到contentplaceholder之外：

<div id="ContentContainer">
    <uc3:headerLeft ID="Header2" runat="server" /> 
    <asp:contentplaceholder id="ContentPlaceHolder2" runat="server">

    </asp:contentplaceholder>
</div>

Asp.net内容持有者使用javascript

2 个答案: