Udostępniony internetowy interfejs użytkownika

Ważne

Ten projekt jest wersją eksperymentalną. Mamy nadzieję, że wypróbujesz eksperymentalne powiązania platformy Blazor dla urządzeń przenośnych i przekażesz opinię na stronie https://github.com/xamarin/MobileBlazorBindings.

Teraz, po utworzeniu aplikacji hybrydowej Mobile Blazor Bindings, która zawiera internetowy interfejs użytkownika (HTML z css), w tym przewodniku pokazano, jak udostępnić internetowy interfejs użytkownika aplikacji Blazor za pomocą aplikacji internetowej Blazor, aby zapewnić ten sam interfejs użytkownika aplikacji w Internecie.

W programie Blazor jest to wykonywane przez umieszczenie udostępnionego interfejsu użytkownika w projekcie Biblioteki klas Razor lub listy RCL na krótko. Umożliwia to pakowanie internetowego interfejsu użytkownika i kodu jako jednostki wielokrotnego użytku, do których można odwoływać się przez wiele projektów w rozwiązaniu lub współużytkowanych w szerszym zakresie, rozpowszechniając go jako pakiet NuGet. Pakiet listy RCL można odwoływać się do aplikacji Mobile Blazor Bindings i aplikacji internetowej Blazor, aby współużytkować dokładnie ten sam interfejs użytkownika.

W tym przewodniku utworzysz interfejs użytkownika wyświetlania Email wielokrotnego użytku w liście RCL i użyjesz go w aplikacji hybrydowej Powiązania rozwiązania Blazor dla urządzeń przenośnych oraz w aplikacji internetowej Blazor.

Uwaga

Ta strona jest kontynuacją przewodnika Kompilowanie pierwszej aplikacji hybrydowej . Zalecamy ukończenie tego przewodnika przed kontynuowaniem.

Dodawanie biblioteki klas Razor (RCL)

Aby dodać listę RCL do aplikacji:

1. Kliknij prawym przyciskiem myszy węzeł Rozwiązanie w Eksplorator rozwiązań i wybierz pozycję Dodaj/Nowy projekt.
2. Znajdź typ projektu Biblioteka klas Razor i kliknij przycisk Dalej.
3. Wprowadź nazwę projektu, na przykład EmailDisplayUI i kliknij przycisk Utwórz.
4. W następnym oknie dialogowym upewnij się, że wybrano następujące ustawienia: .NET Core 3.1, Brak uwierzytelniania i brak obsługi stron i widoków, a następnie kliknij przycisk Utwórz.

Nowy projekt zawiera własne pliki Razor, w których utworzysz internetowy interfejs użytkownika i wwwroot folder zawierający statyczne zasoby, które są częścią tego składnika.

Dodawanie udostępnionego internetowego interfejsu użytkownika do listy RCL

1. Kliknij prawym przyciskiem myszy projekt listy RCL i wybierz polecenie Dodaj /Klasa

2. Wprowadź nazwę EmailData.cs i kliknij przycisk Dodaj

3. Dodawanie pliku o nazwie Email.cs do listy RCL

4. Zastąp jego zawartość następującym kodem w języku 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. Zmiana nazwy Component1.razor na DisplayEmail.razor

6. Zastąp jego zawartość następującym znacznikiem 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. Zmień zawartość wwwroot/styles.css na następującą:

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

Odwołanie do listy RCL

Aby użyć listy RCL, należy odwołać się do niej z głównego projektu interfejsu użytkownika, aby można było do niego odwoływać się do interfejsu użytkownika. Należy również odwołać się do niego z projektów specyficznych dla platformy, aby zasoby statyczne zostały wykryte i uwzględnione w tych aplikacjach.

W każdym z elementów FirstBlazorHybridApp, FirstBlazorHybridApp.Android, FirstBlazorHybridApp.iOS, FirstBlazorHybridApp.macOS i FirstBlazorHybridApp.Windows wykonaj następujące czynności:

1. Kliknij projekt prawym przyciskiem myszy i wybierz polecenie Dodaj /Odwołanie do projektu lub Dodaj / Odwołanie
2. Wybierz EmailDisplayUI i kliknij przycisk OK

Teraz możesz użyć interfejsu użytkownika wyświetlania Email w projekcie:

1. W projekcie FirstBlazorHybridApp otwórz WebUI/_Imports_.razor plik i dodaj ten wiersz na końcu pliku: @using EmailDisplayUI

2. W projekcie FirstBlazorHybridApp otwórz WebUI/Pages/Index.razor plik

3. Dodaj następującą zawartość do dołu pliku:

   <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. Dodaj odwołanie do arkusza CSS z każdego projektu specyficznego dla platformy, dodając wiersz <link href="_content/EmailDisplayUI/styles.css" rel="stylesheet" /> do <head> sekcji:

   • System Android: wwwroot/index.html
   • Ios: Resources/wwwroot/index.html
   • Macos: Resources/wwwroot/index.html
   • Windows: wwwroot/index.html

Uruchamianie aplikacji w celu przetestowania interfejsu użytkownika

Teraz możesz przetestować nowy interfejs użytkownika! Kliknij prawym przyciskiem myszy dowolne projekty systemu Android, iOS, macOS lub Windows, wybierz pozycję Ustaw jako projekt startowy i uruchom aplikację. Powinno zostać wyświetlone natywne obciążenie interfejsu użytkownika za pomocą internetowego interfejsu użytkownika poniżej, a internetowy interfejs użytkownika powinien pokazywać utworzony interfejs użytkownika wyświetlania wiadomości e-mail.

W symulatorze systemu iOS powinien wyglądać następująco:

[ ! [Email wyświetlanie interfejsu użytkownika uruchomionego w symulatorze systemu iOS[(./media/shared-web-ui/ios-shared-ui-inline.png) [(./media/shared-web-ui/ios-shared-ui-expanded.png#lightbox)

Dodawanie projektu internetowego platformy Blazor

Teraz możesz ponownie użyć interfejsu użytkownika utworzonego w aplikacji internetowej!

1. Kliknij prawym przyciskiem myszy węzeł rozwiązania w Eksplorator rozwiązań i wybierz pozycję Dodaj / Nowy projekt

2. Wybierz szablon aplikacji Blazor, a następnie kliknij przycisk Dalej

3. Wprowadź nazwę, na przykład FirstBlazorWebApp i kliknij przycisk Utwórz

4. Wybierz opcję Aplikacja serwera Blazor, .NET Core 3.1Bez uwierzytelniania, Tak dla protokołu HTTPS i Nie dla platformy Docker, a następnie kliknij przycisk Utwórz.

5. Kliknij prawym przyciskiem myszy projekt FirstBlazorWebApp i wybierz pozycję Dodaj / Dokumentacja projektu

6. EmailDisplayUI Wybierz projekt i kliknij przycisk OK

7. Pages/_Host.cshtml Otwórz plik i dodaj wiersz <link href="_content/EmailDisplayUI/styles.css" rel="stylesheet" /> do <head> sekcji

8. _Imports.razor Otwórz plik i dodaj ten wiersz na końcu pliku:@using EmailDisplayUI

9. Pages/Index.razor Otwórz plik i dodaj następującą zawartość do dołu pliku:

   <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. Aby uruchomić projekt, kliknij prawym przyciskiem myszy projekt, wybierz pozycję Ustaw jako projekt startowy i uruchom go. Spowoduje to uruchomienie ASP.NET Core aplikacji internetowej i otwarcie domyślnej przeglądarki internetowej w aplikacji.

Powinien wyglądać następująco w przeglądarce internetowej:

[ ! [Email wyświetlania interfejsu użytkownika uruchomionego w przeglądarce internetowej[(./media/shared-web-ui/web-shared-ui-inline.png) [(./media/shared-web-ui/web-shared-ui-expanded.png#lightbox)

Dodatkowe zasoby

Aby dowiedzieć się więcej na temat bibliotek klas Razor, zapoznaj się z następującymi zasobami:

• biblioteki klas ASP.NET Core Razor
• Tworzenie interfejsu użytkownika wielokrotnego użytku przy użyciu projektu biblioteki klas Razor w ASP.NET Core

Podsumowanie

W tym przewodniku utworzono aplikację hybrydową Platformy Blazor, która używa biblioteki klas Razor (RCL) dla części interfejsu użytkownika (wyświetlanej wiadomości e-mail). Następnie użyto tej samej listy RCL do hostowania interfejsu użytkownika w aplikacji internetowej ASP.NET Core.

W tym przewodniku przedstawiono przykład interfejsu użytkownika tylko do odczytu, ale te same techniki mogą służyć do tworzenia arbitralnie złożonego interfejsu użytkownika z dowolną złożoną logiką aplikacji w celu spełnienia wymagań aplikacji. Możesz użyć wzorców, takich jak wstrzykiwanie zależności (DI), aby tworzyć usługi specyficzne dla platformy.