ASP .NET MVC 5 - Salvando e Exibindo imagens do banco de dados - II

 Neste tutorial vou mostrar como podemos enviar e salvar imagens em um banco de dados e também como exibir essas imagens em uma aplicação ASP .NET MVC 5.

Continuando a primeira parte do artigo vamos agora definir a Action e a View para incluir produtos com imagens.

Recursos Usados:

Incluindo um novo Produto

Para incluir um novo produto vamos definir os métodos Action Create(GET/POST) no controlador ProdutosController:

public ActionResult Create()
        {
            ViewBag.Categorias = db.Categorias;
            var model = new ProdutoViewModel();
            return View(model);
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(ProdutoViewModel model)
        {
            var imageTypes = new string[]{
                    "image/gif",
                    "image/jpeg",
                    "image/pjpeg",
                    "image/png"
                };
            if (model.ImageUpload == null || model.ImageUpload.ContentLength == 0)
            {
                ModelState.AddModelError("ImageUpload", "Este campo é obrigatório");
            }
            else if (!imageTypes.Contains(model.ImageUpload.ContentType))
            {
                ModelState.AddModelError("ImageUpload", "Escolha uma iamgem GIF, JPG ou PNG.");
            }

            if (ModelState.IsValid)
            {
                var produto = new Produto();
                produto.Nome = model.Nome;
                produto.Preco = model.Preco;
                produto.Estoque = model.Estoque;
                produto.Descricao = model.Descricao;
                produto.CategoriaId = model.CategoriaId;

                //lemos a imagem e a seguir os bytes armazenados
                using (var binaryReader = new BinaryReader(model.ImageUpload.InputStream))
                    produto.Imagem = binaryReader.ReadBytes(model.ImageUpload.ContentLength);

                db.Produtos.Add(produto);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            // Se ocorrer um erro retorna para pagina
            ViewBag.Categories = db.Categorias;
            return View(model);
        }

O método Create(GET) apresenta a view Create onde o usuário informa os dados e a imagem do produto.

Estamos lendo todos os bytes usando BinaryReader a partir do arquivo enviado na propriedade model.ImageUpload.

Criando a view para incluir um produto com imagem

Clique com o botão direito sobre o método Action Create 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_DBImagem.Models.ProdutoViewModel

<h1>Novo Produto</h1>
<hr />
@using (Html.BeginForm("Create", "Produtos",
    FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()

<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", @placeholder = "Nome do produto" })
            @Html.ValidationMessageFor(m => m.Nome, "", new { @class = "text-danger" })
        </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", @placeholder = "Descrição do produto" })
            @Html.ValidationMessageFor(m => m.Descricao, "", new { @class = "text-danger" })
        </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", @placeholder = "Preço do produto" })
            @Html.ValidationMessageFor(m => m.Preco, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.Estoque, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Estoque,
                                         new { @class = "form-control", @placeholder = "Estoque do produto" })
            @Html.ValidationMessageFor(m => m.Estoque, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.CategoriaId, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(m => m.CategoriaId,
                                         new SelectList(ViewBag.Categorias, "CategoriaId", "CategoriaNome"),
                                         "Escolha a categoria", new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.CategoriaId, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.ImageUpload, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.ImageUpload, new { type = "file", @class = "form-control" })
            @Html.ValidationMessageFor(m => m.ImageUpload, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Salvar Produto" class="btn btn-success" />
            @Html.ActionLink("Cancelar", "Index", null, new { @class = "btn btn-danger" })
        </div>
    </div>
</div>
}
<div>
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

No código desta View usamos a view model ProdutoViewModel para inserir as informações do produto com sua imagem.

Executando o projeto iremos obter:

1- Após clicar no botão - Incluir Novo Produto - veremos página abaixo onde informamos os dados e a imagem do novo produto:

Clicando no botão Salvar Produto teremos a exibição dos dados e da imagem:

A edição, exclusão e exibição dos detalhes segue a mesma lógica:  Criar os métodos Actions e as respectivas views.

Pegue o projeto completo aqui:  Mvc_DBImagem.zip  (sem as referências)

"Portanto, agora nenhuma condenação há para os que estão em Cristo Jesus, que não andam segundo a carne, mas segundo o Espírito."
 Romanos 8:1

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