将 Blazor HTML 标记部分转换为电子邮件正文的字符串

Question

我有一个简单的 Blazor 组件，它接受一些输入（一些对象列表和一些字符串）并将它们格式化为简单的 HTML 以供显示（从对象列表、简单文本等生成的表格） .).

此 HTML 是一份报告，旨在向应用程序中的用户显示并通过电子邮件发送给不同的人（通过 SendGrid）。为了兼容性，我们使电子邮件 HTML 尽可能简单。

该组件工作正常，但我不确定如何将组件的标记部分转换为简单的转义字符串 HTML，以便我可以将该字符串传递给 SendGrid 并发送电子邮件。

我知道 MarkupStrings，但我只是反向使用它们——编写一个包含 HTML 标签的字符串，该字符串将在我的应用程序中正确显示。我找不到按照我需要的方式进行转换的任何建议。

有没有什么简单的方法可以让组件将其所有标记写入一个字符串，以便我可以通过电子邮件将其发送出去？

或者，我是否最好使用静态方法编写一个 .cs 文件，该方法接受相关参数，将其呈现为 MarkupString，然后将字符串传递给 SendGrid 以用于电子邮件以及到用于应用内显示的 Blazor 组件？

Answer 1

Is there any simple way to have a component write all of its markup into a string so that I can email it out?

不，您的 C# 代码没有简单的方法来执行此操作 - 您可以使用 JS Interop 从 dom 获取呈现的 HTML，但没有内置任何内容。

Or, would I be better off writing a .cs file with a static method that takes in the parameters in question, renders it into a MarkupString, and then passes the string both to SendGrid for email and also to a Blazor component for in-app display?

这是一种可能性 - 我无法评论它对您的价值，但如果您正在渲染的组件是静态的，那么它是一种可行的技术，

Answer 2

最简单的方法是使用 JSInterop 检索浏览器生成的组件的 Html 标记。假设您已经定义了一个 child 组件，并且您想要检索其 html 源。你可以这样做：

定义 child...

SelectGender.razor

<div id="selectGender">
    <h1>Select Gender</h1>

    <select>
        @foreach (var gender in genders)
        {
            <option>@gender</option>

        }
    </select>
</div>

@code {

    private List<string> genders = new List<string> { "Male", "Female", "Other" };
    
}

用法

@page "/"

@inject IJSRuntime JSRuntime

    <div>@((MarkupString) html)</div>
  
<SelectGender />

<button @onclick="GetHtml">Get Html</button>



@code{
    
    private string html;


    protected async Task GetHtml()
    {
        html = await JSRuntime.InvokeAsync<string>("myJsFunctions.getHtml");

    }

}

_Host.cshtml

<script>

        window.myJsFunctions =
        {
            getHtml: function () {
                return document.getElementById("selectGender").innerHTML;
            }
        };
    </script>

将 Blazor HTML 标记部分转换为电子邮件正文的字符串

Convert Blazor HTML markup portion to string for email body

c#

blazor

blazor-server-side

SelectGender.razor

用法

_Host.cshtml