Question

我创建了一个只有一个图像的用户控件。而且我正在使用网页表单中的占位符创建用户控件。

在用户控件中，我添加了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中执行此操作。 / p>
所以相反：你可以给图像一个类，并通过类选择器（在JQuery和CSS中）定位图像。这是最简单的方法。

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

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

1 个答案: