Модальные окна

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

Фреймворк Bootstrap предлагает прекрасные возможности по созданию модальных окон. По своей функциональности они напоминают модальные окна в jQuery UI.

Для использования модальных окон создадим новый проект. Наш проект будет использовать модель, описывающую модель компьютера:

public class Computer
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Company { get; set; }
    public int Year { get; set; }
}

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

public class HomeController : Controller
{
    static List<Computer> comps=new List<Computer>();
    static HomeController()
    {
        comps.Add(new Computer { Id = 1, Name = "Apple II", Company = "Apple", Year = 1977 });
        comps.Add(new Computer { Id = 2, Name = "Macintosh", Company = "Apple", Year = 1983 });
        comps.Add(new Computer { Id = 3, Name = "IBM PC", Company = "IBM", Year = 1981 });
        comps.Add(new Computer { Id = 4, Name = "Altair", Company = "MITS", Year = 1975 });
    }
    public ActionResult Index()
    {
        return View(comps);
    }
	public ActionResult Details(int id)
    {
        Computer c = comps.FirstOrDefault(com => com.Id == id);
        if(c!=null)
            return PartialView(c);
        return HttpNotFound();
    }
}

Есть обычный метод Index, который возвращает стандартное представление со списком, и есть метод Details, который генерирует частичное представление с данными о выбранной модели. Это частичное представление и будет использоваться модальным окном.

Теперь создадим представления. Изменим представление Index.chtml следующим образом:

@model IEnumerable<ModalBootstrap.Models.Computer>
@{
    ViewBag.Title = "Компьютеры";
}
<h3>Список моделей</h3>
<div id="modDialog" class="modal fade" >
    <div id="dialogContent" class="modal-dialog"></div>
</div>
<ul>
    @foreach (var c in Model)
    {
        <li>@Html.ActionLink(c.Name, "Details", 
				new { id = c.Id }, new { @class = "compItem" })</li>
    }
</ul>
@section scripts
{
    <script type="text/javascript">

        $(function () {
            $.ajaxSetup({ cache: false });
           $(".compItem").click(function (e) {

                e.preventDefault();
                $.get(this.href, function (data) {
                    $('#dialogContent').html(data);
                    $('#modDialog').modal('show');
                });
            });
        })
    </script>
}

Нажатие на любой элемент списока приведет к тому, что сработает обработчик, определенный в коде javascript. Этот обработчик будет загружать содержимое частичное представления, которое мы чуть позже определим. Данные загружаются в элемент с id="dialogContent". И чтобы этот элемент расценивался как модальное диалоговое окно, у него устанавливается класс modal-dialog.

Этот блок определен внутри блока modDialog, для которого установлены классы modal fade.

Теперь создадим частичное представление Details.cshtml, которое будет использоваться модальным окном:

@model ModalBootstrap.Models.Computer

<div class="modal-content">
    <div class="modal-header">
        <button class="close" data-dismiss="modal" area-hidden="true">X</button>
        <h4>Модель компьютера</h4>
    </div>
    <div class="modal-body">
        <dl class="dl-horizontal">
            <dt>Название модели:</dt>
            <dd>@Html.DisplayFor(model => model.Name)</dd>

            <dt>Производитель</dt>
			<dd>@Html.DisplayFor(model => model.Company)</dd>

            <dt>Год выпуска</dt>
			<dd>@Html.DisplayFor(model => model.Year)</dd>
        </dl>
    </div>
</div>

Здесь опять же используются классы bottstrap для формирования содержимого модального окна.

Все содержимое помещается в блок div с классом modal-content. Для создания заголовочной части модального окна используется блок с классом modal-header. В частности кроме собственно заголовка мы можем определить кнопку закрытия окна, присвоив ей класс close. И также здесь указываем с помощью атрибута data-dismiss элемент, который должен "закрываться" - то есть блок div с классом modal.

Непосредственно содержимое помещается в блок modal-body.

Теперь мы можем протестировать приложение. При нажатии на любую ссылку моделей должно появиться модальное окно с подробной информацией:

И при нажатии на крестик, модальное окно закроется. Таким образом, мы можем использовать bootstrap для создания модальных окон.