在占位符中动态创建的用户控件中的 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 是个问题。