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

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

好比下面的Razor視圖代碼:git

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

輸出的html代碼變成了:github

<title>&#x4EE3;&#x7801;&#x6539;&#x53D8;&#x4E16;&#x754C;</title>

上面的 @ViewBag.Title 實際上等同於下面的代碼:ide

@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()實現代碼以下:url

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 。spa

寫個.NET Core控制檯程序直接調用HtmlEncoder看看是否是就是它惹的禍。code

public class Program
{
    public static void Main(string[] args)
    {            
        Console.WriteLine(HtmlEncoder.Default.Encode("代碼改變世界"));
    }
}

輸出結果與MVC中是一樣的問題。htm

試試不用默認的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的魅力。

更新1:根據 零度的火 的評論,更好的解決方法是

services.Configure<WebEncoderOptions>(options =>
{
      options.TextEncoderSettings = new TextEncoderSettings(UnicodeRanges.All);
});

更新2:後來發現更好的解決方法

services.Configure<WebEncoderOptions>(options =>
    options.TextEncoderSettings = new TextEncoderSettings(UnicodeRanges.BasicLatin,
        UnicodeRanges.CjkUnifiedIdeographs));
相關文章
相關標籤/搜索