jquery - 在占位符中动态创建的用户控件中的 Css 和 js 文件引用

Question

我创建了一个只有一张图片的用户控件。我在 Web 表单中使用占位符动态创建用户控件。

在用户控件中我添加了CSS和js文件的引用，但是在图片下没有影响。

注意:图像显示在网络表单中。

这是用户控件:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="IVT_DisplayImage.ascx.cs" Inherits="Sublayout_IVT_DisplayImage" %>

<link href="~/css/demo.css" rel="stylesheet" type="text/css" />
<link href="~/css/imagezoom/imagezoom.css" rel="stylesheet" type="text/css"
/>
<script src="~/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="~/js/jquery.imagezoom.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#imgIdCard').ImageZoom();
    });
</script>
<div class="page">
    <div class="box cf">
        <div class="left"> <span class="demowrap">
                        <asp:Image ID="imgIdCard" runat="server" />
                    </span>

        </div>
    </div>
</div>

这是网络表单:

<div>
    <asp:placeholder ID="plhDisplayImage" runat="server"></asp:placeholder>
</div>

这是网页表单的隐藏代码:

Sublayout_IVT_DisplayImage ivtDisplayImage = new Sublayout_IVT_DisplayImage();


protected void Page_Load(object sender, EventArgs e) {
    ivtDisplayImage = (Sublayout_IVT_DisplayImage) LoadControl("~/Sublayout/IVT_DisplayImage.ascx");
    ivtDisplayImage.ImageURL = "~/demo_assets/large/1.jpg";
    plhDisplayImage.Controls.Add(ivtDisplayImage);
}

这是文件夹的结构:

css/
    demo.css
css/imagezoom/  
    imagezoom.css
js/
    jquery-1.8.3.min.js
    jquery.imagezoom.min.js
Sublayout/
    IVT_DisplayImage.ascx
Root:
    Default.aspx

Answer 1

我认为这是一个路径问题， 尝试从用户控件的路径中删除 ~ 。 编辑:尝试将 ~ 替换为 ..

编辑: 我看到您通过 ID 定位图像，但这是一个 runat="server" 控件。因此它将使用不同的 ID 呈现(您可以在 HTML 中看到)。

要通过 ID 定位图像(在 JQuery 中)，您必须解析客户端 ID(您可以找到很多关于如何执行此操作的主题)，但您无法在 CSS 中执行此操作。

因此:您可以给图像一个类，并通过类选择器(在 JQuery 和 CSS 中)定位图像。这是最简单的方法。

最终解决方案(来自所有者的回应) 我在 Web 表单中添加了引用并将其删除到用户控件并且效果很好。感谢您的支持，但确实，ID 是一个问题。