Диалоговые окна и CRUD-интерфейс

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

В этой теме рассмотрим создание на основе виджета dialog из библиотеки jQuery UI CRUD-интерфейса, то есть создание, редактирование и удаление через диалоговые окна.

Итак, создадим новый проект ASP.NET MVC 5. И вначале добавим в проект через NuGet пакеты Entity Framework и jQuery UI, а также настроим подключение к базе данных.

И также определим класс модели, с которой мы будем работать:

public class Computer
{
    public int Id { get; set; }
	
	[Display(Name = "Модель")]
    public string Model { get; set; }
	
	[Display(Name = "Год выпуска")]
    public int Year { get; set; }
}

И добавим класс контекста данных:

public class CompContext : DbContext
{
    public DbSet<Computer> Computers { get; set; }
}

Затем изменим стандартный контроллер HomeController следующим образом:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using CRUDDialogApp.Models;
using System.Data.Entity;

namespace CRUDDialogApp.Controllers
{
    public class HomeController : Controller
    {
        CompContext db = new CompContext();
        public ActionResult Index()
        {
            return View(db.Computers);
        }
        // Просмотр подробных сведений о книге
        public ActionResult Details(int id)
        {
            Computer comp = db.Computers.Find(id);
            if (comp != null)
            {
                return PartialView("Details", comp);
            }
            return View("Index");
        }
        // Добавление
        public ActionResult Create()
        {
            return PartialView("Create");
        }
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(Computer comp)
        {
            db.Computers.Add(comp);
            db.SaveChanges();
            return RedirectToAction("Index");
        }
        // Редактирование
        public ActionResult Edit(int id)
        {
            Computer comp = db.Computers.Find(id);
            if (comp != null)
            {
                return PartialView("Edit", comp);
            }
            return View("Index");
        }
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit(Computer comp)
        {
            db.Entry(comp).State = EntityState.Modified;
            db.SaveChanges();
            return RedirectToAction("Index");
        }
        // Удаление
        public ActionResult Delete(int id)
        {
            Computer comp = db.Computers.Find(id);
            if (comp != null)
            {
                return PartialView("Delete", comp);
            }
            return View("Index");
        }
        [HttpPost]
        [ValidateAntiForgeryToken]
        [ActionName("Delete")]
        public ActionResult DeleteRecord(int id)
        {
            Computer comp = db.Computers.Find(id);

            if (comp != null)
            {
                db.Computers.Remove(comp);
                db.SaveChanges();
            }
            return RedirectToAction("Index");
        }
    }
}

Все методы представляют стандартные действия по добавлению/редактированию/удалению объектов. Их особенностью является лишь то, что они возвращают частичное представление.

Добавим все частичные представления. Частичное представление Create.cshtml:

@model CRUDDialogApp.Models.Computer
<div>
@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
        <div>
            @Html.LabelFor(model => model.Model)
            <p>@Html.EditorFor(model => model.Model)</p>
        </div>

        <div>
            @Html.LabelFor(model => model.Year)
            <p>@Html.EditorFor(model => model.Year)</p>
        </div>
        <p><input type="submit" value="Добавить" /></p>
}
</div>

Частичное представление Edit.cshtml:

@model CRUDDialogApp.Models.Computer
<div>
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        @Html.HiddenFor(model => model.Id)
        <div>
            @Html.LabelFor(model => model.Model)
            <p>@Html.EditorFor(model => model.Model)</p>
        </div>
        <div>
            @Html.LabelFor(model => model.Year)
            <p>@Html.EditorFor(model => model.Year)</p>
        </div>
        <p><input type="submit" value="Сохранить" /></p> 
    }
</div>

Частичное представление Details.cshtml:

@model CRUDDialogApp.Models.Computer
<div>
    <h3>Ид:  @Html.DisplayFor(m => m.Id)</h3>
    <p>Модель: @Html.DisplayFor(m => m.Model)</p>
    <p>Год выпуска: @Html.DisplayFor(m => m.Year)</p>
</div>

И частичное представление Delete.cshtml:

@model CRUDDialogApp.Models.Computer

<h3>Вы действительно хотите удалить данную модель?</h3>
<div>
    <p>Ид.: @Html.DisplayFor(m => m.Id)</p>
    <p>Модель: @Html.DisplayFor(m => m.Model)</p>
    <p>Год выпуска: @Html.DisplayFor(m => m.Year)</p>

    @using (Html.BeginForm()) {
        @Html.AntiForgeryToken()

        <input type="submit" value="Удалить" />   
    }
</div>

Все эти частичные представления будут встроены в главное представление Index.cshtml, которое мы изменим следующим образом:

@model IEnumerable<CRUDDialogApp.Models.Computer>
@{
    Layout = null;
}
<html>
<head>
    <title></title>
    <link href='@Url.Content("~/Content/themes/base/jquery-ui.css")' rel="stylesheet" type="text/css" />
</head>
<body>
    <h2>Список компьютеров</h2>
    <table>
    @foreach (var c in Model)
    {
        <tr><td>@c.Model</td><td>
        @Html.ActionLink("Смотреть", "Details", "Home", new { id = c.Id }, 
            new { @class = "viewDialog",  data_dialog_title = "Описание модели" }) | 
        @Html.ActionLink("Изменить", "Edit", "Home", new { id = c.Id }, 
            new { @class = "viewDialog", data_dialog_title = "Редактирование модели" }) |
        @Html.ActionLink("Удалить", "Delete", "Home", new { id = c.Id }, 
            new { @class = "viewDialog", data_dialog_title = "Удаление модели" }) </td></tr>
    }
    </table>
    <p> @Html.ActionLink("Добавить", "Create", "Home", new { }, new { @class = "viewDialog", data_dialog_title = "Создание модели" })</p> 

    <script src='@Url.Content("~/Scripts/jquery-1.12.4.min.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/Scripts/jquery-ui-1.12.1.min.js")' type="text/javascript"></script>
    <script>
    $(document).ready(function () {

        $.ajaxSetup({ cache: false });

        $(".viewDialog").on("click", function (e) {
            e.preventDefault();

            $("<div></div>")
                .addClass("dialog")
                .appendTo("body")
                .dialog({
                    title: $(this).attr("data-dialog-title"),
					 close: function () { $(this).remove() },
                    modal: true
                })
                .load(this.href);
        });
    });
    </script>
</body>
</html>

Все ссылки имеют атрибут класса class="viewDialog", с помощью которого на эти ссылки прикрепляется обработчик нажатия $(".viewDialog").on("click", function (e).... А в обработчике происходит создание диалогового окна, которое будет содержать нужное частичное представление.

К примеру, нажмем на ссылку для добавления и попробуем добавить новый элемент:

Подобным образом сработают и диалоговые окна для остальных ссылок.