1. 程式人生 > >依賴注入的威力,.NET Core的魅力:解決MVC檢視中的中文被html編碼的問題

依賴注入的威力,.NET Core的魅力:解決MVC檢視中的中文被html編碼的問題

有園友在博問中提了這樣一個問題 —— .NET Core 中文等非英文文字html編碼輸出問題,到我們的 ASP.NET Core 專案中一看,也是同樣的問題。

比如下面的Razor檢視程式碼:

@{
    ViewBag.Title = "程式碼改變世界";
}<title>@ViewBag.Title</title>

輸出的html程式碼變成了:

<title>&#x4EE3;&#x7801;&#x6539;&#x53D8;&#x4E16;&#x754C;</
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中是同樣的問題。

640?wx_fmt=png

試試不用預設的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的魅力。