Conditionally show image in a repeater if the database is not null - asp.net

Question

I have a repeater that includes as image. However, there is an image that may not be in all of the Promotions in this repeater
<div class="promo">
<h2><%# ((Promotion)Container.DataItem).Title %></h2>
<p><img src="/Uploads/<%# ((Promotion)Container.DataItem).Image %>" alt="" class="promoImg" /><%# ((Promotion)Container.DataItem).Description %></p>
<p><em><%# ((Promotion)Container.DataItem).Restrictions %></em></p>
</div>
Can someone show me how to make the only show up if that entry does not have a null field?

Answer 1

I prefer do something in server side, so, my sugestion is:
Add a event handler to your repeater
<asp:Repeater ID="myRpt" runat="server" onitemdatabound="myRpt_ItemDataBound" >
<ItemTemplate>
<div class="promo">
<h2>
<%# ((Promotion)Container.DataItem).Title %></h2>
<p>
<asp:Image ID="imgTest" CssClass="promoImg" ImageUrl="" runat="server" />
<%# ((Promotion)Container.DataItem).Description %></p>
<p>
<em>
<%# ((Promotion)Container.DataItem).Restrictions %>
</em>
</p>
</div>
</ItemTemplate>
</asp:Repeater>
i will "bind" the image source in code behind, you could do it for other controls too.
So, the code behind is:
protected void myRpt_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
Image imgTest = (Image)e.Item.FindControl("imgTest");
Promotion pActual = (Promotion)e.Item.DataItem;
bool needToShowImage = !String.IsNullOrEmpty(pActual.Image)
if (needToShowImage)
{
imgTest.ImageUrl = "Uploads/" + pActual.Image;
}
else
{
imgTest.Visible = false;
}
}
}
It will do the trick. If it dont work, please, let me know.

Answer 2

This should do the trick:
For C#.Net:
<div class="promo">
<h2><%# ((Promotion)Container.DataItem).Title %></h2>
<p><img runat="server" visible='<%# Information.IsDBNull(((Promotion)Container.DataItem).Image) %>' src=""/Uploads/<%# ((Promotion)Container.DataItem).Image.ToString %>" alt="no image found" class="promoImg" /><%# ((Promotion)Container.DataItem).Description %></p>
<p><em><%# ((Promotion)Container.DataItem).Restrictions %></em></p>
</div>

Answer 3

I've added some jquery to check each image on the page to make sure there is a image associated with that promotion:
$(document).ready(function () {
$('.promoImg').each(function (index) {
if ($(this).attr('src') == "/Uploads/") {
$(this).hide();
}
});
});
I'm still interested in a server side solution

Answer 4

I think you can use panel to do this.
<div class="promo">
<h2><%# ((Promotion)Container.DataItem).Title %></h2>
<asp:Panel ID="pnlImage" runat="server">
<p><img src="/Uploads/<%# ((Promotion)Container.DataItem).Image %>" alt="" class="promoImg" /><%# ((Promotion)Container.DataItem).Description %></p>
</asp:Panel>
<p><em><%# ((Promotion)Container.DataItem).Restrictions %></em></p>
In ItemDataBound event, do this
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) {
if (((Promotion)e.Item.DataItem).Image == null) {
((Panel)e.Item.FindControl("pnlImage")).Visible = false;
}
when panel is invisible, it will not be rendered.

Answer 5

why not use the
<% if()%>
to judge either there is a image source? if not ,then didn't response.so we can save more