7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

htmlタグを反映して(HTMLエンコードを無効にして)Webページに表示する方法

Posted at

はじめに

「お知らせ」や「FAQ」をプランナーさんに作成してもらい、それをDBにマスターデータとして保存、Webサイト上でその文言を表示する。というのは、よくあることだと思います。

ただし、そのときに、改行などはもちろん、htmlのタグで書かれます。
つまり、このように表示したいわけです。

いろはにほへと<br/>ちりぬるを

:arrow_down:

いろはにほへと
ちりぬるを

ただし、このとき cshtml にそのまま渡しても、タグがそのまま表示されてしまいます。
その回避策が、Html.Raw です。

@Html.Raw を使用する

そもそも、htmlタグがそのまま表示されるのは、HTMLエンコードが行われているからです。
Html.Raw を使用すると、それを無効化します。

:no_entry_sign: クロスサイトスクリプティング(XSS)の恐れがあるため、ユーザーが入力するようなものについては使用しないでください :no_entry_sign:
HTMLエンコードはXSSを防ぐために行われていることを重々承知した上で、安全な入力の場合、例えば、今回のようにサイト運営者が入力するものに対して使用することをオススメします。

サンプルコードを以下に記載します。

サンプルコード

SampleController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;


namespace WebApplication1.Controllers
{
    public class SampleController : Controller
    {
        [HttpGet]
        public IActionResult Index()
        {
            var model = new SampleModel() {SampleText = "いろはにほへと ちりぬるを<br/>わかよたれそ つねならむ"};
            return View(model);
        }
    }
}

Index.cshtml
@model SampleModel
    

<section>
    <h3>そのまま表示</h3>
    <p>
        @Model.SampleText
    </p>
</section>

<section>
    <h3>Html.Raw を使用して表示</h3>
    <p>
        @Html.Raw(Model.SampleText)
    </p>
</section>
SampleModel.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Models
{
    public class SampleModel
    {
        public string SampleText { get; set; }
    }
}

実行結果

2018-02-16_09h53_44.png

参考

7
4
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?