mvc 4 razor uploaded image view

Question

I can upload image files using mvc 4 razor. Now I want to show/view those images. I am using images for products. So, I want to show images for particular product. How can I show images related to that product?

Here is my Model:

namespace Online_Shopping_Management.Models
{
  public class Product
  {
    [Key]
    public int ProductId { set; get; }
    public int? CategoryId { set; get; }
    public virtual Category Category { set; get; }
    public int? SubCategoryId { set; get; }
    public virtual SubCategory SubCategory { set; get; }
    public int? ModelId { set; get; }
    public virtual Model Model { set; get; }
    
    public IEnumerable<HttpPostedFileBase> Files { get; set; }
  }
}

Here is my controller part:

 public ActionResult Create(Product product)
    {
        foreach (var file in product.Files)
        {
            if (file.ContentLength > 0)
            {
                var fileName = Path.GetFileName(file.FileName);
                var path = Path.Combine(Server.MapPath("~/Content/images"), fileName);
                file.SaveAs(path);
            }
        }
        if (ModelState.IsValid)
        {
            db.Products.Add(product);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        ViewBag.CategoryId = new SelectList(db.Categorys, "CategoryId", "Name", product.CategoryId);
        ViewBag.SubCategoryId = new SelectList(db.SubCategories, "SubCategoryId", "SubCategoryName", product.SubCategoryId);
        ViewBag.ModelId = new SelectList(db.Models, "ModelId", "ModelName", product.ModelId);
        return View(product);
    }

Here is my view part:

@model IEnumerable<Online_Shopping_Management.Models.Category>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
 Select from @Model.Count() categories:
</p>

<ul>
@foreach (var categories in Model)
{
    <li>@Html.ActionLink(categories.Name, "Browse", new { categories = categories.Name })</li>
}
</ul>

I would assume you're uploading the image to your web server, and then storing the image location in your database somewhere? At that point it'd be as simple as adding a string property with image location to your model, then simple doing `` — mituw16, May 05 '14 at 12:57
@EhsanSajjad, No I don't have products' images relative path in the model. You can check my full model above. — InsParbo, May 05 '14 at 13:03
@mituw16, I am storing the images into a folder under Content/images. I'm afraid that I don't understand your solution. Would you please give me an example using my code? — InsParbo, May 05 '14 at 13:04
When you upload the images to your web server, you **need** to do one of two things. Store the relative path where you are uploading the image in some form of persisted datastore (database, flatfile, etc), or store the actual bytes of the images in a database (not recommended). — mituw16, May 05 '14 at 13:06
@mituw16 How can I store the relative path into a database related to particular product using code first approach? That is what I don't understand yet. — InsParbo, May 05 '14 at 13:11

score 1 · Accepted Answer · edited May 23 '17 at 12:03

1

I also face same problem some days ago. Check this link. I also answer there : Upload,Save and Retrieve Image from database by using their Id in Code First Method

edited May 23 '17 at 12:03

Community

1
1

answered May 10 '14 at 10:52

mgsdew

729
1
8
27

mvc 4 razor uploaded image view

1 Answers1