ASP .NET Core 3.1 - Upload e exibição de imagens

ASP .NET Core 3.1 - Upload e exibição de imagens - II

Hoje vamos recordar como enviar e exibir imagens para o servidor em uma aplicação ASP .NET Core na versão 3.1.

Continuando a primeira parte do artigo vamos criar as Views para exibir a lista de clientes e para incluir um novo cliente e sua imagem.

Criando as views Index e Novo

Vamos agora criar a view Index clicando com o botão direito do mouse sobre o método Index e a seguir selecionar as opções como mostra a figura:

E clique no botão Add.

No arquivo Index.cshtml gerado na pasta /Views/Clientes inclua o código a seguir:

@model IEnumerable<Aspnet_Upload1.Models.Cliente>

@{
ViewData["Title"] = "Index";
}

<h4 class="text-center text-uppercase">Lista de Clientes</h4>

<p>
   <a asp-action="Novo" class="btn btn-sm btn-primary rounded-0 text-uppercase">
    <i class="fas fa-plus-circle"></i>Novo Cliente</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(model => model.Nome)</th>
            <th>@Html.DisplayNameFor(model => model.Idade)</th>
            <th>@Html.DisplayNameFor(model => model.Email)</th>
        </tr>
    </thead>
    <tbody>
    @foreach (var item in Model)
    {
    <tr>
    <td>
    @if (@item.Foto != null || @item.Foto == "")
    {
    <img src="~/Imagens/@item.Foto" class="rounded-circle" height="40" width="40" asp-append-version="true"/>
     @item.Nome
    }
    else
   {
   <img src="~/Imagens/default.jpg" class="rounded-circle" height="40" width="40" asp-append-version="true"/>
   @item.Nome
    }
    </td>
    <td>@item.Idade</td>
     <td>@item.Email</td>
    </tr>
    }
</tbody>
</table>

Esta view vai exibir a lista de clientes e no botão - Novo Cliente - vai acionar a Action Novo (Get) permitindo incluir os dados do novo cliente.

Note que verificamos se existe uma imagem a ser exibida para o cliente selecionado e caso não exista estamos exibindo a imagem padrão : default.jpg.

Assim precisamos criar a view Novo.cshtml que será invocada.

Clique com o botão direito do mouse sobre o método Action Novo e a seguir selecionar as opções como mostra a figura:

Será criado o arquivo Novo.cshtml na pasta /Views/Clientes. A seguir inclua o código abaixo neste arquivo:

@model  Aspnet_Upload1.Models.ClienteViewModel
@{
    ViewData["Title"] = "Novo";
}

<div class="col-md-10 mx-auto py-4">
    <div class="card">
        <div class="card-header bg-primary text-uppercase text-white">
            <h4>Incluir Novo Cliente </h4>
        </div>
        <div class="card-body">
            <form enctype="multipart/form-data" asp-action="Novo">
                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            <label asp-for="Nome" class="control-label"></label>
                            <input asp-for="Nome" class="form-control" />
                            <span asp-validation-for="Nome" class="text-danger"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            <label asp-for="Idade" class="control-label"></label>
                            <input asp-for="Idade" class="form-control" />
                            <span asp-validation-for="Idade" class="text-danger"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            <label asp-for="Email" class="control-label"></label>
                            <input asp-for="Email" class="form-control" />
                            <span asp-validation-for="Email" class="text-danger"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            <label asp-for="Foto" class="control-label"></label>
                            <div class="custom-file">
                                <input asp-for="Foto" class="custom-file-input" id="customFile">
                                <label class="custom-file-label" for="customFile">Escolha a imagem</label>
                            </div>
                            <span asp-validation-for="Foto" class="text-danger"></span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <input type="submit" value="Submeter" class="btn btn-sm btn-primary rounded-0 text-uppercase" />
                    <a asp-action="Index" class="btn btn-sm btn-primary rounded-0 text-uppercase">
                    <i class="fas fa-fast-backward"></i> Retornar</a>
                </div>
            </form>
        </div>
    </div>
</div>

Nesta view podemos informar os dados do cliente e selecionar uma imagem.

Agora é só alegria...

Executando o projeto teremos o resultado a seguir:

Pegue o código completo do projeto aqui: Aspnet_Upload1.zip (sem as referências)

"Porque todos (os cristãos) devemos comparecer ante o tribunal de Cristo, para que cada um receba segundo o que tiver feito por meio do corpo, ou bem, ou mal."
2 Coríntios 5:10

Referências:

José Carlos Macoratti