Question

有没有办法将从db加载的图像添加到aspx文件中已存在的div中，例如如果我有以下内容：

<div id="dp" class="red">
</div>

我不能使用runat = server作为我的jquery中断。所以我想以某种方式找到这个div并将其附加到图像上。

这是可能的，有人可以指导我。

编辑：

更多信息：

所以我在aspx文件中添加了一个隐藏值，每当我加载页面时，我都会在foreach循环中分配图像。

在我的jquery中，我设法使用

获取值

alert($("input[id$=imageval1]").val());

现在有办法将此附加到我上面的div

Answer 1

你可以用jQuery做到这一点。这会将<img/>添加为#dp内的最后一个子类red。

$('<img src="' + $("input[id$=imageval1]").val() + '" width="" height="" alt="" />').appendTo( $("#dp.red") );

以下是完整的JavaScript：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function(){
    $('<img src="' + $("input[id$=imageval1]").val() + '" width="" height="" alt="" />').appendTo( $("#dp.red") );
});
</script>

编辑代码以反映OP的编辑。

Answer 2

您可以执行以下操作：

<div id="dp" class="red">
    <img id="myImage" runat="server" />
</div>

在您的C＃代码中，只需将您的图像src添加到“myImage”元素...

Answer 3

你jQuery中断意味着在添加runat="server"时事件没有以正确的方式附加，因为asp.net放置了一个动态id而不是你输入的id。
如果你使用的是asp.net 4.0，你可以通过制作ClientIDMode = static来解决这个问题，并且id会保持不变，而asp.net也不会编辑它。

<div id="dp" class="red" runat="server" ClientIDMode="static">
</div>

Good article about ClientIDMode

Answer 4

$(document).ready(function(){ $('#dp').append('<img src="insertURLhere" />'); });

Answer 5

您可以使用代码完成所有操作，并且无需javascript即可运行。

查看

<div id="dp" class="red" runat="server"> </div>

<强>代码隐藏

dp.innerHtml = @"<img src=""myimage.png"" />";

此外，如果您需要使用javascript访问附加runat="server"的div，您可以使用ClientID
来访问
var myDiv = '<%=dp.ClientId %>';

Answer 6

您需要 DataList 。设置Display Direction和Layout 使用Datalist控件。

HTML代码

<div id="dp" class="red">
    <asp:DataList ID="DDl" runat="server">
        <ItemTemplate>
            <asp:Image ID="img" runat="server" ImageUrl='<%#Eval("Images") %>' />
        </ItemTemplate>
    </asp:DataList>
</div>

代码背后

using (DataTable DT = new DataTable())
{
    using (DataColumn DC = new DataColumn("Images"))
    {
        DT.Columns.Add(DC);
        DataRow DR = DT.NewRow();
        DR["Images"] = "Chrysanthemum.jpg";
        DT.Rows.Add(DR);

        DR = DT.NewRow();
        DR["Images"] = "Hydrangeas.jpg";
        DT.Rows.Add(DR);

        DR = DT.NewRow();
        DR["Images"] = "Hydrangeas.jpg";
        DT.Rows.Add(DR);

        DDl.DataSource = DT;
        DDl.DataBind();
    }
}

在后面的代码中添加图像到div

6 个答案: