Как вывести заголовок к изображению из БД

131

01 февраля 2021, 22:30

Всем доброго времени суток! Реализовал загрузку изображений в БД и вывод их во вью, но никак не могу решить проблему. При выгрузке titla'a к изображениям, над каждым изображением каждый заголовок пытается вывестись тоже в виде изображения. Прошу помочь мне разобраться с этим нюансом. Заранее благодарен за помощь! Так загружаю и вывожу изображения из БД на бэке.

using System;
using System.Collections;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Opafoto.Models;
namespace Opafoto.Controllers {
    //в этом контроллере реализован весь функционал по загрузке и выводу изображений
    public class FileUploadController : Controller {
        FileModel filemod = new FileModel();
        string connectionString = @"data source=(localdb)\MSSQLLocalDB;initial catalog=OpafotoDB;integrated security=True;
                MultipleActiveResultSets=True;App=EntityFramework";
        public IActionResult Index() {
            //вывод изображений из БД в указанную вью
            var model = FetchImageFromDB();
            return View(model);
        }
        [HttpPost]
        public async Task<IActionResult> UploadImage(IFormCollection form, string user_title) {
            filemod.Title = user_title;
            string storePath = "wwwroot/ImagesForPortfolio/";   //путь к папке с изображениями
            if (form.Files == null || form.Files[0].Length == 0)    
                return RedirectToAction("Index");
            //полный локальный путь к файлу включая папку проекта wwwroot
            var path = Path.Combine(
                        Directory.GetCurrentDirectory(), storePath,
                        form.Files[0].FileName);
            using (var stream = new FileStream(path, FileMode.Create)) {
                await form.Files[0].CopyToAsync(stream);
            }
            StoreInDB(storePath + form.Files[0].FileName, user_title);
            return RedirectToAction("Index");
        }
        public void StoreInDB(string path, string user_title) {
            filemod.Title = user_title;
            using (var con = new SqlConnection(connectionString)) {
                con.Open();
                //запись изображения в БД
                using (var com = new SqlCommand("INSERT INTO Images(TITLE, ImagePath) VALUES('" + user_title + "', '" + path + "')", con)) {
                    try {
                        com.ExecuteNonQuery();
                    }
                    catch (Exception ex) {
                        throw;
                    }
                }
            }
        }
        public List<string> FetchImageFromDB() {
            List<string> imagePath = new List<string>();
            using (var con = new SqlConnection(connectionString)) {
                con.Open();
                using (var com = new SqlCommand("SELECT TITLE, ImagePath FROM Images", con)) {
                    using (var reader = com.ExecuteReader()) {
                        if (reader.HasRows) {
                            while (reader.Read()) {
                                imagePath.Add(reader["TITLE"].ToString());
                                //filemod.Title = reader["TITLE"].ToString();
                                imagePath.Add(reader["ImagePath"].ToString());
                            }
                        }
                    }
                }
            }
            return imagePath;
        }

Так вывожу на фронте

@* выводим изображения *@
@model IEnumerable<string>
@*@model  Opafoto.Models.FileModel*@
@foreach (var item in Model) {
    <img src="@Url.Content(item.Replace("wwwroot","~"))" id="imgPortfolio" /> <br />
}

Для полноты картины прикладываю снимки экрана.

Answer 1

Данные в модель (List<string>) у вас заносятся вот так:

List<string> imagePath = new List<string>();
using (var com = new SqlCommand("SELECT TITLE, ImagePath FROM Images", con))
{
    ...
            while (reader.Read())
            {
                imagePath.Add(reader["TITLE"].ToString());
                imagePath.Add(reader["ImagePath"].ToString());
            }
    ...
}

То есть по две строки на каждый элемент.

Соответственно, выводить нужно итерируясь по коллекции с шагом два:

@model List<string>
@for (int i=0; i < Model.Count; i += 2) {
    <p>Model[i]</p>
    <img src="@Url.Content(Model[i + 1].Replace("wwwroot","~"))" id="imgPortfolio" /> <br />
}

Однако, это неправильно. Лучше сделать класс модели, которая будет содержать в себе заголовок и путь.

В коде есть упоминания класса FileModel - очевидно, это он и есть.

Допустим, он выглядит так:

class FileModel
{
    public string Title { get; set; }
    public string Path { get; set; }
}

Используем его:

List<FileModel> images = new List<FileModel>();
using (var com = new SqlCommand("SELECT TITLE, ImagePath FROM Images", con))
{
    //...
    while (reader.Read())
    {
        images.Add(new FileModel
        {
            Title = reader["TITLE"].ToString(),
            Path = reader["ImagePath"].ToString()
        });
    }
    //...
}

Вывод:

@model  IEnumerable<Opafoto.Models.FileModel>
@foreach (var item in Model) {
    <p>item.Title</p>
    <img src="@Url.Content(item.Path.Replace("wwwroot","~"))" id="imgPortfolio" /> <br />
}

Код набирал в браузeре, поэтому в обоих случаях могут быть ошибки синтаксиса во вью.