ASP .NET MVC 5 - Cadastro de Produtos (com imagem) - III

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

Vamos continuar a segunda parte do artigo e implementar a exclusão e a visualização de detalhes dos produtos.

Recursos Usados:

Deletando um produto

Para deletar um produto vamos definir os métodos Action Delete(GET/POST) no controlador ProdutosController:

      // GET: Produtos/Delete/5
        public ActionResult Delete(int? id)
        {
            if (id == null)
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            Produto produto = db.Produtos.Find(id);
            if (produto == null)
            {
                return HttpNotFound();
            }
            ViewBag.Categoria = db.Categorias.Find(produto.CategoriaId).CategoriaNome;
            return View(produto);
        }
        // POST: Produtos/Delete/5
        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public ActionResult DeleteConfirmed(int id)
        {
            Produto produto = db.Produtos.Find(id);
            db.Produtos.Remove(produto);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

O método Delete(GET) apresenta a view Delete onde o usuário deve confirmar a exclusão do produto selecionado.

Observe que estamos usando o atributo ActionName para a Action DeleteConfirmed() que nos permite especificar um nome de Action diferente do nome do método usado.

Criando a view para deletar um produto

Clique com o botão direito sobre o método Action Delete 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 Mvc_Imagem.Models.Produto
@{
    ViewBag.Title = "Deletar";
}
<h2>Deletar Produto</h2>
<h3 class="text-danger">Deseja deletar este produto ?</h3>
<div class="form-horizontal">
    <div class="form-group">
        @Html.LabelFor(m => m.Nome, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Nome,
                                      new { @class = "form-control", @disabled = "disabled" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Descricao, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Descricao,
                                      new { @class = "form-control", @disabled = "disabled" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Preco, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Preco,
                          new { @class = "form-control", @disabled = "disabled" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Categoria.CategoriaNome, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.CategoriaId, ((String)ViewBag.Categoria),
                          new { @class = "form-control", @disabled = "disabled" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <img src="@Model.Imagem" alt="@Model.Nome image" class="img-thumbnail" />
        </div>
    </div>
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Deletar Produto" class="btn btn-danger" />
                @Html.ActionLink("Cancelar", "Index", null, new { @class = "btn btn-warning" })
            </div>
        </div>
    }
</div>

No código desta View usamos a view model Produto para exibir as informações do produto com sua imagem que desejamos deletar.

Executando o projeto iremos obter:

Ao selecionar um produto e clicar no link Deletar veremos a view Delete exibindo as informações do produto a excluir e solicitando a confirmação do usuário:

Vendo detalhes de um produto

Para ver detalhes de um produto vamos definir o método Action Details(GET) no controlador ProdutosController:

       // GET: Produtos/Details/5
        public ActionResult Details(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Produto produto = db.Produtos.Find(id);
            if (produto == null)
            {
                return HttpNotFound();
            }
            ViewBag.Categoria = db.Categorias.Find(produto.CategoriaId).CategoriaNome;
            return View(produto);
        }

A seguir crie a view Details.cshtml com o seguinte código :

@model Mvc_Imagem.Models.Produto
@{
    ViewBag.Title = "Detalhes";
}
<h2>Detalhes do Produto</h2>
<hr />
<div>
    <div class="form-horizontal">
        <div class="form-group">
            @Html.LabelFor(m => m.Nome, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(m => m.Nome,
                                   new { @class = "form-control", @disabled = "disabled" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.Preco, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(m => m.Preco,
                          new { @class = "form-control", @disabled = "disabled" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.Categoria.CategoriaNome, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(m => m.CategoriaId, ((String)ViewBag.Categoria),
                           new { @class = "form-control", @disabled = "disabled" })
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <img src="@Model.Imagem" alt="@Model.Nome image" class="img-thumbnail" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                @Html.ActionLink("Retornar", "Index", null, new { @class = "btn btn-primary" })
            </div>
        </div>
    </div>
</div

Executando o projeto e clicando no link Detalhes teremos o seguinte resultado:

Espiando o nosso banco de dados Estudo.mdf veremos as informações persistidas na tabela Produtos via Entity Framework conforme mostra a figura:

Note que as imagens estão armazenadas na pasta ProdutoImagens e somente o caminho é armazenado no banco de dados.

Pegue o código completo do projeto neste link :  Mvc_Imagem.zip (sem as referências)

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 ?

Referências:

José Carlos Macoratti