1

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

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

注意：图像出现在 Web 表单中。

这是用户控件：

<%@ 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
4

1 回答 1

0

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

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

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

所以改为：您可以给图像一个类，并通过类选择器（在 JQuery 和 CSS 中）定位图像。这是最简单的方法。

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

于 2013-08-29T08:24:51.417 回答