MVC 自定义HtmlHelper
MVC中為我們提供了一些方便生成html標簽的方法 (HtmlHelper)
例如:
<p class="site-title">@Html.ActionLink("將你的徽標放置在此處", "Index", "Home")</p>
這是一個生成a標簽 超鏈接的htmlHelper , 那看下他生成的html源文件
<p class="site-title"><a href="/">將你的徽標放置在此處</a></p>
是不不比寫html標簽簡單多了。。。 呵呵 但是不幸的是微軟并沒有把所有的html標簽都對應有help方法 比如 img 標簽
我們今天的任務就是自定義一個HtmlHelper 實現img標簽的功能
首先,新建一個static(靜態)類 注意必須是public的 ,然后再寫一個static方法 注意此方法的方法名就是你Html. 出來的名 比如@Html.ActionLink 其中ActionLink就是方法名。
看下代碼:
1 public static class MyHtmlHelper 2 { 3 /// <summary> 4 /// 自定義一個@html.Image() 5 /// </summary> 6 /// <param name="helper"></param> 7 /// <param name="src">src屬性</param> 8 /// <param name="alt">alt屬性</param> 9 /// <returns></returns> 10 public static MvcHtmlString Image(this HtmlHelper helper, string src, string alt) 11 { 12 var builder = new TagBuilder("img"); 13 builder.MergeAttribute("src", src); 14 builder.MergeAttribute("alt", alt); 15 builder.ToString(TagRenderMode.SelfClosing); 16 return MvcHtmlString.Create(builder.ToString()); 17 } 18 }
View視圖中的代碼:
1. 引用MyHtmlHelper的命名空間
第一種方法 直接在對應的cshtml文件中寫下面代碼
@using MvcAppAndEF_Test1.Common
第二種方法 打開Views文件夾中的web.config 文件會看到如下代碼
1 <pages pageBaseType="System.Web.Mvc.WebViewPage"> 2 <namespaces> 3 <add namespace="System.Web.Mvc" /> 4 <add namespace="System.Web.Mvc.Ajax" /> 5 <add namespace="System.Web.Mvc.Html" /> 6 <add namespace="System.Web.Optimization"/> 7 <add namespace="System.Web.Routing" /> 8 </namespaces> 9 </pages>
將命名空間添加到這也行
下面看下自定義HtmlHelper的使用方法
<div> <!-- html方式寫的 --> <img src ="abc.jpg" alt ="abc" /> <!-- mvc中的 htmlhelper方法寫的 --> @Html.Image("abc.jpg","abc") </div>
Result: 瀏覽器查看源 看下html生成的源代碼
<div> <!-- html方式寫的 --> <img src ="abc.jpg" alt ="abc" /> <!-- mvc中的 htmlhelper方法寫的 --> <img alt="abc" src="abc.jpg"></img> </div>
怎么樣 是不是很簡單呢?
-------------------------------------------------------------
感謝您看完本篇博文!!!!
互聯網產品永遠是Beta版,沒有做不到的只有想不到的。
李亮和大家共同學習共同進步,如有什么疑問或博文有什么錯誤知識,請您斧正。
您可以給我發郵件,也可以再文章下面留言我會第一時間回復您。
再次感謝您的觀看,祝您身體健康!工作順利!