依賴注入的威力,.NET Core的魅力:解決MVC檢視中的中文被html編碼的問題
有園友在博問中提了這樣一個問題 —— .NET Core 中文等非英文文字html編碼輸出問題,到我們的 ASP.NET Core 專案中一看,也是同樣的問題。
比如下面的Razor檢視程式碼:
@{ ViewBag.Title = "程式碼改變世界"; }<title>@ViewBag.Title</title>
輸出的html程式碼變成了:
<title>代码改变世界</title>
上面的 @ViewBag.Title 實際上等同於下面的程式碼:
@Html.Raw(Html.Encode(ViewBag.Title))
所以解決這個問題需要從ASP.NET Core MVC中的HtmlHelper下手(上面程式碼中Html的型別就是HtmlHelper)。
從GitHub上籤出MVC的原始碼看看HtmlHelper.Encode()的實現:
private readonly IHtmlGenerator _htmlGenerator;public string Encode(string value) {return _htmlGenerator.Encode(value); }
實際呼叫的是IHtmlGenerator介面的Encode()方法,MVC中實現這個介面的是DefaultHtmlGenerator,其對應的Encode()實現程式碼如下:
private readonly HtmlEncoder _htmlEncoder;public string Encode(string value) { return !string.IsNullOrEmpty(value) ? _htmlEncoder.Encode(value) : string.Empty; }
原來真正幹活的主角是HtmlEncoder,但它不是在MVC中實現的,而是在.NET Core Framework中實現的,名稱空間是 System.Text.Encodings.Web 。
寫個.NET Core控制檯程式直接呼叫HtmlEncoder看看是不是就是它惹的禍。
public class Program { public static void Main(string[] args) { Console.WriteLine(HtmlEncoder.Default.Encode("程式碼改變世界")); } }
輸出結果與MVC中是同樣的問題。
試試不用預設的HtmlEncoder例項(HtmlEncoder.Default),而是自己呼叫HtmlEncoder.Create()方法建立例項,這時發現了UnicodeRange引數型別。
public static HtmlEncoder Create(params UnicodeRange[] allowedRanges);
當使用UnicodeRanges.All作為引數建立HtmlEncoder例項時,問題就解決了。
Console.WriteLine(HtmlEncoder.Create(UnicodeRanges.All).Encode("程式碼改變世界"));
緊接著從GitHub上籤出System.Text.Encodings.Web的原始碼,看看HtmlEncoder.Default對應的HtmlEncode例項是如何被建立的:
internal readonly static DefaultHtmlEncoder Singleton = new DefaultHtmlEncoder(new TextEncoderSettings(UnicodeRanges.BasicLatin));
原來用的是UnicodeRanges.BasicLatin,難怪中文會被編碼,搞不懂為什麼預設不用UnicodeRanges.All?
知道了問題的原因,解決起來就不難了,只要我們以HtmlEncoder.Create(UnicodeRanges.All)建立HtmlEncoder例項,並替換掉MVC中所用的預設HtmlEncoder例項。那如何替換呢?
回到MVC的原始碼中,看看DefaultHtmlGenerator的實現,發現它的建構函式引數中有HtmlEncoder:
public DefaultHtmlGenerator( IAntiforgery antiforgery, IOptions<MvcViewOptions> optionsAccessor, IModelMetadataProvider metadataProvider, IUrlHelperFactory urlHelperFactory, HtmlEncoder htmlEncoder, ClientValidatorCache clientValidatorCache) { }
根據.NET從上到下、由內而外全面依賴注入的秉性,這個地方應該也是依賴注入的,我們只需注入一個新的HtmlEncoder例項即可,是不是這樣呢?
碼上一行,你就知道。
在 Startup.cs 的 ConfigureServices() 方法中新增下面的一行程式碼:
services.AddSingleton(HtmlEncoder.Create(UnicodeRanges.All));
執行ASP.NET Core站點,輸出結果如下:
<title>程式碼改變世界</title>
一行注入,立馬解決。依賴注入的威力,.NET Core的魅力。