.NET

.NET

ASP .NET MVC 5 – Cadastro de Produtos com imagem – Parte 01

8 mar, 2018
Publicidade

Neste artigo, vou mostrar como implementar um Cadastro de Produtos com imagem e realizar as operações de manutenção de produtos.

Se você está iniciando com a ASP .NET MVC 5, leia os artigos nas referências para se inteirar dos conceitos usados neste artigo.

Realizaremos as seguintes tarefas:

  1. Criar o banco de dados Estudo e as tabelas Produtos e Categorias
  2. Criar o projeto ASP .NET MVC 5 no VS 2017 Community
  3. Instalar o pacote para o Entity Framework 6.2
  4. Criar o modelo de domínio: Produto e Categoria
  5. Criar a view model ProdutoViewModel
  6. Criar o controlador ProdutosController
  7. Criar os métodos Action: Index, Create, Edit, Details e Delete
  8. Alterar o arquivo de layout _Layout.cshtml para exibir o menu para produtos
  9. Criar as respectivas views dos métodos Action

Usarei uma abordagem DataBase-First partindo de um banco de dados e tabelas já existentes e fazendo o mapeamento com o EF 6.2.

Vamos ao trabalho!

Recursos Usados:

Criando o banco de dados e as tabelas

Para criar o banco de dados e as tabelas, usarei o SQL Server Management Studio 2012 e o SQL Server 2012 Express, mas você pode usar qualquer outra versão superior a essa.

1 – Crie o banco de dados chamado Estudo.mdf.

USE [master]
GO
CREATE DATABASE Estudo

2 – Crie a tabela Categorias.

USE Estudo
GO
CREATE TABLE dbo.Categorias(
	CategoriaId int IDENTITY(1,1) NOT NULL,
	CategoriaNome nvarchar(100) NOT NULL,
 CONSTRAINT [PK_Categorias] PRIMARY KEY CLUSTERED 
(
	[CategoriaId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

3 – Crie a tabela Produtos.

USE Estudo
GO
CREATE TABLE dbo.Produtos(
	ProdutoId int IDENTITY(1,1) NOT NULL,
	Nome nvarchar(100) NOT NULL,
	Descricao nvarchar(150) NOT NULL,
	CategoriaId int NOT NULL,
	Preco decimal(18, 2) NOT NULL,
	Imagem nvarchar(250) NULL,
CONSTRAINT [PK_Produtos] PRIMARY KEY CLUSTERED 
(
	[ProdutoId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

3 – Defina o relacionamento entre Produtos e Categorias.

4 – Cadastre algumas categorias para serem exibidas.

Criando o projeto ASP .NET MVC 5

  • Abra o VS 2017 Community e crie um projeto usando o template Web-> ASP .NET Web Application (.NET Framework) e informe o nome Mvc_Imagem;
  • A seguir, marque o template MVC sem autenticação e clique em OK;

Será criado um projeto com toda a estrutura pronta para ser usada.

Antes de prosseguir, vamos criar uma pasta no projeto chamada ProdutoImagens onde vamos armazenar as imagens dos produtos.

No menu Project clique em New Folder e informe o nome ProdutoImagens. Em seguida, copie a imagem cadastro.jpg para esta pasta. Iremos exibir essa imagem na view Index.cshtml.

Incluindo a referência ao Entity Framework

Vamos incluir o pacote do EF 6.2 no projeto via Nuget: (Menu Tools->Manage Nuget Packages for Solution).

Clique em Browse, selecione o pacote e clique em Install:

Criando o modelo de domínio e a classe de Contexto

Na pasta Models do projeto vamos criar as classes Categoria e Produto que representam o nosso modelo de domínio e que serão mapeadas para as tabelas Categorias e Produtos via EF.

Vamos usar o recurso Data Annotations para definir a validação e formatação de dados e mensagens de erros.

1 – Classe Produto.

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
namespace Mvc_Imagem.Models
{
    [Table("Produtos")]
    public class Produto
    {
        public int ProdutoId { get; set; }

        [Required(ErrorMessage = "O nome do produto é obrigatório", AllowEmptyStrings = false)]
        public string Nome { get; set; }
        [Required(ErrorMessage = "A descrição do produto é obrigatória", AllowEmptyStrings = false)]
        public string Descricao { get; set; }
        [Required(ErrorMessage = "Informe o preço do produto", AllowEmptyStrings = false)]
        [DisplayFormat(DataFormatString = "{0:C2}", ApplyFormatInEditMode = true)]
        public decimal Preco { get; set; }
        public string Imagem { get; set; }
        public int CategoriaId { get; set; }
        public virtual Categoria Categoria { get; set; }
    }
}

2 – Classe Categoria.

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
namespace Mvc_Imagem.Models
{
    [Table("Categorias")]
    public class Categoria
    {
        public int CategoriaId { get; set; }
        [Display(Name = "Nome da Categoria")]
        public String CategoriaNome { get; set; }

        public List<Produto> Produtos { get; set; }
    }
}

3 – Classe de contexto ProdutoDbContext.

using System.Data.Entity;
namespace Mvc_Imagem.Models
{
    public class ProdutoDbContext : DbContext
    {
        public DbSet<Produto> Produtos { get; set; }
        public DbSet<Categoria> Categorias { get; set; }
    }
}

A classe de contexto indica ao EF o mapeamento existente e permite o acesso às tabelas do banco de dados.

Definindo a string de conexão no arquivo web.config

Precisamos definir a string de conexão no arquivo web.config para informar ao EF onde está o banco de dados.

Abra o arquivo Web.Config do projeto e inclua o código abaixo:

...
<connectionStrings>
   <add name="ProdutoDbContext" connectionString="Data Source=.\;Initial Catalog=Estudo;Integrated Security=True" providerName="System.Data.SqlClient"/>
</connectionStrings>
...

Observe que o nome da string de conexão é o mesmo que o nome da nossa classe de Contexto: ProdutoDbContext.

Criando a view Modelo ProdutoViewModel

Para realizar a inclusão de produtos, vamos definir uma view model representada pela classe ProdutoViewModel na pasta Models:

using System;
using System.ComponentModel.DataAnnotations;
using System.Web;
namespace Mvc_Imagem.Models
{
    public class ProdutoViewModel
    {
        public Int32 ProdutoId { get; set; }
        [Required(ErrorMessage = "O nome do produto é obrigatório", AllowEmptyStrings = false)]
        [Display(Name = "Nome do Produto")]
        public String Nome { get; set; }
        [Required(ErrorMessage = "A descrição do produto é obrigatória", AllowEmptyStrings = false)]
        [Display(Name = "Descrição do Produto")]
        public String Descricao { get; set; }
        [Required(ErrorMessage = "Informe o preço do produto", AllowEmptyStrings = false)]
        [Display(Name = "Preço")]
        public Decimal Preco { get; set; }
        [Required(ErrorMessage = "Selecione uma categoria", AllowEmptyStrings = false)]
        [Display(Name = "Categoria")]
        public Int32 CategoriaId { get; set; }
        [Required]
        [DataType(DataType.Upload)]
        [Display(Name = "Imagem")]
        public HttpPostedFileBase ImageUpload { get; set; }      
    }
}

Vamos usar essa view model apenas na view Create, ajustando o arquivo de layout: _Layout.cshtml e a view Index.

Vamos ajustar o arquivo de layout usado pela aplicação para definir um menu com opções para acessar Produtos.

Abra o arquivo _Layout.cshtml na pasta /Views/Shared e inclua o código destacado em azul:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Cadastro de Produtos</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Cadastro de Produtos", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("Produtos","Index","Produtos")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>© @DateTime.Now.Year - Macoratti. net</p>
        </footer>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Abra agora o arquivo Index.cshtml na pasta Views/Home e altere o código deste arquivo conforme abaixo:

@{
    ViewBag.Title = "Home Page";
}
<div class="container">
    <div class="jumbotron">
        <h2>Cadastro de Produtos</h2>
    </div>
    <div>
        <img src="~/ProdutoImagens/cadastro.jpg" />
    </div>
</div>

Temos um jumbotron do bootstrap e a exibição da imagem do cadastro.

Criando o controlador ProdutosController

Vamos criar o controlador ProdutosController na pasta Controllers, onde vamos definir os métodos Action para exibir e realizar as operações CRUD.

  • Clique com o botão direito sobre a pasta Controllers, clique em Add e depois em Controller;
  • Selecione a opção MVC 5 Controller Empty do Scaffolding clique em Add e informe o nome ProdutosController e clique em Add;
  • Inclua o código abaixo neste controlador:
using Mvc_Imagem.Models;
using System;
using System.Drawing;
using System.Linq;
using System.Net;
using System.Web.Mvc;
namespace Mvc_Imagem.Controllers
{
    public class ProdutosController : Controller
    {
        ProdutoDbContext db;
        public ProdutosController()
        {
            db = new ProdutoDbContext();
        }
        // GET: Produtos
        public ActionResult Index()
        {
            var produtos = db.Produtos.ToList();
            return View(produtos);
        }
     }
}

Neste código criamos uma instância do contexto e obtemos todos os produtos no método Action Index repassando para a view Index.cshml

Criando a View para exibir os produtos

Vamos criar a View Index para exibir os produtos cadastrados.

  • Clique com o botão direito sobre o método Action Index do controlador ProdutosController e a seguir clique em Add View;
  • Aceite os valores definidos na janela Add View e clique em Add:

A seguir, inclua o código abaixo:

@model IEnumerable<Mvc_Imagem.Models.Produto>
@{
    ViewBag.Title = "Index";
}
<h2>Produtos</h2>
<p>
    @Html.ActionLink("Incluir Novo Produto","Create","Produtos", new { @class = "btn btn-success" })
</p>
<table class="table">
    <tr>
        <th>@Html.DisplayNameFor(model => model.Categoria.CategoriaNome)</th>
        <th>@Html.DisplayNameFor(model => model.Nome) </th>
        <th>@Html.DisplayNameFor(model => model.Descricao)</th>
        <th>@Html.DisplayNameFor(model => model.Preco)</th>
        <th></th>
    </tr>
@foreach (var item in Model) {
    <tr>
        <td>@Html.DisplayFor(modelItem => item.Categoria.CategoriaNome)</td>
        <td>@Html.DisplayFor(modelItem => item.Nome)</td>
        <td>@Html.DisplayFor(modelItem => item.Descricao)</td>
        <td>@Html.DisplayFor(modelItem => item.Preco)</td>
        <td>
            @Html.ActionLink("Editar", "Edit", new { id = item.ProdutoId }) |
            @Html.ActionLink("Detalhes", "Details", new { id = item.ProdutoId }) |
            @Html.ActionLink("Deletar", "Delete", new { id = item.ProdutoId })
        </td>
    </tr>
}
</table>

No código desta View usamos o model Produto e temos uma view fortemente tipada, onde exibimos os dados dos produtos.

O botão para incluir produtos actiona o método Action Create do controlador Produtos que iremos criar a seguir.

Agora é só alegria!

Executando o projeto teremos o seguinte resultado:

1 – A página inicial exibida pela view Index:

2 – Ao clicar no link Produtos teremos a exibição dos produtos:

Nesta página, temos o botão para incluir um produto e os links para editar, ver detalhes e deletar produtos.

Na próxima parte do artigo vamos implementar a inclusão e a edição de produtos.