MVC3 - 从数据库中获取红色x而不是图片

Question

在数据库中存储数据时，我得到红色的x标记而不是图片。我相信我在视图文件中有问题。请有人看看这个，并告诉我如何纠正它。如果我有错误的网址操作，请告诉我应该使用哪些网址。提前致谢。

SubCategory2表具有以下的列...

列字段>图片1：数据类型> VARBINARY（MAX）

列字段> ImageMimeType：数据类型> VARCHAR（50）

指数.cshtml文件

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

Edit.cshtml文件 “编辑” 是在控制器上的方法。 “ProductCategoryL2”是控制器中的方法。 “GetImage”是控制器中的方法。所有这些方法都在叫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文件

[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 GetImage(int productId) 
    { 
     var product = db.SubProductCategory2.First(x => 
     x.SubProductCategoryID == productId); 
     return File(product.Picture1, product.ImageMimeType); 
    } 

增加注
我使用MVC 3框架。 GetImage方法已经从Steven Sanderson的书Pro ASP.NET MVC 2框架中提取出来。所以我不确定这是否会成为问题？

Answer 1

我想借此来调试的第一步将是直接尝试在浏览器的图像的URL。右键点击红色的X，复制网址并将其粘贴到地址栏中。如果URL看起来正确，那么应该是一个更好的错误，告诉你问题是什么。如果失败了，请在GetImage例程中放置一个断点，以确保路径正确，并且调用了方法。尝试Fiddler以查看正在发出的请求以及您的Web服务器在说什么。

我的猜测是你的行为错误。当您的方法位于ProductCategoryL2控制器上时，它看起来像链接到SubProductCategory2控制器上的GetImage操作。

另外我不明白你的Model.SubProductCategoryID值应该如何映射到你的productId参数。尝试改变这些调用：

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

这些：

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

Answer 2

输入文件字段被称为Create：

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

，而控制器动作参数处理表单提交被称为image（带有HttpPostedFileBase型）=>此参数将始终为null在Edit控制器行动，没有什么会被保存在数据库中。

该属性在Html.BeginForm帮助程序中被称为enctype而不是encType。同样在GetImage操作中，确保product.Picture1表示正确的图像字节数组，并且其内容类型与product.ImageMimeType匹配。

因此，例如为了进一步调试此问题，您可以尝试将其保存到某个临时文件，以在返回之前查看它是否为有效图像。另外，还要确保你已经从数据库中取出的product实例不为空：

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

然后确保foo.png开放成功地与一个图像浏览器。

Answer 3

您正试图将文件内容作为值返回给您的img的src属性。您的浏览器需要针对图像发出单独的请求。

视图改成这样：

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