Curso .NET Core en C# - 30.Entity Framework: Guardamos imágenes

30.Entity Framework: Guardamos imágenes 

• Hola a todos. En este curso, analizaremos todos los conceptos básicos, intermedios y avanzados de ASP.NET Core que nos ayudan a crear aplicaciones web basadas en datos.Al final de este curso, podremos realizar todas las operaciones de un CRUD, es decir, crear, leer, actualizar y eliminar datos  utilizando SQL Server como nuestra base de datos. 

• En este vídeo veremos cómo cargar una imagen usando ASP.NET Core MVC con un ejemplo.El control lo añadiremos en el formualrio de creación de amigos. Lo primero que debemos hacer es preparar nuestra BBDD para almacenar este valor. Para ello preparamos nuestro modelo.Para poder almacenar la Ruta de la foto del nuevo amigo, agregamos la propiedad rutaFoto a la clase Amigo:

             public string rutaFoto { get; set; }

• Para poder actualizar nuestra BBDD vía E.Framework agregamos una nueva migración:
• Add-Migration AddRutaFotoAmigo
• Actualizamos la BBDD: Update-Database
• Para poder guardar la imagen creamos una nueva clase para ello:

using Microsoft.AspNetCore.Http;

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

using System.Linq;

using System.Threading.Tasks;

namespace Ejemplo1.Models

{

    public class CrearAmigoModelo

    {

        [Required(ErrorMessage = "Obligatorio"), MaxLength(100, ErrorMessage = "No más de 100 carácteres")]

        public string Nombre { get; set; }

        [Required(ErrorMessage = "Obligatorio")]

        [Display(Name = "Email")]

        [RegularExpression(@"^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$", ErrorMessage = "Formato incorrecto")]

        public string Email { get; set; }

        [Required(ErrorMessage = "Debe seleccionar una ciudad")]

        public Provincia? Ciudad { get; set; }

        public IFormFile Foto { get; set; }

    }

}

• Además necesitamos modificar la vista Create.cshtml para que este vinculado a la nueva clase que acabamos de crear en nuestro modelo y añadimos el nuevo control para seleccionar la imagen:

      <div class="form-group row">

            <label asp-for="Foto" class="col-sm-2 col-form-label"></label>

            <div class="col-sm-10">

                <div class="custom-file">

                    <input asp-for="Foto" class="form-control custom-file-input">

                    <label class="custom-file-label">Selecciona un fichero</label>

                </div>

            </div>

        </div>

        @section Scripts {

            <script>

            $(document).ready(function () {

                $('.custom-file-input').on("change", function () {

                    var fileName = $(this).val().split("\\").pop();

                    $(this).next('.custom-file-label').html(fileName);

                });

            });

            </script>

        }

• En el vídeo podemos ver esto con más detalle: