ASP MVC 5 Image Display

user_8189236 0
Viewed 3047

In my Visual studio project, i have a folder where i am storing an Image. The path to this image is stored in the SQL Server DB and im trying to display this image in the view. From the research i have done so far, a HTML helper needs to be created, which i had a go at. How can i pass the path to the helper so that it renders in my view, under content display?

View

@Html.DisplayFor(modelItem => item.contentDisplay)

Helper

public static class CustomHtmlHelper
{
public static IHtmlString Image(this HtmlHelper helper, string src)
    {
        TagBuilder tb = new TagBuilder("img");
        tb.Attributes.Add("src", VirtualPathUtility.ToAbsolute(src));
        return new MvcHtmlString(tb.ToString(TagRenderMode.SelfClosing));
    }
}

Controller

private dbmb17adtEntities db = new dbmb17adtEntities();

    // GET: tbl_Post2



    public ActionResult Index()
    {
        var tbl_Post = db.tbl_Post.Include(t => t.tbl_User);
        return View(tbl_Post);

Model

public partial class tbl_Post
{
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
    public tbl_Post()
    {
        this.tbl_Comment = new HashSet<tbl_Comment>();
        this.tbl_Tag = new HashSet<tbl_Tag>();
    }

    public int Id { get; set; }
    public string title { get; set; }
    public string content { get; set; }
    public string contentDisplay { get; set; }
    public string tags { get; set; }
    public Nullable<System.DateTime> createTime { get; set; }
    public Nullable<System.DateTime> updateTime { get; set; }
    public Nullable<int> commentCount { get; set; }
    public int authorId { get; set; }
    public Nullable<int> likeCount { get; set; }

How can i use the helper (if it is indeed correct) in my view?

asp.net-mvc image
4 Answers

You could try

@foreach (var items in tbl_Post)
{
  <img src="@Url.Content(items.contentDisplay)" alt="" />
}
user_37934480

I am using HttpPostedFileBase to post the file from view to controller action. In the view don't forget enctype = "multipart/form-data" to the form you are using.

 [HttpPost]
            public async Task<ActionResult> AddImage(HttpPostedFileBase postedFile)
            {

                    string path = Server.MapPath("~/Content/Images/");

                    if (!Directory.Exists(path))
                    {
                        Directory.CreateDirectory(path);
                    }
                    postedFile.SaveAs(path + Path.GetFileName(postedFile.FileName));

    //myVm.Path = path + Path.GetFileName(postedFile.FileName);
    //this is how you can save the virtual path in your property
                return RedirectToAction("Index");
            }

and this is how i display it in the view

 <img src="@Url.Content("~/Content/Images/" + @Path.GetFileName(item.Path))" />
user_66835330

It looks like you might actually be able to do this:

@Html.Image(item.contentDisplay)

What you defined is an extension method, so you can use it as you normally would use HtmlHelper methods.

Your initial shot at DisplayFor is for a different scenario, specifically when you defined a custom template view for a particular model class you have, and you want MVC to identify and use that based on the model class.

user_7287950 
@foreach (var item in db.tblStudents)
{
    <tr>
    <td><img src="~/images/@item.ImageUrl" width="100" height="100" /></td>
        <td>@item.FirstName</td>
        <td>@item.LastName</td>
    </tr>
}
user_125910320
Related