Создание всплывающих окон

Во-первых, для обработки запросов по ссылкам типа href="Request/Details/@item.Id", которые определены в представлении Index.cshtml, нам надо создать в контроллере соответствующие методы. Вначале создадим функциональность для вывода общей информации по заявке. Для этого добавим в контроллер RequestController следующий метод Details:

// Просмотр подробных сведений о заявке
public ActionResult Details(int id)
{
    Request request = db.Requests.Find(id);

    if (request != null)
    {
        //получаем кабинет
        var activ = db.Activs.Where(m => m.Id == request.ActivId);
		// так как кабинет у нас может быть не указан, и набор может возвращать 0 значений
        if (activ.Count()>0)
        {
            request.Activ = activ.First();
        }
        //получаем категорию
        request.Category = db.Categories.Where(m => m.Id == request.CategoryId).First();
		return PartialView("_Details", request);
    }
    return View("Index");
}

По параметру из бд получаем объект Request и связанные с ним актив и категорию и возвращаем частичное представление. Теперь для этого метода добавим частичное представление _Details.cshtml:

@model HelpDeskTrain.Models.Request
<div>
	<p><b>Подробные сведения: Заявка №  @Html.DisplayFor(m => m.Id)</b></p>
	<p>Описание: @Html.DisplayFor(m=>m.Description)</p>
	<p>Кабинет: @Html.DisplayFor(m=>m.Activ.CabNumber)</p>
	<p>Категория: @Html.DisplayFor(m=>m.Category.Name)</p>
	<p>Комментарий: @Html.DisplayFor(m=>m.Comment)</p>
</div>

И также нам надо связать воедино функциональность jquery-ui и получаемую с сервера разметку в виде частичного представления. Для этого воспользуемся кодом javascript. Добавим в проект в папку скриптов Scripts новый файл javascript, который назовем helpdesk.js, со следующим содержимым:

$(document).ready(function () {
             
    $.ajaxSetup({ cache: false });
 
            $(".openDialog").on("click", function (e) {
                e.preventDefault();
 
                $("<div></div>")
                    .addClass("dialog")
                    .attr("id", $(this)
                    .attr("data-dialog-id"))
                    .appendTo("body")
                    .dialog({
                        title: $(this).attr("data-dialog-title"),
                        close: function () { $(this).remove() },
                        modal: true
                    })
                    .load(this.href);
            });
 
            $(".close").on("click", function (e) {
                e.preventDefault();
                $(this).closest(".dialog").dialog("close");
      });
});

Этот javascript-код по клику на кнопку будет выводить содержимое в всплывающее окно. Поскольку мы будем использовать этот скрипт только там, где также будем использовать библиотеку jquery-ui, то логично будет добавить данный скрипт в бандл jquery-ui. Благодаря этому данный скрип сможет воспользоваться преимуществами бандлинга и минификации.

Итак, перейдем в папку App_Start и откроем файл BundleConfig.cs. Сейчас в нем объявление бандла jquery-ui должно выглядеть следующим образом:

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                "~/Scripts/jquery-ui-{version}.js"));

Подключим в него вышеопределенный файл helpdesk.js:

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js",
                         "~/Scripts/helpdesk.js"));

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

Теперь также добавим в контроллер действия Executor и Lifecycle, при помощи которых в представлении Index будут отображаться такие же всплывающие окна, только для информации об исполнителе и жизненном цикле.

Действие Executor:

public ActionResult Executor(int id)
{
    User executor = db.Users.Where(m => m.Id == id).First();

    if (executor != null)
    {
        return PartialView("_Executor", executor);
    }
    return View("Index");
}

И данные об исполнителе будут передаваться в следующее частичное представление _Executor.cshtml:

@model HelpDeskTrain.Models.User

<div> 
    <p><b>Сведения об исполнителе</b></p>
    <p>ФИО:  @Html.DisplayFor(m=>m.Name)</p>
    <p>Должность:  @Html.DisplayFor(m=>m.Position)</p>
</div>

И в конце добавим в контроллер действие Lifecycle:

public ActionResult Lifecycle(int id)
{
    Lifecycle lifecycle = db.Lifecycles.Where(m => m.Id == id).First();

    if (lifecycle != null)
    {
        return PartialView("_Lifecycle", lifecycle);
    }
    return View("Index");
}

И для него добавим частичное представление _Lifecycle.cshtml:

@model HelpDeskTrain.Models.Lifecycle

<div>
    <p><b>Заявка № @Html.DisplayFor(m => m.Id)</b></p>
    <p>Жизненный цикл</p>
    <p>Открыта:  @Html.DisplayFor(m=>m.Opened)</p>
    <p>Распределена:  @Html.DisplayFor(m=>m.Distributed)</p>
    <p>В процессе:  @Html.DisplayFor(m=>m.Proccesing)</p>
    <p>На проверке:  @Html.DisplayFor(m=>m.Checking)</p>
    <p>Закрыта:  @Html.DisplayFor(m=>m.Closed)</p>
</div>