ASP .NET Core (Razor Page) - CRUD c/ Dapper e o padrão Repository - II

 Neste artigo veremos realizar um CRUD básico usando o micro ORM Dapper e o padrão Repository em uma aplicação ASP .NET Core Razor Page.       

Continuando a primeira parte do artigo vamos criar as páginas Razor Pages do nosso projeto.

Criando as Páginas Razor Pages do projeto

Vamos criar uma pasta chamada Produto dentro da pasta Pages do projeto e nesta pasta vamos incluir as views que iremos usar.

Vamos inicir criando a página para exibir uma lista de produtos.

1- Criando a Razor Page para exibir uma lista de produtos

Clique com o botão do mouse sobre a pasta Produto e a seguir clique em Add-> Razor Page;

Na janela Add Scaffold selecione Razor Page e clique em Add;

A seguir em Add Razor Page informe o nome Index, marque as opções conforme abaixo e clique no botão Add;

Serão criados na pasta Produto os arquivos Index.cshtml e seu code-behind Index.cshtml.cs.

Primeiro abra o arquivo code-behind Index.cshtml.cs e defina o código abaixo neste arquivo:

Por convenção, a classe PageModel é chamada <PageName>Model, no exemplo:  <Index>Model, e está no mesmo namespace da página.

A classe PageModel permite a separação da lógica de uma página de sua apresentação. Ela define manipuladores de página para requisições enviadas para a página e os dados usados ​​para renderizar a página. (Esta separação permite gerir dependências de páginas através da injeção de dependência e testar as páginas.)

Observe que no arquivo Index.cshtml.cs a classe IndexModel possui o método OnGet() que é o método padrão para operação GET. No código retornamos uma  lista de produtos que será executado assim que a página form aberta.

Realizamos a injeção de dependência injetando uma instância do nosso repositório para poder usar os métodos definidos e realizar as operações CRUD.

Observe que as propriedades listaProduto e produto utilizam o atributo [BindProperty] para ativar o model binding. O Model Binding, que já conhecemos do MVC, também funciona com a Razor Pages. Assim como os métodos Actions dos Controllers MVC, temos na Razor Pages os Handlers.

Usamos os Handlers ou manipuladores como métodos para lidar com solicitações HTTP (GET, POST, PUT, DELETE ...)

A página possui um método OnPostDelete, que é executado em requisições POST. Você pode adicionar métodos de manipulador para qualquer verbo HTTP.

O código em OnPostDelete é semelhante ao que você normalmente escreveria em um controlador. Aqui verificamos se o id é maior que zero e invocamos o método Delete() passando o id do produto.

Após o produto ser excluido com sucesso, o método do manipulador chama o método helper redirectToPage para retornar uma instância de RedirectToPageResult.

Aqui, RedirectToPage é um novo action result, semelhante ao RedirectToAction ou RedirectToRoute, mas personalizado para páginas. No código estamos redirecionando para a página Index da pasta Produto (/Produto/Index).

Agora vamos definir a nossa View no arquivo Index.cshtml usando o código a seguir:

@page
@model AspnCrudDapper.Pages.Produto.IndexModel
@{
    ViewData["Title"] = "Produtos";
}
<script>
    function macFunction(x) {
        $("#item_view").modal();
    };
    $(document).ready(function () {
        $("#success-alert").hide();
        $("#success-alert").fadeTo(2000, 500).slideUp(500, function () {
            $("#success-alert").slideUp(500);
        });
    });
</script>
<div class="container">
    <div class="mail-box">
        <aside class="lg-side">
            <div class="inbox-head">
                <h3>Produtos</h3>
            </div>
            <a class="btn btn-primary btn-sx pull-left" style="margin-top:20px;margin-bottom: 20px;" 
asp-page="/Produto/Add">
                <i class="glyphicon glyphicon-plus"></i> Adicionar Novo Produto
            </a>
            <br />
            @{
                if (!string.IsNullOrEmpty(Model.Message))
                {
                    <div class="alert alert-success" id="success-alert" style="margin-top: 40px;">
                        <button type="button" class="close" data-dismiss="alert">x</button>
                        <strong>@Model.Message ! </strong>
                    </div>
                }
            }
            <div class="inbox-body" style="margin-top:20px;">
                <div class="mail-option">
                    <table class="table table-inbox table-hover" style="border:2px solid black;">
                        <thead>
                            <tr class="unread">
                                <th class="col-sm-2 view-message  dont-show">ID</th>
                                <th class="view-message col-sm-3">NOME</th>
                                <th class="col-sm-2">ESTOQUE</th>
                                <th class="view-message  text-left col-sm-2">PREÇO</th>
                                <th class="col-sm-1">Comando</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model.listaProdutos)
                            {
                                <tr>
                                    <td onclick="macFunction(this)" class="view-message  dont-show">
<h5>@item.ProdutoId</h5></td>
                                    <td onclick="macFunction(this)" class="view-message">
<h5>@item.Nome</h5></td>
                                    <td onclick="macFunction(this)"><h4 style="margin-top: 5px;">
<span class="label label-success ">@item.Estoque</span></h4></td>
                                    <td onclick="macFunction(this)" class="view-message  text-left">
<h5>@string.Format("{0:C}", @item.Preco)</h5></td>
                                    <td>
                                        <form method="post">
                                            <span class="btn-group pull-right" style="margin-top: 5px">
                                                <a class="btn btn-warning btn-xs" asp-page="/Produto/Edit" 
asp-route-id="@item.ProdutoId" style="background-color: blueviolet; height: 29px; margin-top: -1px;">
                                                    <i class="glyphicon glyphicon-edit"></i>
                                                </a>
                                                <button type="submit" class="btn btn-danger btn-xs" asp-page-handler="Delete" 
asp-route-id="@item.ProdutoId" style="height: 27px; margin-top: 0px;"
                                                        onclick="return confirm('Deseja realmente excluir este produto?');">
                                                    <i class="glyphicon glyphicon-remove"></i>
                                                </button>
                                            </span>
                                        </form>
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </aside>
    </div>
</div>

Após fazer um ajuste na página _Layout.cshtml e na página Index.cshtml da pasta Pages ao executar  o projeto neste momento iremos obter:

1- A página incial do projeto

2- Clicando no link Produtos veremos a lista de produtos que definimos nos arquivos Index.cshtml e Index.cshtml.cs da pasta Produto:

Podemos já excluir um produto clicando no ícone respectivo ao produto e obteremos a mensagem para confirmar ou não a exclusão do produto:

Na próxima parte do artigo vamos continuar a criar as demais páginas Razor Pages.

"Jesus respondeu: Na verdade, na verdade te digo que aquele que não nascer da água e do Espírito, não pode entrar no reino de Deus."
João 3:5

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:

José Carlos Macoratti