在C# Razor中将字符串呈现为HTML

Question

我试图从我的模型中呈现一个地址。字符串包含换行符，我正在用换行标签替换它们。但是，它在页面上呈现为字符串而不是HTML。我该如何强制我的字符串呈现为HTML？ 尝试：

<span id="addressLine">
    @Model.MyData.Address.Replace("\r\n", "<br />");
</span>

页面显示结果：

Address Top<br />Street Name<br />City<br />PostCode

应显示为：

Address Top
Street Name
City
PostCode

- Fizzix

---

你应该分割这个字符串。 - Daniel A. White

@DanielA.White - 抱歉，老兄，我第一天使用C#。所以我应该将其拆分并保存为不同的变量，并在不同的行上呈现它们？ - Fizzix

使用 @Html.Raw(Model.MyData.Address.Replace("\r\n", "<br />")) 将 Model.MyData.Address 中的换行符 \r\n 替换为 HTML 的 <br> 标签，并以原样输出。 - dom

@Dom - 感谢，完美地运作了。请发表回答。 - Fizzix

<span>里面放<br/>？太尴尬了！ - user3559349

Answer 1

使用@Html.Raw(Model.MyData.Address.Replace("\r\n", "<br />"))

该代码用于将Model中的MyData.Address字符串中的换行符替换为HTML标签<br />，并使用@Html.Raw方法输出结果。

- dom

---

请注意使用此内容，如果用户地址为 1234 <script>alert('a')</script> lane，您将面临跨站脚本攻击问题。 - John Koerner

@JohnKoerner - 别担心，我们会在保存到数据库之前清理并格式化地址。不过还是感谢你的提醒。 - Fizzix

这已经不是最佳答案了。下面有几个答案使用CSS/HTML策略，避免使用Html.Raw。换行符的问题是CSS/HTML问题，现代浏览器可以通过CSS/HTML控制其行为。 - Kind Contributor

Answer 2

使用

@(new HtmlString(@Model.MyData.Address))

为了避免潜在的XSS攻击，使用这种方法更加安全：

参考这篇文章：在Razor中以HTML形式呈现HTML

- cnom

---

它如何避免潜在的XSS攻击？它只是一个字符串包装器，用于指示在视图上使用时，内容不应进行编码，因此任何不受信任的内容将显示为与Html.Raw相同。 - Kelvin

Answer 3

使用CSS来保留空白：

HTML

<div id="addressLine">
  @Model.MyData.Address;
</div>

Css

#addressLine {
  white-space: pre;
}

- user3559349

---

这个答案更好，因为您不再需要使用 Html.Raw。 - Kind Contributor

这个答案只涉及 CSS，与 HTML 编码或使用 Razor 渲染 HTML 无关。这些都是在服务器端进行的，在这种情况下与 CSS 关系较小。 - Michael

Answer 4

要在Blazor上呈现HTML，可以使用MarkupString => @((MarkupString)此处为字符串)这将以HTML格式呈现字符串

<span id="addressLine">
    @((MarkupString)@Model.MyData.Address.Replace("\r\n", "<br />"));
</span>

- Game dev

Answer 5

你应该使用CSS的空白属性，而不是它。有关详细信息，请访问http://www.w3schools.com/cssref/pr_text_white-space.asp。

它还可以帮助您避免跨站点脚本（http://en.wikipedia.org/wiki/Cross-site_scripting）。

- Thiago