MVC 3 - System.byte[] output instead of showing image - asp.net-mvc

Question

I complete index.cshtml file looks like this...
#model IEnumerable<MvcMyApplication.Models.SubProductCategory2>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
#Html.ActionLink("Create New", "Create")
<p>
some javascripts code
</p>
<input type="text" name="search" id="search" style="color: #F5FFFA;
font-family: Constantia, Georgia, serif; font-weight: bold; font-size:
14px; background-color: #D2691E;" size="15" />
<table id="admin_table">
<thead>
<tr>
<th></th>
<th>
CategoryName
</th>
<th>
SubCategoryName
</th>
<th>
Picture
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model) {
<tr>
<td>
#Html.ActionLink("Edit", "Edit", new {
id=item.SubProductCategoryID }) |
#Html.ActionLink("Delete", "Delete", new {
id=item.SubProductCategoryID })
</td>
<td>
#item.ProductCategory.CategoryName
</td>
<td>
#item.SubCategoryName
</td>
<td>
<img alt="#Html.Encode(item.SubProductCategoryID)"
src='#(Url.Action(("Image")) + item.SubProductCategoryID)'
width="100" height="100" />
</td>
</tr>
}
Complelte Create.cshtml file looks this...
enter code here
#model MvcMyApplication.Models.ProCat1
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")"
type="text/javascript"></script>
<script src="#Url.Content("~/Scripts
/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
#using (Html.BeginForm("Create", "ProductCategoryL2", FormMethod.Post,
new { enctype = "multipart/form-data"}))
{
#Html.ValidationSummary(true)
<fieldset>
<legend>ProCat1</legend>
<div class="editor-label">
#Html.LabelFor(model => model.CategoryName)
</div>
<div class="editor-field">
#Html.DropDownList("ProductCategoryID",
(IEnumerable<SelectListItem>)ViewData["CategoryName"])
#Html.ValidationMessageFor(model => model.CategoryName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.SubCategoryName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.SubCategoryName)
#Html.ValidationMessageFor(model => model.SubCategoryName)
</div>
<!-- <div class="editor-field">
<img alt="Current image" src='#Url.Action("image", new { id =
Model.SubProductCategoryID } )' />
<input type="file" id="fileUpload" name="fileUpload" size="23"/>
#Html.ValidationMessageFor(model => model.SubProductCategoryID)
</div> -->
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
Controller for Create and Image looks like this...
enter code here
public ActionResult Create()
{
PopulateProductCategoryDropDownList(-1);
return View();
}
private void PopulateProductCategoryDropDownList(object selectedCategory)
{
ViewBag.CategoryName = new SelectList ((from d in db.ProductCategories select d).ToList(),
"ProductCategoryID", "CategoryName", selectedCategory);
}
//
// POST: /ProductCategoryL2/Create
[HttpPost]
public ActionResult Create([Bind(Exclude = "SubProductCategoryID")] SubProductCategory2 Createsubcat2, FormCollection values)
{
if (ModelState.IsValid)
{
if (Request.Files.Count > 0)
{
Createsubcat2.Picture1 = (new FileHandler()).uploadedFileToByteArray((HttpPostedFileBase)Request.Files[0]);
}
db.AddToSubProductCategory2(Createsubcat2);
db.SaveChanges();
return RedirectToAction("/");
}
PopulateProductCategoryDropDownList(Createsubcat2.ProductCategoryID);
return View(Createsubcat2);
}
public FileResult Image(int id)
{
const string alternativePicturePath = #"/Content/question_mark.jpg";
SubProductCategory2 product = db.SubProductCategory2.Where(k => k.SubProductCategoryID == id).FirstOrDefault();
MemoryStream stream;
if (product != null && product.Picture1 != null)
{
stream = new MemoryStream(product.Picture1);
}
else // If product cannot be found or product doesn't have a picture
{
stream = new MemoryStream();
var path = Server.MapPath(alternativePicturePath);
var image = new System.Drawing.Bitmap(path);
image.Save(stream, System.Drawing.Imaging.ImageFormat.Jpeg);
stream.Seek(0, SeekOrigin.Begin);
}
return new FileStreamResult(stream, "image/jpeg");
}
FileHandler class.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using System.Drawing;
public class FileHandler
{
/// <summary>
/// Converts a HttpPostedFileBase into a byte array
/// </summary>
/// <param name="file"></param>
/// <returns></returns>
public byte[] uploadedFileToByteArray(HttpPostedFileBase file)
{
int nFileLen = file.ContentLength;
byte[] result = new byte[nFileLen];
file.InputStream.Read(result, 0, nFileLen);
return result;
}
}
}
Thanks tvanfosson.

Answer 1

Your URL is totally wrong; you want to call Url.Action with an action name and a parameter.
Your alt text is also wrong; you're effectively calling ToString() on a byte array, which returns "System.Byte[]".
Since your incorrectly generated URL doesn't exist, it's showing the incorrect alt text instead.

Answer 2

If Picture1 is image data, #Html.EditorFor(model => model.Picture1) isn't what you want. You probably want to call the Image action to display the picture inline.
...code sample coming
<div class="editor-field">
<img alt="Current image" src='#Url.Action("image", new { id = Model.PictureID } )' />
<input type="file" id="fileUpload" name="fileUpload" size="23"/>
#Html.ValidationMessageFor(model => model.PictureID)
</div>
Then change the create GET method so that it populates the PictureID instead of the Picture on the model.