добавить изображение в div в коде позади

Question

Есть ли способ добавить изображение, загруженное из базы данных в div, который уже существует в файле aspx, например, если у меня есть следующее:

<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

Вы прерываете jQuery, что означает, что при добавлении runat="server" события неправильно присоединяются, потому что asp.net ставит динамический идентификатор вместо идентификатора, который вы указали.
Если вы используете asp.net 4.0, вы можете решить эту проблему, сделав ClientIDMode = static, и таким образом идентификатор останется прежним, а asp.net не отредактирует его.

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

Хорошая статья о ClientIDMode

Answer 3

Вы можете сделать следующее:

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

В вашем коде C # просто добавьте изображение src к элементу "myImage" ...

Answer 4

Вам нужно 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();
    }
}

Answer 5

Вы можете сделать все это с помощью кода, и он будет работать без JavaScript.

View

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

CodeBehind

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

Кроме того, если вам нужен доступ к div, к которому runat="server" прикреплен с помощью javascript, вы сможете сделать это, используя ClientID

var myDiv = '<%=dp.ClientId %>';

Answer 6

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