Выводим статьи из бд

Привет, ребят! Продолжаем писать наш блог, сегодня мы выведем статьи из бд на экран.

Контроллер 1 часть

В этот раз мы будем работать с контроллером. Для начала нужно создать экземпляр нашего контекста

        private readonly ILogger<HomeController> _logger;
        private ArticleContext adb;
        
        public HomeController(ILogger<HomeController> logger, ArticleContext context)
        {
            _logger = logger;
            adb = context;
        }

Теперь напишем код, благодаря которому в базу данных сразу добавится 4 поста

public HomeController(ILogger<HomeController> logger, ArticleContext context)
        {
            _logger = logger;
            adb = context;
            
            if (adb.articles.Count() == 0)
            {
                Article article1 = new Article { Text = "бла бла бла бла бла бла бла бла", Title = "Заголовок 1", Time = "16.06.2020" };
                Article article2 = new Article { Text = "бла бла бла бла бла бла бла бла", Title = "Заголовок 2", Time = "16.06.2020" };
                Article article3 = new Article { Text = "бла бла бла бла бла бла бла бла", Title = "Заголовок 3", Time = "16.06.2020" };
                Article article4 = new Article { Text = "бла бла бла бла бла бла бла бла", Title = "Заголовок 4", Time = "16.06.2020" };
                
                adb.articles.AddRange(article1, article2, article3, article4);
                adb.SaveChanges();
            }
        }

Здесь мы проверяем, если кол-во элементов в базе данных равно 0, то мы добавляем в нее 4 экземпляра класса модели Article. Звучит запутанно, но это просто. Дальше мы добавляем в таблицу все наши статьи и сохраняем изменения.

ViewModel

Давайте перейдем к выводу статей. Первый шаг это создать ViewModel, благодаря которой мы будем выводить данные в представления. Просто нужно в корневой папке создать папку ViewModels и файл ArticleViewModel

Там нужно прописать 2 поля:

• getAllArticles - сюда будем передавать списки из наших постов
• article - поле благодаря которому мы будем обращаться к полям модели

public class ArticleViewModel
    {
        public IEnumerable<Article> getAllArticles { get; set; }
        public Article article { get; set; }
    }

Контроллер 2 часть

Вернемся к контроллеру, тут нам нужно воспользоваться функцией Index

public IActionResult Index()
        {
            IQueryable<Article> source = adb.articles.OrderBy(p => p.Id);
            var articles = source.ToList();
            
            ArticleViewModel articleViewModel = new ArticleViewModel
            {
                getAllArticles = articles
            };
            
            return View(articleViewModel);
        }

Сначала мы создаем IQueryable список, в который передаем все посты сортируя их по Id.

А в переменную articles передаем тот же список, передавая его в список( тавтология, но это так ).

Затем создаем экземпляр ViewModel и в поле getAllArticles передаем articles.

View

//Перед работой с View нужно установить еще один NuGet-пакет, а именно bootstrap

Переходим в представление Index в папке Home, удаляем его содержимое и пишем следующую разметку:

@model Lessontg.ViewModels.ArticleViewModel

<div class="row pr-4 pl-4">
        @{
            foreach (var article in Model.getAllArticles)
            {
                <div class="col-lg-4 ">
                    <a style="text-decoration: none;" asp-route-id="@article.Id" class="text-dark"><h3 class="pb-1">@article.Title</h3></a>
                    <p style="max-height: 200px; overflow: hidden; text-overflow: ellipsis; font-family: Comfortaa;">@article.Text</p>
                    <h5 class="pt-3">@article.Time</h5>
                </div>
            }
        }
    </div>

Нашей моделью будет ViewModel и все данные мы будем использовать из нее. При помощи @{} мы можем использовать C#-скрипты.

P.s. здесь установлено ограничение на максимальное число символов, которое может выводить в блоке текст. Так же пока что не обращайте внимания на asp-route-id, это понадобится нам в следующем уроке.

Вуаля, наш код работает

На сегодня все,
Удачи программисты!