Guardar y mostrar imágenes en base de datos con SQLServer en ASP.Net con Paginas Razor (Solucionado)

Hola,

Realizo esta entrada debido a que actualmente en la universidad estoy realizando un proyecto final de programación en ASP.Net y en mi inteligente propuesta de proyecto, especifique que yo iba a almacenar en la base de datos y a mostrar visualmente una imagen por cada publicación que yo haga en pagina de creación generada con Razor.

Entonces me puse a investigar y a investigar, donde encontré videos que mostraban como hacerlo mediante HttpPostedFileBase, este HttpPostedFileBase pertenece al paquete System.web para mi desgracia este ya se encontraba deprecado, por lo cual investigando e investigando y preguntando me sugirieron usar IFormFile del paquete Microsoft.AspNetCore.Http el cual me toco instalar y para mi maravillosa sorpresa funciono, a continuación les compartó el proceso:

Guardar Imagen En Base De Datos Mediante El Create

1. En la base de datos, crear dos campos:

    [Imagen]           IMAGE          NOT NULL,

    [DatosImagen]      VARCHAR (1000) NULL,

El campo [Imagen] almacenará en la base de datos todos los byte de la imagen que se guardará desde la aplicación.

Estos campos son adicionales al Id (PK) de la tabla.

2. En el la clase que hace de Entity, se debe crear estos campos de la siguiente forma:

        public byte[] Imagen { get; set; }
        public string DatosImagen { get; set; }

3. Para guardarla, en la vista del Create.chtml, el campo para adicionar la imagen visualmente, será así:

<input type="file" asp-for="Upload" class="form-control" accept=".jpg" style="width : 190px" required />

Donde el tipo es file y el asp-for Upload, es la conexión con el controlador Create.chtml.cs de esta clase. Le estoy especificando que solo debe aceptar archivos .jpg, le estoy especificando el ancho de 190px y mediante el required le especifico que el campo es obligatorio.

4. En el archivo Create.chtml.cs se implementa el IFormFile para almacenar el archivo en la base de datos.

Dentro de la clase se crea una variable de tipo IFormFile, así:

public IFormFile Upload { get; set; }

Luego dentro del método public async Task<IActionResult> OnPostAsync(), se codifica lo siguiente:

           /** guardar imagen en BD **/

            var memoryStream = new MemoryStream();

            await Upload.CopyToAsync(memoryStream);

            Publicacion.Imagen = memoryStream.ToArray();

            /** fin guardar imagen en BD **/

Este bloque de código debe ir después de:

            if (!ModelState.IsValid)

            {

                return Page();

            }

Si este condicional (if) no se encuentra, pegar el código de guardar imagen recién empezando el método OnPostAsync().

Mostrar En La Vista La Imagen Que Almacene En La Base De Datos Mediante El Index

1. En el Index.chtml o la clase donde se vaya a mostrar la imagen, se debe crear el campo que mostrara la imagen, así:

<!-- mostrar correctamente la imagen -->
<td>
 <img style="width : 160px" src="@Html.DisplayFor(modelItem => item.DatosImagen)" />
</td>
<td>
   @Model.ImageDataUrl
</td>

En donde en la primera parte se define un tamaño de 160px, para la imagen de base de datos, luego se obtiene los bytes convertidos de la imagen, para mostrar.
En la segunda parte se obtienen los datos referentes a la imagen desde el controlador Index.chtml.cs.

2. En la clase Index.chtml.cs se crean los siguientes atributos:

        /** imagen de BD **/
        [BindProperty]
        public Publicacion Images { get; set; }
        public string ImageTitle { get => imageTitle; set => imageTitle = value; }
        public string ImageDataUrl { get => imageDataUrl; set => imageDataUrl = value; }

        private string imageTitle;
        private string imageDataUrl;

Esto dentro del constructor principal, después de la variable de contexto.

3. Luego en el método public async Task OnGetAsync(), antes del final de este método se agrega:

            /** imagen en BD **/
            foreach (Publicacion publicacion in Publicacion)
            {
                string imageBase64Data = Convert.ToBase64String(publicacion.Imagen);
                string imageDataURL = string.Format("data:image/jpg;base64,{0}", imageBase64Data);
                publicacion.DatosImagen = imageDataURL;
            }
            /** fin imagen BD **/

En donde en el foreach se crea la instancia del contexto, en este caso el contexto de la tabla que contiene la imagen es Publicacion.
En donde en el string imageBase64Data se obtiene el campo de la tabla del contexto de la base de datos y se convierte a Base64, el contexto es Publicacion.
Luego en el string imageDataURL se formatea el string como una imagen.
Finalmente este string resultante se setea (envía) en el campo DatosImagen del contexto, para que la vista lo pueda obtener y mostrar correctamente.

Listo eso es todo, cuando me desocupe de este semestre, les comparto el proyecto para que lo tengan y les quede mucho mas fácil entenderlo.
Cualquier duda me la escriben, no mas la vea con gusto la responderé.
Jejeje ojala y no noten el machetazo.
Gracias.