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

  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 quarta parte do artigo vamos criar as demais views para definir a interface com o usuário relacionadas as operações de incluir, alterar e editar de times.

Criando as views para o CRUD de times

Já criamos as views para exibir os times e membros e agora vamos criar as views relacionadas as operações CRUD.

Assim para o CRUD de times vamos criar as views a seguir na pasta /Views/Times :

  1. _ExibirTime
  2. _InserirTime
  3. _AtualizarTime

Iniciando com a view _ExibirTime:

@model Time
<h2>Editar Time : @Model.Nome</h2>
<form method="post">
    <table border="1" cellpadding="10">
        <tr>
            <td>Time ID :</td>
            <td>@Model.TimeId</td>
        </tr>
        <tr>
            <td>Nome :</td>
            <td>@Model.Nome</td>
        </tr>
        <tr>
            <td>Descrição :</td>
            <td>@Model.Descricao</td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit"
                       value="Edita"
                       asp-controller="Times"
                       asp-action="UpdateEntry"
                       asp-route-timeid="@Model.TimeId" />
                <input type="submit"
                       value="Deleta"
                       asp-controller="Times"
                       asp-action="Delete"
                       asp-route-timeId="@Model.TimeId" />
                <input type="submit"
                       value="Cancela"
                       asp-controller="Times"
                       asp-action="CancelSelection" />
            </td>
        </tr>
    </table>
</form>

A view _ExibirTime é renderizada usando a tag <form> com a seguinte aparência :

Como você pode ver, existem três botões na parte inferior: Edita, Deleta e Cancela.

O botão Edita envia o formulário para a action UpdateEntry() de TimesController. Também passamos o parâmetro de rota TimeId para a action UpdateEntry().

O botão Deleta envia o formulário para a action Delete() de TimesController. Também passamos o parâmetro de rota TimeId para a action Delete().

O botão Cancela envia o formulário para a action CancelSelection().

A seguir temos o código da partial view _InserirTime.cshtml criada na pasta /Views/Times:

@model Time
<h2>Novo Time</h2>
<form method="post">
    <table border="1" cellpadding="10">
        <tr>
            <td>Nome :</td>
            <td>
                <input type="text"
                       asp-for="Nome" />
            </td>
        </tr>
        <tr>
            <td>Descricão :</td>
            <td>
                <input type="text"
                       asp-for="Descricao" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit"
                       value="Salva"
                       asp-controller="Times"
                       asp-action="InsertSave" />
                <input type="submit"
                       value="Cancela"
                       asp-controller="Times"
                       asp-action="CancelEntry" />
            </td>
        </tr>
    </table>
</form>

Os botões Salva e Cancela irão acionar as action InsertSave e CancelEntry do controlador TimesController.

A seguir a view _AtualizarTime :

@model Time
<h2>Editar Time : @Model.Nome</h2>
<form method="post">
    <table border="1" cellpadding="10">
        <tr>
            <td>Time ID :</td>
            <td>
                <input type="text"
                       asp-for="TimeId" readonly />
            </td>
        </tr>
        <tr>
            <td>Nome :</td>
            <td>
                <input type="text"
                       asp-for="Nome" />
            </td>
        </tr>
        <tr>
            <td>Descrição :</td>
            <td>
                <input type="text"
                       asp-for="Descricao" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit"
                       value="Salva"
                       asp-controller="Times"
                       asp-action="UpdateSave"
                       asp-route-timeId="@Model.TimeId" />
                <input type="submit"
                       value="Cancela"
                       asp-controller="Times"
                       asp-action="CancelEntry"
                       asp-route-timeId="@Model.TimeId" />
            </td>
        </tr>
    </table>
</form>

Esta view exibe o registro do time selecionado para edição e possui dois botões - Salva e Cancela. Ao clicar no botão Salva iremos enviar o formulário para a action UpdateSave() de TimesController. Também passamos o parâmetro de rota TimeId para a action UpdateSave().

O botão Cancela envia o formulário para a action CancelEntry() passando o TimeId para a action.

Isso completa as partial views relacionadas ao gerenciamento de times.

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

"O meu mandamento é este: Que vos ameis uns aos outros, assim como eu vos amei."
João 15:12

Referências:

José Carlos Macoratti