實作ActionResult來讀取二進位圖片並顯示

前言：
在ASP.NET WebForm時要顯示二進位圖片或是加工後的圖片，通常會將Image的路徑指定為ashx(泛型處理常式)，雖然也可以在MVC網站中加入ashx，但還是覺的怪怪的，不太符合MVC的精神，因為回應資訊通常是透過action來傳回ActionResult物件給View.
仔細研究ActionResult後你會發現MVC Framework並沒有提供用來回應圖片資訊的ActionResult類別，所以我們就自已動手做吧!!
 

實作：
按照慣例一樣使用北風資料庫來讀取員工的二進位圖片XD
1.在網站根目錄下建立一個資夾料名為Helper，在其中加入一個類別檔名為MyActionResult. 

2.在類別檔中建立一個繼承自ActionResult(抽象類別)的類別名為ImageResult，接著覆寫ExecuteResult方法

view source

print ?

01	using System;

02	using System.Collections.Generic;

03	using System.Linq;

04	using System.Web;

05	using System.Web.Mvc;

06	using System.IO;

07

08	namespace ShowImageSample.Helper

09

{

10	public class ImageResult : ActionResult

11

{

12	private MemoryStream _imgStream;

13	private string _contentType;

14

15	public ImageResult(MemoryStream imgStream, string contentType)

16

{

17	_imgStream = imgStream;

18	_contentType = contentType;

19

}

20

21	public override void ExecuteResult(ControllerContext context)

22

{

23	if (context == null)

24	throw new ArgumentException("context");

25	if(_imgStream == null)

26	throw new ArgumentException("imgStream is null");

27	if(_contentType == null)

28	throw new ArgumentException("contentType is null");

29

30	HttpResponseBase response = context.HttpContext.Response;

31

32	response.Clear();

33	response.Cache.SetCacheability(HttpCacheability.NoCache);

34	response.ContentType = _contentType;

35

36	_imgStream.WriteTo(response.OutputStream);

37

}

38

}

39

}

3.在Model資料夾下建立一個Linq To Entity包含員工資料夾


在Models資料夾下再建立一個Employees的Repository類別，名為EmployeeRepository，其中包含取得所有員工列表與員工圖片的方法.

view source

print ?

01	using System;

02	using System.Collections.Generic;

03	using System.Linq;

04	using System.Web;

05

06	namespace ShowImageSample.Models

07

{

08	public class EmployeeRepository

09

{

10	private NorthwindEntities _entity;

11	public EmployeeRepository()

12

{

13	_entity = new NorthwindEntities();

14

}

15

16	public IQueryable<Employees> GetEmpList()

17

{

18	return _entity.Employees;

19

}

20

21	public byte[] GetEmployeePhotoByID(int empid)

22

{

23	return _entity.Employees.First(x => x.EmployeeID == empid).Photo;

24

}

25

}

26

}

4.建立一個Controller，名為Employee

view source

print ?

01	using System;

02	using System.Collections.Generic;

03	using System.Linq;

04	using System.Web;

05	using System.Web.Mvc;

06	using System.Web.Mvc.Ajax;

07	using System.IO;

08	using ShowImageSample.Helper;

09	using ShowImageSample.Models;

10

11	namespace ShowImageSample.Controllers

12

{

13	public class EmployeeController : Controller

14

{

15

//

16	// GET: /Employee/

17

18	public ActionResult Index()

19

{

20	EmployeeRepository emp = new EmployeeRepository();

21	return View(emp.GetEmpList());

22

}

23

24	//用來顯示圖片的actioin

25	public ActionResult EmployeePhoto(int id)

26

{

27	EmployeeRepository emp = new EmployeeRepository();

28	byte[] empPhoto = emp.GetEmployeePhotoByID(id).Skip(78).ToArray();

29	MemoryStream ms = new MemoryStream(empPhoto);

30	return new ImageResult(ms, "image/jpeg");

31

}

32

33

}

34

}

5.在Index action上右鍵點選Add View

6.這時會自動建立一個強型別的View,修改一下他的html，只顯示員工編號，名字，照片三個Column
 

view source

print ?

01

<table>

02

<tr>

03

<th>

04

編號

05

</th>

06

<th>

07

名字

08

</th>

09

<th>

10

照片

11

</th>

12

</tr>

13	<% foreach (var item in Model) { %>

14

<tr>

15

<td>

16	<%= Html.Encode(item.EmployeeID) %>

17

</td>

18

<td>

19	<%= Html.Encode(item.FirstName + " " + item.LastName) %>

20

</td>

21

<td>

22	<img alt="photo" src='<%= string.Format("Employee/EmployeePhoto/{0}", item.EmployeeID)%>' />

23

</td>

24

</tr>

25

<% } %>

26

</table>

圖片的路徑指定的是 EmployeePhoto action

這時網頁會呈現如下：

 

範例下載

 

引用地址：http://www.dotblogs.com.tw/pbnttttt/archive/2009/11/14/11991.aspx?fid=11665#feedback