ASP.NET Core - CRUD com Master-Detail - IV

  Hoje vamos iniciar uma série de artigos onde veremos como realizar as operações CRUD em um contexto mestre-detalhes em uma aplicação ASP.NET Core.

Continuando a terceira parte do artigo vamos criar as views para definir a interface com o usuário exibindo os times e membros.

Criando as views Main, _Times e _Membros

Já criamos os controllers TimesController e MembrosController e seus métodos Action e agora vamos criar as views relacionadas com cada método Action.

Vamos criar as views Main.cshtml, _Times.cshtml e _Membros.cshtml na pasta /Views/Shared do projeto.

Iniciando com a view Main.cshtml:

@model MasterDetailViewModel<html>
<body>
  <partial name="_Times" model="@Model" />
<br />
<br />
  <partial name="_Membros" model="@Model" />
<br />
<br />
</body>
</html>

A diretiva @model especifica a classe MasterDetailViewModel como o modelo para view Main. Todas as Actions dos controllers TimesController e MembrosController passam um objeto MasterDetailViewModel para a view Main.

A seguir o código renderiza  a view parcial _Times e _Membros, de modo que a grade principal seja exibida na parte superior, seguida pela grade de detalhes. Também passamos o objeto Model para essas views parciais  usando a propriedade model da tag helper <partial>.

A view parcial _Times.cshtml tem o seguinte código:

@using TimesMasterDetail.Entities;
@model MasterDetailViewModel
<h1>Lista de Times</h1>
<form method="post">
    <input type="submit"
           value="Inserir Time"
           asp-controller="Times"
           asp-action="InsertEntry" />
    <br /><br />
    <table border="1" cellpadding="10">
        <tr>
            <th>Time ID</th>
            <th>Nome</th>
            <th>Descrição</th>
            <th colspan="2"></th>
        </tr>
        @foreach (var item in Model.Times)
        {
            if (Model.SelectedTime != null)
            {
                if (item.TimeId == Model.SelectedTime.TimeId)
                {
                    @:<tr class="SelectedRow">
                }
                else
                {
                    @:<tr>
                }
                }
            else
            {
                @:<tr>
            }
                <td>@item.TimeId</td>
                <td>@item.Nome</td>
                <td>@item.Descricao</td>
                <td>
                    <input type="submit"
                           value="Gerenciar Time"
                           asp-controller="Times"
                           asp-action="Select"
                           asp-route-timeid="@item.TimeId" />
                </td>
                <td>
                    <input type="submit"
                           value="Gerenciar Membros"
                           asp-controller="Membros"
                           asp-action="List"
                           asp-route-timeid="@item.TimeId" />
                </td>
            @:</tr>
        }
    </table>
</form>
<br /><br />
@{
    if (Model.EntradaDados == EntradaDados.Times)
    {
        if (Model.SelectedTime != null)
        {
            if (Model.ModoExibicao == ModoExibicao.Read)
            {
                await Html.RenderPartialAsync("_ExibirTime", Model.SelectedTime);
            }
            if (Model.ModoExibicao == ModoExibicao.Update)
            {
                await Html.RenderPartialAsync("_AtualizarTime", Model.SelectedTime);
            }
        }
        if (Model.ModoExibicao == ModoExibicao.Insert)
        {
            await Html.RenderPartialAsync("_InserirTime", new Time());
        }
    }
}

A partial view  _Times recebe o objeto de modelo MasterDetailViewModel que você passou para a view Main. Observe que a tag helper <form> não especifica nenhum controlador ou ação. Isso porque com base no botão clicado pelo usuário (Inserir, Editar, Salvar etc.) a Action vai mudar. Portanto, configuramos o controlador a Action nos botões de envio em vez de fazer isso no elemento de formulário.

O bloco de código abaixo da tabela e do formulário exibe um registro de time para o time selecionado (se houver). Ele usa a propriedade EntradaDados para decidir como o registro do time deve ser exibido. Dependendo do valor de EntradaDados , renderizamos as views partiais  _ExibirTime, _InserirTime ou _AtualizarTime. Criaremos essas partial views mais adiante nesta série de artigos.

Vamos criar agora a partial view _Membros.cshtml na pasta Shared com o seguinte código:

@using TimesMasterDetail.Entities;
@model MasterDetailViewModel
@{
    if (Model.EntradaDados == EntradaDados.Membros)
    {
        if (Model.SelectedTime != null)
        {
            <h2>Lista de Membros : @Model.SelectedTime.Nome</h2>
            <form method="post">
                <input type="submit"
                       value="Inserir Membro"
                       asp-controller="Membros"
                       asp-action="InsertEntry" 
                       asp-route-timeId="@Model.SelectedTime.TimeId"/>
                <br /><br />
                      <table border="1" cellpadding="10">
                          <tr>
                              <th>Time</th>
                              <th>Membro</th>
                              <th>Nome</th>
                              <th>Email</th>
                              <th colspan="2"></th>
                          </tr>
                          @foreach (var item in Model.SelectedTime.Membros)
                          {
                              if (Model.SelectedMembro != null)
                              {
                                  if (item.MembroId == Model.SelectedMembro.MembroId)
                                  {
                                      @:<tr class="SelectedRow">
                                    }
                                    else
                                    {
                                        @:<tr>
                                    }
                                }
                                else
                                {
                                    @:<tr>
                                }
                                  <td>@item.TimeId</td>
                                  <td>@item.MembroId</td>
                                  <td>@item.Nome</td>
                                  <td>@item.Email</td>
                                  <td>
                           <input type="submit"
                           value="Gerenciar Membro"
                           asp-controller="Membros"
                           asp-action="Select"
                           asp-route-timeId="@item.TimeId"
                           asp-route-membroId="@item.MembroId"/>
                                  </td>
                              @:</tr>
                          }
                      </table>
            </form>
        }

        if (Model.SelectedMembro != null)
        {
            if (Model.ModoExibicao == ModoExibicao.Read)
            {
                await Html.RenderPartialAsync("_ExibirMembro", Model.SelectedMembro);
            }
            if (Model.ModoExibicao == ModoExibicao.Update)
            {
                await Html.RenderPartialAsync("_AtualizarMembro", Model.SelectedMembro);
            }
        }
        if (Model.ModoExibicao == ModoExibicao.Insert)
        {
            await Html.RenderPartialAsync("_InserirMembro", new Membro()
            { 
                TimeId = Model.SelectedTime.TimeId 
            });
        }
    }
}

O comportamento desta view é idêntica a view anterior atuando na exibição dos membros. Neste momento podemos exibir a lista de times e de seus membros:

Na próxima parte vamos continuar focando na criação das views para criar a interface com o usuário em nosso projeto.

"No último dia, o mais importante da festa, Jesus se levantou e disse em alta voz: “Quem tem sede, venha a mim e beba!"
João 7:27

Referências:

José Carlos Macoratti