ASP .NET Core MVC - CRUD básico com ADO .NET - II

 Neste artigo eu vou mostrar como fazer um CRUD básico usando ADO .NET em aplicações ASP .NET Core MVC.

Continuando a primeira parte do artigo vamos criar as Views do projeto.

Criando as view do projeto

Para criar as views do projeto vamos usar o Scaffolding e seguir o mesmo procedimento que será:

  • Clicar com o botão direito do mouse sobre o respectivo método do controlador FuncionarioController;

  • Clicar em Add View;

  • Aceitar o nome padrão da View;

  • Definir o Template;

  • Definir a classe de modelo;

  • Clicar no botão Add;

Após criar cada View vamos fazer os ajustes necessários e traduzir os textos.

Vamos então mostrar a criação de cada View usada no projeto.

1- View Index
 
@model IEnumerable<ApnCore_Crud.Models.Funcionario>
@{
    ViewData["Title"] = "Index";
}
<br />
<p>
    <a asp-action="Create">Criar Novo Funcionario</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.FuncionarioId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Nome)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Cidade)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Departamento)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Sexo)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.FuncionarioId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Nome)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Cidade)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Departamento)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Sexo)
            </td>
            <td>
                @Html.ActionLink("Editar", "Edit", new { id=item.FuncionarioId }) |
                @Html.ActionLink("Detalhes", "Details", new { id=item.FuncionarioId }) |
                @Html.ActionLink("Deletar", "Delete", new { id=item.FuncionarioId })
            </td>
        </tr>
}
    </tbody>
</table>

2- View Create
 
@model ApnCore_Crud.Models.Funcionario
@{
    ViewData["Title"] = "Create";
}
<br />
<h2>Criar Funcionário</h2>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>  
            <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 class="form-group">
                <label asp-for="Cidade" class="control-label"></label>
                <input asp-for="Cidade" class="form-control" />
                <span asp-validation-for="Cidade" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Departamento" class="control-label"></label>
                <input asp-for="Departamento" class="form-control" />
                <span asp-validation-for="Departamento" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Sexo" class="control-label"></label>
                <select asp-for="Sexo" class="form-control">
                    <option value="">-- Selecione o Sexo --</option>
                    <option value="Masculino">Masculino</option>
                    <option value="Feminino">Feminino</option>
                </select>
                <span asp-validation-for="Sexo" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Criar" class="btn btn-default" />
            </div>
        </form>
    </div>
</div>
<div>
    <a asp-action="Index">Retornar para Lista</a>
</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

3- View Edit
 
@model ApnCore_Crud.Models.Funcionario
@{
    ViewData["Title"] = "Edit";
}
<br />
<h2>Alterar dados</h2>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Edit">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <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 class="form-group">
                <label asp-for="Cidade" class="control-label"></label>
                <input asp-for="Cidade" class="form-control" />
                <span asp-validation-for="Cidade" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Departamento" class="control-label"></label>
                <input asp-for="Departamento" class="form-control" />
                <span asp-validation-for="Departamento" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Sexo" class="control-label"></label>
                <select asp-for="Sexo" class="form-control">
                    <option value="">-- Selecione o Sexo --</option>
                    <option value="Masculino">Masculino</option>
                    <option value="Feminino">Feminino</option>
                </select>
                <span asp-validation-for="Sexo" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Salvar dados" class="btn btn-default" />
            </div>
        </form>
    </div>
</div>
<div>
    <a asp-action="Index">Retornar para Lista</a>
</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

4- View Details
 
@model ApnCore_Crud.Models.Funcionario
@{
    ViewData["Title"] = "Details";
}
<br />
<h2>Detalhes</h2>
<div>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.FuncionarioId)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.FuncionarioId)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Nome)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Nome)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Cidade)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Cidade)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Departamento)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Departamento)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Sexo)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Sexo)
        </dd>
    </dl>
</div>
<div>
    @Html.ActionLink("Editar", "Edit", new { id = Model.FuncionarioId }) |
    <a asp-action="Index">Retornar para a Lista</a>
</div>

 

5- View Delete
 
@model ApnCore_Crud.Models.Funcionario
@{
    ViewData["Title"] = "Delete";
}
<br />
<h2>Deletar</h2>
<h3>Deseja deletar este funcionário ?</h3>
<div>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.FuncionarioId)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.FuncionarioId)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Nome)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Nome)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Cidade)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Cidade)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Departamento)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Departamento)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Sexo)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Sexo)
        </dd>
    </dl>
    
    <form asp-action="Delete">
        <input type="submit" value="Delete" class="btn btn-default" /> |
        <a asp-action="Index">Retorna para a Lista</a>
    </form>
</div>

Alterando o arquivo de leiaute

Vamos agora abrir o arquivo _Layout.cshml na pasta /Views/Shared e incluir o código em azul mostrado abaixo substituindo o código original:
   
...

 <div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-area="" asp-controller="Funcionario" asp-action="Index">Funcionarios</a></li>
</ul>
</div>

...

Agora vamos alterar o código da view Index.cshtml da pasta Views/Home :

@{
ViewData["Title"] = "Home Page";
}
<h1>ASP .NET Core com ADO .NET</h1>
 

Agora é só alegria...

Executando projeto iremos obter o seguinte resultado:

Pegue o código do projeto aqui:    ApnCore_Crud.zip

'(Disse Jesus) - Nisto todos conhecerão que sois meus discípulos, se vos amardes uns aos outros.'
João 13:35
 

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