terça-feira, 20 de fevereiro de 2018

ASP.NET MVC com Entity, Identity e Migrações Parte 3 - Upload de ficheiros

Na terceira parte deste tutorial vamos adicionar dois controllers e dois models com a possibilidade de fazer o upload de ficheiros para o nosso site.

O model Room é muito simples:

 public class Room {
        [Key]
        public int nr { get; set; }

        [Required(ErrorMessage = "Deve indicar o piso do quarto")]
        public int piso { get; set; }

        [Required(ErrorMessage = "Deve indicar a lotação")]
        public int lotacao { get; set; }

        [Required(ErrorMessage = "Deve indicar o estado do quarto")]
        public bool estado { get; set; }

        [DataType(DataType.Currency)]
        [Required(ErrorMessage = "Deve indicar o preço por dia do quarto")]
        public decimal custo_dia { get; set; }
    }

Agora basta adicionar o controller com a Entity framework.

O Client model:

    public class Client {
        [Key]
        public int ClientId { get; set; }

        [Required(ErrorMessage = "Tem de indicar o nome do cliente")]
        [StringLength(50)]
        [MinLength(5, ErrorMessage = "O nome é muito pequeno")]
        public string nome { get; set; }

        [Required(ErrorMessage = "Tem de indicar a morada do cliente")]
        [StringLength(50)]
        [MinLength(5, ErrorMessage = "Morada muito pequena")]
        public string morada { get; set; }

        [Required(ErrorMessage = "Tem de indicar o código postal do cliente")]
        [StringLength(8)]
        [MinLength(7, ErrorMessage = "O código postal é muito pequeno")]
        [Display(Name = "Código Postal")]
        public string cp { get; set; }

        [DataType(DataType.EmailAddress)]
        public string email { get; set; }

        public string telefone { get; set; }

        [DataType(DataType.Date)]
        [Display(Name = "Data de Nascimento")]
        [Required(ErrorMessage = "Tem de indicar a data de nascimento do cliente")]
        public DateTime data_nascimento { get; set; }
    }

Mais uma vez utilizamos a Entity framework para adicionar o controller:

Para fazer o upload dos ficheiros precisamos de alterar a view create dos clientes assim:

        <div class="form-group">
            <input type="file" name="fotografia" id="fotografia" class="form-control" /><br />
        </div>

O web form também tem de ser alterado:

@using (Html.BeginForm("Create", "Clients", FormMethod.Post, new { enctype = "multipart/form-data" }))

Precisamos do multipart encoding para fazer o upload do ficheiro.

Para terminar temos de alterar a função que recebe o formulário quando é submetido:

 public ActionResult Create([Bind(Include = "ClientId,nome,morada,cp,email,telefone,data_nascimento")] Client client)
        {
            if (ModelState.IsValid)
            {
                db.Clients.Add(client);
                db.SaveChanges();
                //save the file
                HttpPostedFileBase fotografia = Request.Files["fotografia"];
                if (fotografia != null) {
                    string imagem = Server.MapPath("~/Images/") + client.ClientId.ToString() + ".jpg";
                    fotografia.SaveAs(imagem);
                }
                return RedirectToAction("Index");
            }

            return View(client);
        }

Não podemos nos esquecer de criar a pasta Images.

Para podermos ver as imagens enviadas temos de alterar a view index, adicionando uma coluna assim:

        <td>
            <img src="@Url.Content(String.Format("~/Images/{0}.jpg",item.ClientId))" width="100" />
        </td>

Isto tudo está disponível no Youtube


GitHub

Sem comentários:

Enviar um comentário