共用方式為

共用 Web UI

  • 發行項

重要

此專案是實驗性版本。 我們希望您嘗試實驗性行動裝置 Blazor 系結，並在 提供意見反應 https://github.com/xamarin/MobileBlazorBindings 。

既然您已建置行動 Blazor 系結混合式應用程式，其中包含 Web UI (HTML 與 CSS) ，本逐步解說將示範如何與 Blazor Web 應用程式共用 Web UI，以便您可以在網路上提供相同的應用程式 UI。

在 Blazor 中，這是藉由將共用 UI 放在 Razor 類別庫專案中，或簡短的 RCL 來完成。 這可讓您將 Web UI 和程式碼封裝為可重複使用的實體，此實體可由方案中的多個專案參考，或透過將它散發為 NuGet 套件來更廣泛地共用。 行動裝置 Blazor 系結應用程式和 Blazor Web 應用程式可以參考 RCL 套件，以便共用完全相同的 UI。

在本逐步解說中，您會在 RCL 中建立可重複使用的Email顯示 UI，並在行動裝置 Blazor 系結混合式應用程式和 Blazor Web 應用程式中使用它。

注意

此頁面是 建置您的第一個混合式應用程式 逐步解說的接續。 建議您先完成該逐步解說，再繼續進行。

(RCL) 新增 Razor 類別庫

若要將 RCL 新增至您的應用程式：

  1. 以滑鼠右鍵按一下 方案總管 中的 [方案] 節點，然後選取 [新增/ 新增專案]。
  2. 找出 Razor 類別庫專案類型，然後按 [下一步]。
  3. 輸入專案的名稱，例如 EmailDisplayUI ，然後按一下 [建立]。
  4. 在下一個對話方塊中，確定已選取下列設定： .NET Core 3.1 、沒有驗證，也不支援頁面和檢視，然後按一下 [建立]。

新專案包含自己的 Razor 檔案，您將在其中撰寫 Web UI 和 wwwroot 資料夾，以包含屬於此元件的靜態資產。

將共用 Web UI 新增至 RCL

  1. 以滑鼠右鍵按一下 RCL 專案，然後選取 [新增/ 類別]

  2. 輸入名稱 EmailData.cs ，然後按一下 [新增]

  3. 將名為 Email.cs 的檔案新增至 RCL

  4. 使用下列 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; }
    }
}

  5. 將 Component1.razor 重新命名為 DisplayEmail.razor

  6. 使用下列 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; }
}

  7. 將 的內容 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，您需要從主要 UI 專案參考它，以便從中參考 UI。 您也需要從平臺特定專案參考它，以便偵測到靜態資產並包含在那些應用程式中。

在每個 FirstBlazorHybridApp、FirstBlazorHybridApp.Android、FirstBlazorHybridApp.iOS、FirstBlazorHybridApp.macOS 和 FirstBlazorHybridApp.Windows 專案中，執行下列動作：

  1. 以滑鼠右鍵按一下專案，然後選取 [新增/專案參考] 或 [新增/ 參考]
  2. 選取 EmailDisplayUI 並按一下 [確定]

現在您已準備好在專案中使用Email顯示 UI：

  1. 在 FirstBlazorHybridApp 專案中開啟檔案 WebUI/_Imports_.razor ，並將這一行新增至檔案結尾： @using EmailDisplayUI

  2. 在 FirstBlazorHybridApp 專案中開啟檔案 WebUI/Pages/Index.razor

  3. 將下列內容新增至檔案底部：

    <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!" };
}

  4. 將行 <link href="_content/EmailDisplayUI/styles.css" rel="stylesheet" /> 新增至 <head> 區段，以從每個平臺特定專案新增 CSS 的參考：

    • 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！

  1. 以滑鼠右鍵按一下方案總管中的方案節點，然後選取 [新增/ 新增專案]

  2. 選取 Blazor 應用程式範本，然後按 [下一步]

  3. 輸入名稱，例如 FirstBlazorWebApp ，然後按一下 [建立]

  4. 選取 [Blazor 伺服器應用程式] 選項、[ .NET Core 3.1 否驗證]、[適用于 HTTPS]，針對 Docker 選取 [否]，然後按一下 [建立]。

  5. 以滑鼠右鍵按一下 FirstBlazorWebApp 專案，然後選取 [新增/ 專案參考]

  6. EmailDisplayUI選取專案，然後按一下 [確定]

  7. 開啟檔案 Pages/_Host.cshtml ，並將這一行 <link href="_content/EmailDisplayUI/styles.css" rel="stylesheet" /> 新增至 <head> 區段

  8. 開啟檔案 _Imports.razor ，並將這一行新增至檔案結尾： @using EmailDisplayUI

  9. 開啟檔案 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!" };
}

  10. 若要執行專案，請以滑鼠右鍵按一下專案，選取 [設定為啟始專案]，然後加以執行。 這會啟動 ASP.NET Core Web 應用程式，並將預設網頁瀏覽器開啟至應用程式。

在網頁瀏覽器中看起來應該像這樣：

[ ![Email顯示在網頁瀏覽器中執行的 UI[ (./media/shared-web-ui/web-shared-ui-inline.png) [ (./media/shared-web-ui/web-shared-ui-expanded.png#lightbox)

其他資源

若要深入瞭解 Razor 類別庫，請參閱下列資源：

摘要

在本逐步解說中，您已建立 Blazor 混合式應用程式，該應用程式使用 Razor 類別庫 (RCL) ， (電子郵件顯示) 。 然後，您已使用該相同的 RCL 在 ASP.NET Core Web 應用程式中裝載 UI。

本逐步解說示範唯讀 UI 的範例，但相同的技術可用來建立具有任意複雜應用程式邏輯的任意複雜 UI，以符合任何應用程式需求。 您可以使用相依性插入 (DI) 等模式來建立平臺特定服務。