MVC項(xiàng)目中實(shí)現(xiàn)圖片顯示代碼

ASP.NET MVC 3 框架安裝包官方版

• 類型：編程控件大�。�22.2M語言：中文 評(píng)分：2.2
• 標(biāo)簽：

立即下載

首先,有好一陣沒有怎么寫博客文章了.實(shí)在也是很多事情,確實(shí)沒有停下來過.

這兩天在講解MVC方面的知識(shí)和項(xiàng)目實(shí)踐,其中有一個(gè)小的細(xì)節(jié),是有關(guān)于圖片顯示方面的，記錄下來供大家參考

在MVC項(xiàng)目中，要顯示一個(gè)圖片，尤其是該圖片是存放在數(shù)據(jù)庫的話，還是可以繼續(xù)使用原先Web Forms的那種ashx的方式。但也可以考慮下面的方式

1.創(chuàng)建一個(gè)ImageResult

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.Mvc;
using System.Drawing;
using System.Drawing.Imaging;
using System.Web;

namespace Extensions
{
public class ImageResult : ActionResult
{
public ImageResult() { }
public Image Image { get; set; }
public ImageFormat ImageFormat { get; set; }
public override void ExecuteResult(ControllerContext context)
{
// verify properties
if (Image == null)
{
throw new ArgumentNullException("Image");
}
if (ImageFormat == null)
{
throw new ArgumentNullException("ImageFormat");
}
// output
context.HttpContext.Response.Clear();
if (ImageFormat.Equals(ImageFormat.Bmp)) context.HttpContext.Response.ContentType = "image/bmp";
if (ImageFormat.Equals(ImageFormat.Gif)) context.HttpContext.Response.ContentType = "image/gif";
if (ImageFormat.Equals(ImageFormat.Icon)) context.HttpContext.Response.ContentType = "image/vnd.microsoft.icon";
if (ImageFormat.Equals(ImageFormat.Jpeg)) context.HttpContext.Response.ContentType = "image/jpeg";
if (ImageFormat.Equals(ImageFormat.Png)) context.HttpContext.Response.ContentType = "image/png";
if (ImageFormat.Equals(ImageFormat.Tiff)) context.HttpContext.Response.ContentType = "image/tiff";
if (ImageFormat.Equals(ImageFormat.Wmf)) context.HttpContext.Response.ContentType = "image/wmf";
Image.Save(context.HttpContext.Response.OutputStream, ImageFormat);
}
}

}

2,創(chuàng)建一個(gè)Action

private string connection =ConfigurationManager.ConnectionStrings["northwind"].ConnectionString;

public ActionResult Image(int id)
{
var db = new NorthwindDataContext(connection);
var found = db.Employees.FirstOrDefault(e => e.EmployeeID == id);

if (found != null)
{
var buffer = found.Photo.ToArray();
ImageConverter converter = new ImageConverter();
var image = (Image)converter.ConvertFrom(buffer);
return new Extensions.ImageResult()
{
Image = image,
ImageFormat = System.Drawing.Imaging.ImageFormat.Jpeg
};

}
else
{
ViewData["message"] = "員工不存在";
return View("Error");
}

}
 

3.在頁面（View）中調(diào)用

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Models.Employee>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Update
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<h2>Update</h2>

<% using (Html.BeginForm()) {%>
<%: Html.ValidationSummary(true) %>

<fieldset>
<legend>Fields</legend>
<div style="float:right">

<img src="/Employee/Image/<%:Model.EmployeeID %>" alt="" />
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.EmployeeID) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.EmployeeID) %>
<%: Html.ValidationMessageFor(model => model.EmployeeID) %>
</div>

<div class="editor-label">
<%: Html.LabelFor(model => model.LastName) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.LastName) %>
<%: Html.ValidationMessageFor(model => model.LastName) %>
</div>

<div class="editor-label">
<%: Html.LabelFor(model => model.FirstName) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.FirstName) %>
<%: Html.ValidationMessageFor(model => model.FirstName) %>
</div>

<div class="editor-label">
<%: Html.LabelFor(model => model.Title) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Title) %>
<%: Html.ValidationMessageFor(model => model.Title) %>
</div>

<div class="editor-label">
<%: Html.LabelFor(model => model.TitleOfCourtesy) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.TitleOfCourtesy) %>
<%: Html.ValidationMessageFor(model => model.TitleOfCourtesy) %>
</div>

<div class="editor-label">
<%: Html.LabelFor(model => model.BirthDate) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.BirthDate, String.Format("{0:g}", Model.BirthDate)) %>
<%: Html.ValidationMessageFor(model => model.BirthDate) %>
</div>

<div class="editor-label">
<%: Html.LabelFor(model => model.HireDate) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.HireDate, String.Format("{0:g}", Model.HireDate)) %>
<%: Html.ValidationMessageFor(model => model.HireDate) %>
</div>

<div class="editor-label">
<%: Html.LabelFor(model => model.Address) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Address) %>
<%: Html.ValidationMessageFor(model => model.Address) %>
</div>

<div class="editor-label">
<%: Html.LabelFor(model => model.City) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.City) %>
<%: Html.ValidationMessageFor(model => model.City) %>
</div>

<div class="editor-label">
<%: Html.LabelFor(model => model.Region) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Region) %>
<%: Html.ValidationMessageFor(model => model.Region) %>
</div>

<div class="editor-label">
<%: Html.LabelFor(model => model.PostalCode) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.PostalCode) %>
<%: Html.ValidationMessageFor(model => model.PostalCode) %>
</div>

<div class="editor-label">
<%: Html.LabelFor(model => model.Country) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Country) %>
<%: Html.ValidationMessageFor(model => model.Country) %>
</div>

<div class="editor-label">
<%: Html.LabelFor(model => model.HomePhone) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.HomePhone) %>
<%: Html.ValidationMessageFor(model => model.HomePhone) %>
</div>

<div class="editor-label">
<%: Html.LabelFor(model => model.Extension) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Extension) %>
<%: Html.ValidationMessageFor(model => model.Extension) %>
</div>

<div class="editor-label">
<%: Html.LabelFor(model => model.Notes) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Notes) %>
<%: Html.ValidationMessageFor(model => model.Notes) %>
</div>

<div class="editor-label">
<%: Html.LabelFor(model => model.ReportsTo) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.ReportsTo) %>
<%: Html.ValidationMessageFor(model => model.ReportsTo) %>
</div>

<div class="editor-label">
<%: Html.LabelFor(model => model.PhotoPath) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.PhotoPath) %>
<%: Html.ValidationMessageFor(model => model.PhotoPath) %>
</div>

<p>
<input type="submit" value="Save" />
</p>
</fieldset>

<% } %>

<div>
<%: Html.ActionLink("Back to List", "Index") %>
</div>

</asp:Content>

最后的結(jié)果如下，大家可以參考參考