asked on

How to dynamically pass in <item.Id> and <item.ImageUrl> in an Image Tag

Hi,

I'm finding it difficult to pass in the id and the imageUrl values from a database into an image tag, as shown below

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<RetailUploader.Website.Models.ViewModels.Images>>" %>
<p class="CreateButtonStyle">
<%= Html.ActionLink("Create New", "Create", null, new { @class = "createImage", title = "Create Image" })%>
</p>
<table>
<tr>
<th>
card Image
</th>
</tr>
<% foreach (var item in Model)
{ %>
<tr>
<td>
<img src="~/Uploads/" + <%: item.Id %> + "/" + <%: item.ImageUrl %> + "") alt="" />
</td>
</tr>
<% } %>
</table>

When the page renders, nothing displays apart from the table.

Is this the best way to render an image from a database?

Thanks,
Nick

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

nickward26

ASKER

Hi,

Thanks for your help, I have been able to successfully get the ImageUrl to render on the page, using the below code:

Controller;
public ActionResult WebBackground(int id = 3)
{
return PartialView("WebBackground", db.ImagesCollection.Find(id));
}

User Control (Partial)

WebBackground.cshtml

@model MvcMusicStore.Models.ViewModels.Images
@Url.Content("~/Content/media/" + Model.Id + "/" + Model.Image + "")

View
<style type="text/css">
.header { background: url(@Html.Action("WebBackground")) repeat 0 0;}
</style>

This seems to work, there maybe better ways to tackle this problem, but this solution allows me to easily render a ImageUrl from the database and store the image files locally on the web server.

Thanks,

Nick

How to dynamically pass in &lt;item.Id&gt; and &lt;item.ImageUrl&gt; in an Image Tag

How to dynamically pass in <item.Id> and <item.ImageUrl> in an Image Tag