Создаем админ панель #2

Всех приветствую! Сегодня продолжаем реализовывать админ панель, в частности пропишем функции для удаления и редактирования статей.

Controller

Как всегда заходим начинаем нашу работу с контроллера. Здесь пропишем 5 функций, так что давайте не медлить и приступать.

Первая это просто вывод всех статей в админ панеле

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

Тут вы можете заметить, что это просто скопированная функция из второго урока( где мы реализовывали вывод статей из бд ). Это логично, ведь функционал у них идентичен.

В следующую очередь мы напишем две функции для удаления статей

        [HttpGet]
        [ActionName("Delete")]
        public async Task<IActionResult> ConfirmDelete(int? id)
        {
            if (id != null)
            {
                Article text = await adb.articles.FirstOrDefaultAsync(p => p.Id == id);
                if (text != null)
                    return View(text);
            }
            return NotFound();
        }
        
        [HttpPost]
        public async Task<IActionResult> Delete(int? id)
        {
            if (id != null)
            {
                Article text = await adb.articles.FirstOrDefaultAsync(p => p.Id == id);
                if (text != null)
                {
                    adb.articles.Remove(text);
                    await adb.SaveChangesAsync();
                    return RedirectToAction("Index");
                }
            }
            return NotFound();
        }

Первая из них, выводит поле с текстом при нажатии на кнопку удалить. Это как бы подтверждение удаления. Вторая непосредственно удаляет выбранный по id пост и редиректит нас на функцию Index.

Ну и в конце, пара функций для редактирования содержимого постов

       public async Task<IActionResult> Edit(int? id)
        {
            if (id != null)
            {
                Article text = await adb.articles.FirstOrDefaultAsync(p => p.Id == id);
                if (text != null)
                    return View(text);
            }
            return NotFound();
        }
        [HttpPost]
        public async Task<IActionResult> Edit(Article article)
        {
            adb.articles.Update(article);
            await adb.SaveChangesAsync();
            return RedirectToAction("Index");
        }

Первая у нас выводит содержание выбранной по id статьи, при этом проводя проверку на то что содержание этого поста не равно 0. Вторая функция обновляет данные в бд на заданные и редиректит на Index.

View

P.s. все следующие файлы имеют название функции, которая за них отвечает и создаются в папке Admin

Для начала создадим представление для самой первой функции - Index

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
    <div class="container">
        <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
            <ul class="navbar-nav flex-grow-1">
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-controller="Admin" asp-action="Create">Новая статья</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-controller="Admin" asp-action="Index">Редоктировать</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="row pr-3 pl-3">
    @{
        foreach (var text in Model.getAllArticles)
        {
            <div class="col-lg-4">
                <h1>@text.Title</h1>
                <p style="max-height: 200px; overflow: hidden; text-overflow: ellipsis;">@text.Text</p>
                <h5>@text.Time</h5>
                <a asp-action="Delete" asp-controller="Admin" asp-route-id="@text.Id">Удалить</a>
                <a asp-action="Edit" asp-controller="Admin" asp-route-id="@text.Id">Редактировать</a>
            </div>
        }
    }
</div>

ВНИМАНИЕ первый nav нужно добавить в файл Create, так как это меню навигации в админ панели.

Ну а div опять же идентичен блоку кода из Index Home.

Теперь перейдем к удалению статей

@model Lessontg.Models.Article
@{
    ViewBag.Title = "Удаление пользователя";
}

<div>
    <dl class="dl-horizontal">
        <dt>Заголовое</dt>
        <dd>
            @Html.DisplayFor(model => model.Title)
        </dd>
        
        <dt>Текст</dt>
        <dd>
            @Html.DisplayFor(model => model.Text)
        </dd>
        
        <dt>Дата</dt>
        <dd>
            @Html.DisplayFor(model => model.Time)
        </dd>
    </dl>
    
    <div>
        <form asp-controller="Admin" asp-action="Delete" method="post">
            <div class="form-group">
                <input type="submit" class="btn btn-default" value="Удалить" style="border: solid 1px #ced4da;" />
            </div>
        </form>
    </div>
</div>

Здесь просто выводим модель, которая выбрана по id.

Ну и редактирование:

@model Lessontg.Models.Article
@{
    ViewBag.Title = "Редактирование статьи";
}
<form asp-action="Edit" asp-controller="Admin" asp-route-id="@Model.Id">
    <div class="form-group">
        <label asp-for="Title" class="control-label">Заголовок</label>
        <input type="text" asp-for="Title" class="form-control" />
    </div>
    <div class="form-group">
        <label asp-for="Text" class="control-label">Текст</label>
        <textarea asp-for="Text" cols="100" rows="10"></textarea>
    </div>
    <div class="form-group">
        <label asp-for="Time" class="control-label">Дата</label>
        <input type="date" asp-for="Time" class="form-control" />
    </div>
    <div class="form-group">
        <input type="submit" value="Сохранить" class="btn btn-default" style="border: solid 1px #ced4da;" />
    </div>
</form>

Код похож по принципу на разметку Create, поэтому здесь я не буду останавливаться.

Теперь можем нажать F5, перейти в Admin/Create и наслаждаемся нашей админ-панелью.

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