Ejercicio: Adición de un diseño de Blazor para reducir la duplicación en el código

  • 4 minutos

Al agregar páginas a la aplicación Blazing Pizza, habrá observado que se ha copiado el código HTML de navegación. Blazor tiene compatibilidad integrada para crear este tipo de scaffolding de páginas en un solo lugar. Se denominan diseños de Blazor.

Ahora tenemos una gran cantidad de HTML duplicado en varias páginas. A continuación, creará un diseño para toda la aplicación de modo que pueda agregar información de navegación y empresa en un solo lugar.

En este ejercicio, creará un componente MainLayout. Verá cómo puede usar este diseño para páginas específicas y, a continuación, convertirlo en el diseño predeterminado para toda la aplicación.

Adición de un componente MainLayout

  1. En el menú de Visual Studio Code, seleccione Archivo>Nuevo archivo de texto.

  2. Seleccione ASP.NET Razor como lenguaje.

  3. Cree un componente de diseño y copie el código HTML de navegación desde cualquier página.

    @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>

    Este diseño ha usado parte del marcado del archivo _Host.cshtml, por lo que es necesario quitarlo de ahí.

  4. Presione Ctrl+S para guardar los cambios.

  5. Para el nombre de archivo, use MainLayout.razor. Asegúrese de guardar el archivo en el directorio Compartido.

  6. En el explorador de archivos, expanda Páginas. Después, seleccione _Host.cshtml.

  7. Cambie los elementos que rodean el componente de aplicación Blazor de este código:

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

    Por este código:

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

Uso de un diseño de Blazor en un componente de página

  1. En el explorador de archivos, expanda Páginas. Después, seleccione Index.razor.

  2. Elimine el elemento div top-bar y, en la directiva @page, agregue una referencia al nuevo diseño.

    @layout MainLayout

  3. También se eliminará el elemento <h1>Blazing Pizzas</h1> antiguo. Ya no es necesario porque hay una barra superior en el diseño.

  4. En Visual Studio Code, presione F5. O bien, en el menú Ejecutar, seleccione Iniciar depuración.

    Captura de pantalla en la que se muestra la nueva página principal con un diseño de Blazor.

    La nueva página principal tendrá un pie de página de copyright para este año que se actualiza automáticamente. Para ver el aspecto de una página que no usa este diseño, seleccione Mis pedidos. O bien, vaya a una página no válida como (http://localhost:5000/help). Por el momento, en 404 Página no encontrada no se usa la personalización de marca.

    Captura de pantalla de la página no encontrada dispersa.

  5. Presione Mayús + F5 para detener la aplicación.

Actualización de todas las páginas para usar el nuevo diseño

Ahora puede agregar la directiva @layout MainLayout a todas las páginas de nuestra aplicación. Blazor tiene una solución mejor. En primer lugar, elimine la directiva de diseño que acaba de agregar a Index.razor.

  1. En el componente Index.razor, elimine @layout MainLayout.
  2. En el explorador de archivos, expanda Páginas. Después, seleccione MyOrders.razor.
  3. Elimine el elemento div top-bar.
  4. En el explorador de archivos, expanda Páginas. Después, seleccione OrderDetail.razor.
  5. Elimine el elemento div top-bar.
  6. En el explorador de archivos, expanda Páginas. Después, seleccione Checkout.razor.
  7. Elimine el elemento div top-bar.

El componente App.razor es donde se puede cambiar cómo se enrutan las páginas, pero también se le indica a Blazor que use un diseño predeterminado.

  1. En el explorador de archivos, seleccione App.razor.

  2. Agregue la declaración DefaultLayout="typeof(MainLayout)" al elemento RouteView.

  3. Agregue Layout="typeof(MainLayout)" a LayoutView.

  4. App.razor ahora debería ser similar a este ejemplo:

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

Prueba del nuevo diseño

  1. En Visual Studio Code, presione F5. O bien, en el menú Ejecutar, seleccione Iniciar depuración.

    Captura de pantalla en la que se muestra la página no encontrado muy mejorada.

    La ventaja de usar un diseño predeterminado es que puede aplicarlo a todas las páginas y usarlo para la vista de diseño de las páginas no encontradas.

  2. Presione Mayús + F5 para detener la aplicación.

El trabajo que tenía que hacer para la aplicación ha finalizado en este módulo. Si quiere ver cómo controlar los formularios y la validación, complete el módulo siguiente de esta ruta de aprendizaje.