共享 Web UI

项目
08/22/2023

重要

此项目是一个实验性版本。我们希望你试用实验性移动 Blazor 绑定，并在中 https://github.com/xamarin/MobileBlazorBindings提供反馈。

现在，你已生成一个移动 Blazor Bindings 混合应用，该混合应用将 Web UI (HTML 与 CSS) 合并在一起，本演练将演示如何与 Blazor Web 应用共享 Web UI，以便在 Web 上提供相同的应用 UI。

在 Blazor 中，这是通过将共享 UI 放置在 Razor 类库项目中（简称 RCL）来完成的。这样，就可以将 Web UI 和代码打包为可重用的实体，该实体可由解决方案中的多个项目引用，或通过将其作为 NuGet 包分发来更广泛地共享。移动 Blazor 绑定应用和 Blazor Web 应用可以引用 RCL 包，以便它们共享完全相同的 UI。

在本演练中，你将在 RCL 中创建一个可重用Email显示 UI，并在 Mobile Blazor Binding 混合应用和 Blazor Web 应用中使用它。

注意

此页是生成第一个混合应用演练的延续。建议先完成该演练，然后再继续。

(RCL) 添加 Razor 类库

若要将 RCL 添加到应用，请执行以下操作：

右键单击解决方案资源管理器中的“解决方案”节点，然后选择“添加/新建项目”。
找到 Razor 类库项目类型，然后单击“下一步”。
输入项目的名称，例如 EmailDisplayUI ，然后单击“创建”。
在下一个对话框中，确保选择以下设置： .NET Core 3.1“无身份验证”，不支持页面和视图，然后单击“创建”。

新项目包含其自己的 Razor 文件，你将在其中创作 Web UI 和一个 wwwroot 文件夹，以包含属于此组件的静态资产。

将共享 Web UI 添加到 RCL

右键单击 RCL 项目，然后选择“添加”/“类”
输入名称 EmailData.cs ，然后单击“添加”
将名为 Email.cs 的文件添加到 RCL

将其内容替换为以下 C# 代码：

namespace EmailDisplayUI
{
    public class EmailData
    {
        public string From { get; set; }
        public string To { get; set; }
        public string Subject { get; set; }
        public bool IsImportant { get; set; }
        public string Body { get; set; }
    }
}

将 Component1.razor 重命名为 DisplayEmail.razor

将其内容替换为以下 Razor 标记：

<div class="emailDisplay">
    <div class="emailHeader">
        <div>
            <label>From:</label> @Email.From
        </div>
        <div>
            <label>To:</label> @Email.To
        </div>
        <div>
            <label>Priority:</label> @(Email.IsImportant ? "High" : "Normal")
        </div>
        <div>
            <label>Subject:</label> @Email.Subject
        </div>
    </div>
    <div class="emailBody">
        @Email.Body
    </div>
</div>

@code
{
    [Parameter] public EmailData Email { get; set; }
}

将的内容 wwwroot/styles.css 更改为以下内容：

label {
    font-weight: bold;
    font-style: italic;
}

.emailDisplay {
    background-image: url('background.png');
}

.emailHeader {
    border: 2px solid #808080;
    padding: 1em;
    margin: 1em 0;
}

.emailBody {
    border: 1px solid #808080;
    padding: 1em;
    margin: 1em 0;
}

引用 RCL

若要使用 RCL，需要从 main UI 项目中引用它，以便可以从它引用 UI。还需要从特定于平台的项目中引用它，以便检测到静态资产并将其包含在这些应用中。

在每个 FirstBlazorHybridApp、FirstBlazorHybridApp.Android、FirstBlazorHybridApp.iOS、FirstBlazorHybridApp.macOS 和 FirstBlazorHybridApp.Windows 项目中执行以下操作：

右键单击项目，然后选择“添加/项目引用”或“添加/引用”
选择 EmailDisplayUI 并单击“确定”

现在，你已准备好在项目中使用Email显示 UI：

在 FirstBlazorHybridApp 项目中，打开 WebUI/_Imports_.razor 文件并将此行添加到文件末尾： @using EmailDisplayUI
在 FirstBlazorHybridApp 项目中打开 WebUI/Pages/Index.razor 文件

将以下内容添加到文件底部：

<DisplayEmail Email="email" />

@code
{
    EmailData email = new EmailData { From="sender@example.com", To="recipient@example.com", IsImportant=true, Subject="Learn about Blazor", Body="Tutorials are wonderful!" };
}

通过将行 <link href="_content/EmailDisplayUI/styles.css" rel="stylesheet" /> 添加到节，从每个特定于平台的项目添加对 CSS 的 <head> 引用：
- Android：wwwroot/index.html
- iOS：Resources/wwwroot/index.html
- macOS：Resources/wwwroot/index.html
- Windows： wwwroot/index.html

运行应用以测试 UI

现在可以测试新 UI 了！右键单击任何 Android、iOS、macOS 或 Windows 项目，选择“设置为启动项目”，然后运行应用。你应会看到本机 UI 加载的 Web UI 下方，Web UI 应显示你创建的电子邮件显示 UI。

在 iOS 模拟器上，它应如下所示：

[ ![Email显示 iOS 模拟器中运行的 UI[ (./media/shared-web-ui/ios-shared-ui-inline.png) [ (./media/shared-web-ui/ios-shared-ui-expanded.png#lightbox)

添加 Blazor Web 项目

现在，你已准备好重复使用在 Web 应用中生成的 UI！

右键单击解决方案资源管理器中的解决方案节点，然后选择“添加”/“新建项目”
选择 Blazor 应用模板，然后单击“下一步”
输入名称，例如 FirstBlazorWebApp ，然后单击“创建”
选择“Blazor 服务器应用”选项、 .NET Core 3.1“无身份验证”、“是”（对于 HTTPS）和“否”（对于 Docker），然后单击“创建”。
右键单击 FirstBlazorWebApp 项目，然后选择“添加”/“项目引用”
选择项目并单击 EmailDisplayUI “确定”
打开文件， Pages/_Host.cshtml 并将行 <link href="_content/EmailDisplayUI/styles.css" rel="stylesheet" /> 添加到 <head> 节
打开文件， _Imports.razor 并将此行添加到文件末尾： @using EmailDisplayUI

打开文件， Pages/Index.razor 将以下内容添加到文件底部：

<DisplayEmail Email="email" />

@code
{
    EmailData email = new EmailData { From="sender@example.com", To="recipient@example.com", IsImportant=true, Subject="Learn about Blazor", Body="Tutorials are wonderful!" };
}

若要运行项目，请右键单击该项目，选择“设置为启动项目”，然后运行它。这将启动 ASP.NET Core Web 应用，并打开应用的默认 Web 浏览器。

在 Web 浏览器中，它应如下所示：

[ ![Email显示 Web 浏览器中运行的 UI[ (./media/shared-web-ui/web-shared-ui-inline.png) [ (./media/shared-web-ui/web-shared-ui-expanded.png#lightbox)

其他资源

若要详细了解 Razor 类库，检查以下资源：

总结

在本演练中，你创建了一个 Blazor 混合应用，该应用将 Razor 类库 (RCL) 用于部分 UI (电子邮件显示) 。然后，你使用同一 RCL 在 ASP.NET Core Web 应用程序中托管 UI。

本演练演示了一个只读 UI 示例，但使用相同的技术来创建具有任意复杂应用程序逻辑的任意复杂 UI，以满足任何应用程序要求。可以使用依赖项注入 (DI) 等模式来创建特定于平台的服务。