2011年5月16日 星期一

利用泛型處理常式(ashx) 實作 .Net MVC 2 的圖形驗證功能

緣由:之前開發 WebForm 時,已撰寫一支 ashx 做為圖形驗證碼的產圖程式,希望也能應用在 MVC上,雖然網路上有人利用 ImageActionResult (http://zh-tw.w3support.net/index.php?db=so&id=930349)撰寫圖形輸出,但畢竟要重改程式。

其實只要將 ashx 檔放到 MVC 專案的Content的資料夾內,再於 Views 網頁適當位置插入<img onclick="window.location.reload();" src="http://www.blogger.com/Content/grp.ashx" />即可,其中 onclick 是為了能手動更換驗證碼。

註:ashx 不能放置於 Views, Coltrolers, Models 資料夾內。


如果不直接插入HTML ,可利用 HtmlHelper,可是 MVC 內建未提供 img Helper,可以自己寫一個,底下 Image Helper是從網路上找到的(http://stackoverflow.com/questions/509352/where-is-html-image-in-asp-net-mvc-rc):

public static class HtmlHelperExtensions
{

public static string Image( this HtmlHelper helper,
string url,
string altText,
object htmlAttributes )
{
TagBuilder builder = new TagBuilder( "img" );
builder.Attributes.Add( "src", url );
builder.Attributes.Add( "alt", altText );
builder.MergeAttributes( new RouteValueDictionary( htmlAttributes ) );
return builder.ToString( TagRenderMode.SelfClosing );
}
}

使用方法為
<%= Html.Image( Url.Content( "~/Content/images/img.png" ),"alt text",new { id = "myImage", border = "0" } ) %>

記得要在 aspx 網頁使用
<%@import Namespace="此Helper的命名空間"%>

當然也可以使用下列方法來插入圖形:
<img src="<%= ViewData["ImageSource"] %>" alt="" />
<img src="<%= ViewData.Model.ImageSource %>" alt="" />
<img src="<%= ResolveUrl(ViewData.Model.ImageSource) %>" alt="" />

沒有留言:

張貼留言