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

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>

...