MVC 3 - System.byte []输出而不是显示图像

时间:2011-03-16 13:23:05

标签: asp.net-mvc

我完成index.cshtml文件看起来像这样......

@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文件看起来......

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>

用于创建和图像的控制器看起来像这样......

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类。

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;
    }

 }

}

谢谢tvanfosson。

2 个答案:

答案 0 :(得分:0)

您的网址完全错误;您想使用操作名称和参数调用Url.Action

您的alt文字也错了;你在一个字节数组上有效地调用ToString(),它返回"System.Byte[]"

由于错误生成的网址不存在,因此会显示错误的alt文字。

答案 1 :(得分:0)

如果Picture1是图片数据,则@Html.EditorFor(model => model.Picture1)不是您想要的。您可能希望调用Image动作以内联方式显示图片。

...代码示例即将来临

<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>

然后更改create GET方法,使其填充PictureID而不是模型上的Picture。