MVC3 - getting red x instead of picture from db

I am getting red x mark instead of the picture when storing in database. I believe I am having problems in the Views files. Please could someone have a look at this and tell me how to correct it. If I have wrong URL Actions please tell me which ones I should be using. Thanks in advance.

SubCategory2 Table has the following columns...

Column field > Picture1 : Data Type > varbinary(MAX)

Column field > ImageMimeType : Data Type > varchar(50)

Index.cshtml file

 @foreach (var item in Model) {
    <td>
                <img src="@Url.Action("GetImage", "SubProductCategory2", 
  new { id = item.SubProductCategoryID})" alt="" height="100" width="100" /> 
           </td>

Edit.cshtml file "Edit" is the method in the contoller. "ProductCategoryL2" is the method in the controller. "GetImage" is the method in controller. All these methods are in the same controller file called ProductCategoryControllerL2

@using (Html.BeginForm("Edit", "ProductCategoryL2", "GetImage", 
FormMethod.Post, new { @encType = "multipart/form-data" }))
 {
  <div class="editor-field">
    <img src="@Url.Action("GetImage", "SubProductCategory2", new {    
    Model.SubProductCategoryID })" alt="" /> 
    @Html.ValidationMessage("Picture1", "*")
    <input type="file" id="fileUpload" name="Create" size="23"/>
  </div>
}

ProductCategoryL2Controller.cs file

    [HttpPost]
    public ActionResult Edit(int id, FormCollection collection, 
    SubProductCategory2 editSubProdCat, HttpPostedFileBase image)
    {
        var r = db.SubProductCategory2.First(x => x.SubProductCategoryID 
        == id);

        if (TryUpdateModel(r))
        {
            if (image != null)
            {
              editSubProdCat.ImageMimeType = image.ContentType;
              editSubProdCat.Picture1 = new byte[image.ContentLength];
              image.InputStream.Read(editSubProdCat.Picture1, 0, 
              image.ContentLength);
            }
            db.SaveChanges();
            return RedirectToAction("/");
        }
        return View(r);

   }

  public FileContentResult GetI开发者_如何学JAVAmage(int productId)
  {
      var product = db.SubProductCategory2.First(x => 
      x.SubProductCategoryID == productId);
      return File(product.Picture1, product.ImageMimeType);
  }

Addition Note

I am using MVC 3 framework. The GetImage method has been extacted from Steven Sanderson book Pro ASP.NET MVC 2 Framework. So I am not sure if that will be a problem?

The first step I would take to debug would be to try the URL for the image in your browser directly. Right-click on the red X, copy the url and paste it in your address bar. If the url looks right you should be a better error telling you what the problem is. If that fails, put a breakpoint in your GetImage routine to make sure the routes are correct and your method is getting called. Try Fiddler to see the request being made and what your web server is saying.

My guess is that you have the action wrong. It looks like you are linking to the GetImage action on the SubProductCategory2 controller when the method is on your ProductCategoryL2 controller.

Also I don't understand how your Model.SubProductCategoryID value is supposed to be mapped to your productId parameter. Try changing these calls:

Url.Action("GetImage", "SubProductCategory2", 
    new { id = item.ProductCategoryID})
Url.Action("GetImage", "SubProductCategory2", new {    
    Model.SubProductCategoryID })

to these:

Url.Action("GetImage", "ProductCategoryL2", 
    new { productId = item.ProductCategoryID})
Url.Action("GetImage", "ProductCategoryL2", new {    
    productId = Model.SubProductCategoryID })

Your input file field is called Create:

<input type="file" id="fileUpload" name="Create" size="23"/>

whereas the controller action parameter handling the form submission is called image (the one with HttpPostedFileBase type) => this parameter will always be null in your Edit controller action and nothing will be saved in the database.

Also the attribute is called enctype and not encType in the Html.BeginForm helper. Also inside the GetImage action ensure that product.Picture1 represents a correct image byte array and that it's content type matches with product.ImageMimeType.

So for example to further debug this issue you could try to save it to some temporary file to see if it is a valid image just before returning. Also make sure that the product instance you have fetched from the database is not null:

 // if the content type is image/png:    
File.WriteAllBytes(@"c:\foo.png", product.Picture1);

Then ensure that foo.png open successfully with an image viewer.

You are trying to return file content as the value to your img's src attribute. Your browser will need to issue a separate request for the image.

change your view to this:

<img src="GetImage/@(Model.SubProductCategoryID)" />