正文

如何在 Blazor 项目中使用 C# 绑定制作 HTML 文本多行？

 2023-03-05  51

关键词：

【中文标题】如何在 Blazor 项目中使用 C# 绑定制作 HTML 文本多行？【英文标题】：How to make a HTML text multiline using a C# bind in a blazor project? 【发布时间】：2020-02-17 21:39:52 【问题描述】：

我有一个带有客户端 Razor 页面的 Blazor 项目。在该页面上，我想显示多行文本，例如：

找不到系列错误信息

但文本是在使用@bind 的 C# 字符串中找到的。

我尝试使用普通的\n 来换行。它确实认为它是命令，但它在文本中放置了一个“空格”而不是换行。

我也试过在文本中写<br />，但它只是在文本中写了那个。

我的剃须刀页面：

<p>@resultString</p>

@code 
    string resultString = "Series not found \nError message";

使用代码 sn-p 中的输入，我希望得到以下输出：

找不到系列错误信息

【问题讨论】：

<pre>@resultString</pre> 【参考方案1】：

我认为渲染原始 html 标记不是一个好主意，因为它在大多数情况下都非常危险。

至于你的问题，我建议你添加一行CSS代码来显示换行：

style="white-space: pre-line" >@resultString

@代码 string resultString = "找不到系列\n错误信息";

演示

【讨论】：

或使用white-space: pre-wrap; 保持间距。【参考方案2】：

我能想到的唯一方法是使用 Razor 模板。 \r\n、Envirnoment.Newline 和其他任何东西都不能让编译器让步。

这是使用 Razor 模板的有效解决方案：

<p>@resultString</p>

@code 
    RenderFragment resultString =  @<p>Series not found <br />Error message</p>;

更新：你也可以这样用：

MarkupString  resultString = (MarkupString) $"Series not found <br />Error message";

更新 2：来自文件：

呈现原始 HTML Blazor 通常使用 DOM 文本节点呈现字符串，这意味着它们可能包含的任何标记都将被忽略并被视为文字文本。这个新功能可以让你渲染特殊 MarkupString 值将被解析为 HTML 或 SVG，然后插入到 DOM 中。

警告：渲染从任何不受信任的来源构建的原始 HTML 是重大安全隐患！

使用 MarkupString 类型添加静态 HTML 内容块。

@((MarkupString)myMarkup)

@functions 
    string myMarkup = "<p class='markup'>This is a <em>markup string</em>.</p>";

希望这会有所帮助...

【讨论】：

谢谢！完美运行。【参考方案3】：

你总是可以选择简单的方法：拆分和循环

@foreach (var line in resultString.Split(new[]  '\r', '\n' , StringSplitOptions.RemoveEmptyEntries))

        <p>@line</p>
 

@code 

    public string resultString  => "Series not found \nError message";

【讨论】：

谢谢！这对我有用！【参考方案4】：

使用MarkupString 时，确保行正确编码很重要。确保这一点的一种简单方法是使用以下辅助方法：

public static class HtmlHelper

   public static MarkupString RenderMultiline(string textWithLineBreaks)
    
        var encodedLines = (textWithLineBreaks ?? string.Empty)
            .Split(new char[]  '\r', '\n' )
            .Select(line => HttpUtility.HtmlEncode(line))
            .ToArray();

        return (MarkupString)string.Join("<br />", encodedLines);

用法：

<div>
    @HtmlHelper.RenderMultiline($"This text goes over\nmultiple lines\neven with userinput");
</div>

【讨论】：

如何在 c# blazor 网页中更新实时日期时间

】如何在c#blazor网页中更新实时日期时间【英文标题】：HowCaniupdatethelivedatetimeinc#blazorwebpage【发布时间】：2021-06-1611:06:09【问题描述】：我正在尝试在blazor网页中设置实时日期时间。我尝试使用Datetime.now。它没有更新实时时间。... 查看详情

blazor数据绑定

数据绑定Blazor支持在html元素中使用Razor语法进行绑定c#字段属性或值绑定语法在html标签中，添加@bind="xxxx"即可实现绑定@page"/bind"<p><input@bind="inputValue"/></p><p><input@bind="In 查看详情

如何从数据库 Blazor C# 中获取 Id 数据

】如何从数据库BlazorC#中获取Id数据【英文标题】：howtoGetbyIddatafromdatabaseBlazorC#【发布时间】：2021-11-0920:36:30【问题描述】：已经开始使用blazor服务器端进行crud从数据库获取数据我现在正在创建一个页面，我将在其中查看详细信... 查看详情

Blazor 中 RadzenDataList 中 RadzenTextBox 的 2 路绑定

】Blazor中RadzenDataList中RadzenTextBox的2路绑定【英文标题】：2waybindingonRadzenTextBoxinaRadzenDataListinBlazor【发布时间】：2020-06-1213:28:01【问题描述】：使用文本框创建可编辑的项目列表。所以iv\'e使用了RadzenDataList，将它绑定到一个字符... 查看详情

在 Blazor 中选择框绑定

】在Blazor中选择框绑定【英文标题】：Selectboxbindinginblazor【发布时间】：2020-02-1711:49:07【问题描述】：我正在尝试将模型中的CountryId绑定到Blazor中SelectList的选定项的值。所有Country项目都在一个类似CountryId,CountryName对象的列表中... 查看详情

C#：如何在 Blazor Wasm 托管中将动态 Razor 组件从服务器发送到客户端？

】C#：如何在BlazorWasm托管中将动态Razor组件从服务器发送到客户端？【英文标题】：C#:HowtosendDynamicRazorComponentsfromServertoClientinBlazorWasmHosted?【发布时间】：2021-02-0809:22:17【问题描述】：我想在Blazorwasm托管项目中呈现动态剃须刀组... 查看详情

如何在 Blazor 中使用 TagHelpers？

】如何在Blazor中使用TagHelpers？【英文标题】：HowtouseTagHelpersinBlazor?【发布时间】：2018-08-2914:34:40【问题描述】：我创建了一个标签助手，并希望在我的Blazor示例项目中使用它。但是，当我想使用标签助手时，编译器会抱怨：CS010... 查看详情

如何制作 Blazor 页面互斥锁

】如何制作Blazor页面互斥锁【英文标题】：HowtomakeaBlazorpagemutex【发布时间】：2021-12-0716:31:58【问题描述】：我想让我的Blazor应用程序的一个页面同时只能运行一次。这意味着当任何用户启动它的功能时（它在我们的数据库上工... 查看详情

在 Blazor 应用 Razor 页面的 InputText 中绑定类型双精度值

...。当我在InputText中绑定双精度值时，它给了我错误。我该如何解决这个问题？我不想使用InputNumber。查看详情

如何在 Visual Studio 中为迷宫设计项目制作 C# 中的图片框？

】如何在VisualStudio中为迷宫设计项目制作C#中的图片框？【英文标题】：HowtomakepictureboxinC#clickableinvisualStudioformazedesignproject?【发布时间】：2018-05-0802:06:35【问题描述】：我正在按照本教程使用表单模板和C#在VisualStudio中制作迷宫... 查看详情

在 Blazor 中使用基类和派生类绑定

】在Blazor中使用基类和派生类绑定【英文标题】：BindinginBlazorwithBase&Derivedclasses【发布时间】：2021-01-0318:18:11【问题描述】：我一直在想最好的方法来做到这一点，但我想不出我认为合适的解决方案。基本上我有以下几点：Bas... 查看详情

如何在现有的vue项目中嵌入blazor项目？(代码片段)

...官方只提供了angular和react俩种示例,所以本教程将来讲解如何在Vue的现有项目中使用，上期已经做好了react的教材！准备流程Vue 项目创建流程使用Vue创建一个Demo项目全部选择默认No即可然后项目名称就用demo了npminitvue@la... 查看详情

混合 Blazor 组件、DI 和 C# 8 可为空

】混合Blazor组件、DI和C#8可为空【英文标题】：MixingBlazorComponents,DIandC#8nullable【发布时间】：2021-02-2306:54:49【问题描述】：我在一个启用了nullable的项目中将.net5用于Blazor应用程序。它使用CodeBehind来创建Blazor组件。我想使用构造... 查看详情

如何在 Blazor 客户端应用程序中使用 Bootstrap 模式？

】如何在Blazor客户端应用程序中使用Bootstrap模式？【英文标题】：HowtouseBootstrapmodalinBlazorclientapp?【发布时间】：2020-04-0300:34:38【问题描述】：我正在尝试显示引导模式，然后绑定其按钮。但我无法通过显示模态的第一步。我正... 查看详情

如何在没有 Blazor Web 组件的情况下从 JavaScript 使用 C# WebAssemly

】如何在没有BlazorWeb组件的情况下从JavaScript使用C#WebAssemly【英文标题】：HowtouseC#WebAssemlyfromJavaScriptwithoutBlazorwebcomponents【发布时间】：2021-12-1300:23:23【问题描述】：要将C#编译为WebAssemly并与JS互操作，需要使用BlazorWebAssemblyASP.NET... 查看详情

Blazor：在使用 @bind 时如何在 <select> 中使用 onchange 事件？

】Blazor：在使用@bind时如何在<select>中使用onchange事件？【英文标题】：Blazor:Howtousetheonchangeeventin<select>whenusing@bindalso?【发布时间】：2020-01-2706:30:46【问题描述】：在<select>中进行选择后，我需要能够运行函数... 查看详情

如何在 Blazor 中以两种方式绑定级联值？

】如何在Blazor中以两种方式绑定级联值？【英文标题】：HowtotwowaybindacascadingvalueinBlazor?【发布时间】：2020-04-1108:11:54【问题描述】：我正在使用Blazor中的自定义模板，并试图找到一种方法来双向绑定CascadingValue或实现类似的东西... 查看详情

如何使用 C# 在 WinForm 中手动绑定到蓝牙低功耗设备？

】如何使用C#在WinForm中手动绑定到蓝牙低功耗设备？【英文标题】：HowtoBindmanuallytoaBlueToothLowEnergyDeviceinaWinFormusingC#?【发布时间】：2017-01-0123:54:47【问题描述】：这个问题的回答者大多是：WindowsUWPconnecttoBLEdeviceafterdiscovery目前，... 查看详情