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

E GitHub