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

 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 segunda parte do artigo vamos continuar a criar as páginas Razor Pages do nosso projeto.

Criando a Razor Page para incluir um novo produto

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 Add, marque as opções conforme abaixo e clique no botão Add;

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

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

A lógica do código usado aqui é a mesma que já expliquei para o arquivo Index.cshtml.cs.

Para este código temos o método OnPost() que será acionado quando o usuário postar o formulário e neste caso iremos validar o modelo e chamar o método Add() do repositório para incluir o produto no banco de dados e a seguir exibir uma mensagem e redirecionar para a página Index.

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

@page
@model AspnCrudDapper.Pages.Produto.AddModel
@{
    ViewData["Title"] = "Adicionar Novo Produto";
}
<div>
    <div>
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title"><strong>Novo Produto</strong></h3>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-4 item_img">
                        <img src="~/images/addProduto.jpg" class="img-responsive">
                    </div>
                    <div class="col-md-8 item_content">
                        <form method="post">
                            <h4>
                                <span>Informe os dados do Produto!!!</span>
                            </h4>
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="panel">
                                            <div class="panel-body">
                                                <div class="col-md-12" style="margin-top:15px;">
                                                    <label asp-for="produto.Nome" style="font-weight:bold;"></label>
                                                    <input type='text' class='form-control' asp-for="produto.Nome" />
                                                    <span class="alert-danger" asp-validation-for="produto.Nome"></span>
                                                </div>
                                                <div class="col-md-12" style="margin-top:15px;">
                                                    <label asp-for="produto.Estoque" style="font-weight:bold;"></label>
                                                    <input type='text' class='form-control' asp-for="produto.Estoque" />
                                                    <span class="alert-danger" asp-validation-for="produto.Estoque"></span>
                                                </div>
                                                <div class="col-md-12" style="margin-top:15px;">
                                                    <label asp-for="produto.Preco" style="font-weight:bold;"></label>
                                                    <input type='text' class='form-control' asp-for="produto.Preco" />
                                                    <span class="alert-danger" asp-validation-for="produto.Preco"></span>
                                                </div>
                                                <div class="text-center col-md-12" style="margin-top:35px;">
                                                    <button class="btn btn-primary btn-sx" type="submit">
<i class="glyphicon glyphicon-plus"></i> Adicionar Produto</button>
                                                    <a class="btn btn-success btn-sx" asp-page="/Produto/Index">
<i class="glyphicon glyphicon-backward"></i> Lista de Produtos </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

A seguir vemos a página para incluir um novo produto.

Após informar os dados e clicar no botão - Adicionar Produto - veremos a página Index exibindo a mensagem de produto incluido e o novo produto exibido na lista de produtos:

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

"Há um só corpo e um só Espírito, como também fostes chamados em uma só esperança da vossa vocação;
Um só Senhor, uma só fé, um só batismo;
Um só Deus e Pai de todos, o qual é sobre todos, e por todos e em todos vós."
Efésios 4:4-6

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