使用 javascript 的 Asp.net 内容占位符答案

【问题标题】：Asp.net content place holder using javascript使用 javascript 的 Asp.net 内容占位符
【发布时间】：2012-09-13 15:13:17
【问题描述】：

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

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

我正在尝试实现http://bxslider.com/处显示的图像滑块

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

<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 方面有关。

谁能帮助解决这个问题？

提前致谢。

【问题讨论】：

您确定脚本执行正常吗？
您是否检查过通过查看页面源代码生成的 HTML？正如您所指出的，每隔一段时间，ASP.NET 运行时就会以一种出乎意料的方式生成 html，解决此问题的唯一方法是检查生成并发送到浏览器的结果 html 并查找您不会的东西'不希望看到。
嗯...这是在做什么：<uc4:BSlider ID="slider1" runat="server" />？请注意，asp.net ID 属性将与您在 aspx 文件中的不同。例如，对于 ID="slider1"，它可能类似于 ContentPlaceHolder2_slider1，而这个 $('#slider1') 将找不到它。
Allesandro - 据我所知，它执行正常，我检查了 chrome 和 firefox 上的开发者控制台，它们都检查正常。
FAngel - 该代码将控件 (bslider.ascx) 放置在页面中。至于查看页面源代码，它似乎与我向您展示的代码没有变化

标签： c# javascript asp.net contentplaceholder bxslider

【解决方案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>

因为没有意识到这是一个冲突问题而自责。我希望这可以帮助其他陷入与我类似情况的人。

【讨论】：

【解决方案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>

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

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

    </asp:contentplaceholder>
</div>

【讨论】：

恐怕什么都没做:(
理解它就像你将 uc3:header 移到内容占位符之外之后，没有任何改变。比 - 正如我在评论中问自己的问题：浏览器下载的那些文件（请参阅 chrome 中开发人员控制台的网络选项卡）。另外 - 尝试直接在控制台中运行 $('#slider1').bxSlider(); 并查看打印出来的内容。
如果我在控制台中运行，它会出现 TypeError: Object [object Object] has no method 'bxSlider'。所以我说它找不到对象是对的吗？是的，这两个文件都是由浏览器下载的。
Welll... bxSlider 文件未下载（或下载不正确）。这就是那个类型错误的意思。
奇怪，因为文件路径绝对正确。奇怪的是它允许我做简单的 jQuery 东西，比如悬停