Entender os componentes do modelo

  • 4 minutos

Componentes de modelo, que podem ser reutilizados em vários aplicativos, fornecem uma base de layout e lógica testados e comprovados para personalização de elementos de interface do usuário. Os componentes de modelo aplicam um design padronizado em um aplicativo Web definindo elementos comuns e aplicando-os a todas as páginas. Os modelos podem simplificar as atualizações, como o rebranding, porque você faz modificações somente no local do modelo central.

Nesta unidade, você aprende o que são componentes de modelo e como incorporá-los em um aplicativo Blazor.

O tipo RenderFragment

Um componente de modelo fornece o layout e a lógica para um ou mais fragmentos da marcação HTML. O HTML é renderizado usando o contexto que o componente de modelo fornece. Um componente de modelo usa um objeto RenderFragment como o espaço reservado no qual a marcação será inserida em tempo de execução.

Um modelo é apenas um componente comum do Razor. Para usar um modelo, um componente de consumo faz referência a ele como faria com qualquer outro componente. O nome ChildContent é o padrão para um parâmetro RenderFragment. Você pode atribuir um nome diferente ao parâmetro, mas deve especificar esse nome quando a página de teste aplicar o modelo.

Parâmetros genéricos RenderFragment<T>

Por padrão, a classe RenderFragment atua como um espaço reservado para um bloco de marcação HTML. No entanto, o tipo genérico RenderFragment<TValue> é usado para renderizar outros tipos de conteúdo usando um parâmetro de tipo e fornecendo a lógica para manipular o tipo especificado no componente de modelo.

Por exemplo, suponha que você queira criar um modelo que exiba os itens em uma coleção. Você pode usar um loop foreach do C# para iterar pela coleção e exibir os itens encontrados. No entanto, a coleção pode conter dados de qualquer tipo, portanto, você precisa de uma maneira genérica de renderizar cada item.

Ao escrever um componente de modelo de tipo genérico, você precisa especificar o parâmetro de tipo no próprio componente de modelo e no componente de consumo do modelo. A lista a seguir representa características comuns de componentes de modelo de tipo genérico.

  • O parâmetro de tipo em um componente de modelo é introduzido usando a diretiva @typeparam. Um componente de modelo pode ter vários parâmetros de tipo, se necessário.
  • O modelo provavelmente definiria um parâmetro contendo uma coleção enumerável de objetos do tipo especificado pelo parâmetro de tipo.
  • O modelo também define um parâmetro ChildContent com base no tipo RenderFragment genérico que usa o mesmo parâmetro de tipo.

Para obter mais informações, confira Componentes com modelo do ASP.NET Core Blazor.

Verificar seus conhecimentos

1.

Que tipo de objeto de parâmetro você deve configurar em um componente Blazor para compartilhar um fragmento do HTML?

2.

Qual é o nome padrão do parâmetro que captura toda a marcação dentro de um componente sem exigir que uma marca adicional seja criada?