CODEWITHSUNDEEP
jqueryasp.netimagehtml.net-3.5
Zaki
Zaki

Reputation: 5600

add image to div in code behind

Is there any way to add an image that is loaded from db to a div that already exist in aspx file e.g. if I have the following :

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

I cannot use runat=server as my jquery breaks. so I was thinking to somehow find this div and append to it the image.

is this possible, can someone please guide me.

EDIT :

little more info :

So I added a hidden value in aspx file and whenever im loading the page i assign the image in foreach loop.

In my jquery i managed to get the value using 

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

now is there a way to append this to my div above

Upvotes: 1

Views: 2784

Answers (6)

Pankaj
Pankaj

Reputation: 10105

You need DataList. Set your Display Direction and Layout using Datalist control.

HTML Code

<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>

Code Behind

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();
    }
}

Upvotes: -1

Patrick Moore
Patrick Moore

Reputation: 13344

You could do that with jQuery. This adds the <img/> as the last child inside #dp with class red.

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

Here's the full 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>

Code edited to reflect OP's edit.

Upvotes: 2

Chase Florell
Chase Florell

Reputation: 47387

You can do this all with code, and it'll work without javascript.

View

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

CodeBehind

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

Also, if you need to access the div that has runat="server" attached to it with javascript, you will be able to do so by using ClientID

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

Upvotes: 0

Amr Elgarhy
Amr Elgarhy

Reputation: 68932

You jQuery breaks which means the events are not attaching the right way when adding runat="server" because asp.net put a dynamic id instead of the id you put.
If you are using asp.net 4.0 you can solve that by making the ClientIDMode = static and like that the id will keep the same and asp.net will not edit it.

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

Good article about ClientIDMode

Upvotes: 1

udidu
udidu

Reputation: 8588

You can do the following:

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

In your C# code just add your image src to the "myImage" element...

Upvotes: 1

Timothy Aaron
Timothy Aaron

Reputation: 3078

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

Upvotes: 0

Related Questions