ASP.NET Core  MVC - Usando Partial Views 

  Neste artigo vamos recordar o conceito de Partial Views e seu uso na ASP .NET Core.

Uma Partial View é um arquivo de marcação Razor(.cshtml) que renderiza a saída HTML dentro da saída processada de outro arquivo de marcação.

O termo Partial View  é usado durante o desenvolvimento de um aplicativo MVC, no qual os arquivos de marcação são chamados de Views, ou um aplicativo Razor Pages, no qual os arquivos de marcação são chamados de Pages.

As partial views são usadas para :

  1. Dividir arquivos de marcação grandes em componentes menores;
  2. Reduzir a duplicação de conteúdo de marcação comum em arquivos de marcação;

Elas não podem ser usadas para manter os elementos de layout comuns. Os elementos de layout comuns precisam ser especificados nos arquivos _Layout.cshtml.

Em um cenário onde temos uma lógica de renderização complexa ou a execução de código for requerida para renderizar a marcação não devemos usar as Partial Views mas sim o recurso View Component.

Alguns fatos importantes sobre as Partial Views:

Como usar uma Partial View

Dentro de um arquivo de marcação, existem várias maneiras de referenciar uma visão parcial, sendo que as recomendadas são:

  1. Usar a Partial Tag Helper (requer ASP .NET Core 2.1 ou superior)
  2. usar um HTML Helper Assíncrono

Neste artigo vamos criar um projeto MVC e mostrar como usar uma partial view.

recursos:

Criando o projeto ASP .NET Core MVC

Abra o Visual Studio 2019 Community e clique em New Project:

No menu File selecione Add -> New Project;

A seguir selecione :

Escolha o template ASP .NET Core Web Application e clique em Next :

A seguir informe o nome AspCore_PartialView1 e clique em Create.

Selecione .NET Core e ASP .NET Core 2.2 e o template Empty e clique em Create:

Abra o arquivo Startup do projeto e inclua o código a seguir:

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
namespace AspCore_PartialView1
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
        }
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller=Home}/{action=Index}/{id?}");
            });
        }
    }
}

Adicionamos o serviço MVC e definimos o roteamento padrão para o controlador HomeController na Action Index.

Agora vamos criar as pastas Controllers e ViewModels no projeto.

Na pasta ViewModels vamos definir os arquivos AlunoViewModel e EnderecoViewModel :

1-AlunoViewModel

    public class AlunoViewModel
    {
        public int Id { get; set; }
        public string Nome { get; set; }
        public string Email { get; set; }
        public EnderecoViewModel Endereco { get; set; }
    }

2-EnderecoViewModel

   public class EnderecoViewModel
    {
        public string Estado { get; set; }
        public string Municipio { get; set; }
        public string Local { get; set; }
    }

Iremos usar essas view models para exibir informações na View.

Na pasta Controllers inclua o controlador HomeController:

using AspCore_PartialView1.ViewModels;
using Microsoft.AspNetCore.Mvc;
namespace AspCore_PartialView1.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            var model = new AlunoViewModel
            {
                Id = 1,
                Nome = "Paulo Benitez",
                Email = "paulo@email.com",
                Endereco = new EnderecoViewModel
                {
                    Estado = "SP",
                    Municipio = "Lins",
                    Local = "Rua Projetada 100"
                }
            };
            return View(model);
        }
    }
}

Clique com o botão direito do mouse sobre o método Action Index e a seguir clique em Add View. A seguir informe os dados na janela Add MVC View conforme mostrado a seguir:

Inclua o código abaixo no arquivo Index.cshtml que foi criado na pasta /Views/Home :

@using AspCore_PartialView1.ViewModels
@model AlunoViewModel

     <div style="border: 1px solid black; margin: 5px">
    <strong>Detalhes dos Alunos (view Pai)</strong>

    <p>Nome: @Model.Nome</p>
    <p>Email: @Model.Email</p>

    @await Html.PartialAsync("_Endereco.cshtml", Model.Endereco)

</div>

Observe que estamos usando o HTML Helper assíncrono e informando o nome da partial view como _Endereco.cshtml e o modelo como Endereco.

No código acima PartialAsync retorna um tipo IHtmlContent encapsulado em um Task<TResult>. O método é referenciado prefixando a chamada usando o modificador await com um caractere @.

Vamos criar a partial view _Endereco.html na pasta /Views/Home da mesma forma que fizemos para a view Index. A diferença é que na janela Add MVC View vamos informar o nome _Endereco e selecionar : Create as partial view

A seguir inclua o código abaixo no arquivo _Endereco.cshtml :

@using AspCore_PartialView1.ViewModels
@model EnderecoViewModel
<div style="border: 1px dashed red; margin: 5px">
    <strong>Endereço (partial view)</strong>
    <hr />
    <p>Local: @Model.Local</p>
    <p>Municipio: @Model.Municipio</p>
    <p>Estado: @Model.Estado</p>
</div>

Ao final executando o projeto iremos obter o seguinte resultado:

Podemos obter o mesmo resultado invocando a partial View no arquivo Index.cshtml da seguinte forma:

Usando a Tag Helper Partial

Para poder usar as Tag Helpers no projeto vamos criar o arquivo _ViewImports.cshtml na pasta Views e a seguir incluir a diretiva @addTagHelper


@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
 

Após isso podemos definir o código abaixo no arquivo Index.cshtml para invocar a partial view _Endereco.html

@using AspCore_PartialView1.ViewModels
@model AlunoViewModel
    <div style="border: 1px solid black; margin: 5px">
        <strong>Detalhes dos Alunos (view Pai)</strong>
        <p>Nome: @Model.Nome</p>
        <p>Email: @Model.Email</p>
        <partial name="~/Views/Home/_Endereco.cshtml" for="Endereco" />
    </div>

Usamos a Tag Helper partial onde definimos:

- O atributo name que indica o nome ou o caminho da partial view a ser renderizada

- O atributo for que atribui um ModelExpression a ser avaliado em relação ao modelo atual. Um ModelExpression infere a sintaxe @Model.  Assim, for="Endereco" pode ser usado em vez de :  for="@ Model.Endereco".

Podemos usar também o atributo model que atribui uma instância do model para a partial view. Exemplo:


<partial name="_Produto"  model='new Produto { Id = 1, Nome = "Produto 1", Descricao = "Teste" }'>

Nota: Este atributo não pode ser usado com o atributo for.

Além disso também temos o atributo view-data que atribui um ViewDataDictionary para a partial view.

No exemplo a seguir temos que a coleção ViewData fica acessível para a partial view:


@{
    ViewData["IsNumberReadOnly"] = true;
}
<partial name="_ProdutoViewPartial" for="Produto" view-data="ViewData">

Neste código o valor da chave IsNumberReadOnly é definido como true e adicionado à coleção ViewData e a seguir o ViewData esta sendo disponibilizado para a partial View que vai poder tratar o valor recebido como mostra o exemplo a seguir para o arquivo _ProdutoViewPartial : 

@model Teste.Models.Produto
<div class="form-group">
    <label asp-for="Number"></label>

    @if ((bool)ViewData["IsNumberReadOnly"])
    {
        <input asp-for="Numero" type="number" class="form-control" readonly />
    }
    else
    {
        <input asp-for="Numero" type="number" class="form-control" />
    }

</div>
...

Pegue o código do projeto aqui : AspCore_PartialView1.zip

"E esta é a mensagem que dele(Jesus) ouvimos, e vos anunciamos: que Deus é luz, e não há nele trevas nenhumas."
1 João 1:5

Referências:

José Carlos Macoratti