Ćwiczenie — dodawanie układu platformy Blazor w celu zmniejszenia duplikowania kodu

Ukończone

Po dodaniu stron do aplikacji Blazing Pizza możesz zauważyć, że skopiowaliśmy kod HTML nawigacji. Platforma Blazor ma wbudowaną obsługę tworzenia tego rodzaju szkieletów stron w jednym miejscu. Są one nazywane układami platformy Blazor.

Mamy teraz wiele zduplikowanych kodu HTML na kilku stronach. Następnie utworzysz układ dla całej aplikacji, aby można było dodać nawigację i informacje firmowe w jednym miejscu.

W tym ćwiczeniu utworzysz składnik MainLayout . Zobaczysz, jak można użyć tego układu dla określonych stron, a następnie ustawić go jako domyślny układ dla całej aplikacji.

Dodawanie składnika MainLayout

1. W programie Visual Studio Code w menu wybierz pozycję Plik>nowy plik tekstowy.

2. Wybierz ASP.NET Razor jako język.

3. Utwórz składnik układu i skopiuj kod HTML nawigacji z dowolnej strony.

   @inherits LayoutComponentBase
   
   <div id="app">
   
     <header class="top-bar">
       <a class="logo" href="">
         <img src="img/logo.svg" />
       </a>
   
       <NavLink href="" class="nav-tab" Match="NavLinkMatch.All">
         <img src="img/pizza-slice.svg" />
         <div>Get Pizza</div>
       </NavLink>
   
       <NavLink href="myorders" class="nav-tab">
         <img src="img/bike.svg" />
         <div>My Orders</div>
       </NavLink>
     </header>
   
     <div class="content">
       @Body
     </div>
   
     <footer>
       &copy; Blazing Pizza @DateTime.UtcNow.Year
     </footer>
   
   </div>
   

   Ten układ używa niektórych znaczników w pliku _Host.cshtml, dlatego musimy usunąć go z tego miejsca.

4. Zapisz zmiany, wybierając Ctrl+S.

5. W przypadku nazwy pliku użyj pliku MainLayout.razor. Upewnij się, że plik został zapisany w katalogu udostępnionym.

6. W Eksploratorze plików rozwiń węzeł Strony. Następnie wybierz plik _Host.cshtml.

7. Zmień elementy otaczające składnik aplikacji Blazor z tego kodu:

   <div id="app">
       <div class="content">
           <component type="typeof(App)" render-mode="ServerPrerendered" />
       </div>
   </div>
   

   Do tego kodu:

   <component type="typeof(App)" render-mode="ServerPrerendered" />
   

Używanie układu platformy Blazor w składniku strony

1. W Eksploratorze plików rozwiń węzeł Strony. Następnie wybierz pozycję Index.razor.

2. top-bar Usuń element div i w ramach @page dyrektywy dodaj odwołanie do nowego układu.

   @layout MainLayout
   

3. Usuńmy również stary <h1>Blazing Pizzas</h1> element. Nie jest już potrzebny, ponieważ w układzie znajduje się górny pasek.

4. W programie Visual Studio Code wybierz pozycję F5. Lub w menu Uruchom wybierz pozycję Rozpocznij debugowanie.

   

   Nowa strona główna ma stopkę praw autorskich dla tego roku, która zostanie automatycznie zaktualizowana. Aby zobaczyć, jak wygląda strona, która nie korzysta z tego układu, wybierz pozycję Moje zamówienia. Możesz też przejść do nieprawidłowej strony, takiej jak (http://localhost:5000/help). W tej chwili nie znaleziono naszej strony 404.

   

5. Aby zatrzymać aplikację, wybierz pozycję Shift + F5.

Aktualizowanie wszystkich stron do nowego układu

Teraz możesz dodać dyrektywę @layout MainLayout do wszystkich stron w aplikacji, ale platforma Blazor ma lepsze rozwiązanie. Najpierw usuń dyrektywę układu, która właśnie dodano do pliku Index.razor.

1. W składniku Index.razor usuń element @layout MainLayout.
2. W Eksploratorze plików rozwiń węzeł Strony. Następnie wybierz pozycję MyOrders.razor.
3. top-bar Usuń element div.
4. W Eksploratorze plików rozwiń węzeł Strony. Następnie wybierz kolejno pozycje OrderDetail.razor.
5. top-bar Usuń element div.
6. W Eksploratorze plików rozwiń węzeł Strony. Następnie wybierz pozycję Checkout.razor.
7. top-bar Usuń element div.

Składnik App.razor to miejsce, w którym można zmienić sposób kierowania stron, ale także poinformować platformę Blazor o użyciu układu domyślnego.

1. W Eksploratorze plików wybierz pozycję App.razor.

2. Dodaj deklarację DefaultLayout="typeof(MainLayout)" do elementu RouteView .

3. Dodaj Layout="typeof(MainLayout)" do widoku LayoutView.

4. Plik App.razor powinien teraz wyglądać następująco:

   <Router AppAssembly="typeof(Program).Assembly" Context="routeData">
       <Found>
           <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
       </Found>
       <NotFound>
           <LayoutView Layout="typeof(MainLayout)">
               <div class="main">Sorry, there's nothing at this address.</div>
           </LayoutView>
       </NotFound>
   </Router>
   

Testowanie nowego układu

1. W programie Visual Studio Code wybierz pozycję F5. Lub w menu Uruchom wybierz pozycję Rozpocznij debugowanie.

   

   Zaletą korzystania z układu domyślnego jest to, że można zastosować go do wszystkich stron i używać go do widoku układu dla nie odnalezionych stron.

2. Aby zatrzymać aplikację, wybierz pozycję Shift + F5.

Praca wymagana do wykonania dla aplikacji została zakończona w tym module. Jeśli chcesz zobaczyć, jak obsługiwać formularze i walidację, zakończ następny moduł w tej ścieżce szkoleniowej.