Просмотр заявок

Метод Index, который у нас будет выводить текущему пользователю его заявки, будет стандартным действием, передающим набор объектов в представление. Итак, изменим метод Index на следующий:

public ActionResult Index()
{
    // получаем текущего пользователя
    User user = db.Users.Where(m=> m.Login==HttpContext.User.Identity.Name).FirstOrDefault();

    var requests = db.Requests.Where(r=>r.UserId==user.Id) //получаем заявки для текущего пользователя
                            .Include(r => r.Category)  // добавляем категории
                            .Include(r => r.Lifecycle)  // добавляем жизненный цикл заявок
                            .Include(r => r.User)         // добавляем данные о пользователях
                            .OrderByDescending(r=>r.Lifecycle.Opened); // упорядочиваем по дате по убыванию   
         
    return View(requests.ToList());
}

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

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

На веб-страницу мы будем выводить только часть информации о заявке. А некоторые показатели, как статус, приоритет, мы будем выводить в виде изображений. Кроме того, я использовал изображения для ссылок на общую информацию о заявке, информацию об исполнителе и жизненном цикле заявки. Ниже я приведу список всех изображений, используемых в представлении.

Приоритеты

	Низкий приоритет
	Средний приоритет
	Высокий приоритет
	Критичный приоритет

Статусы

	Заявка окрыта
	Заявка распределена
	Заявка в процессе производства
	Заявка на проверке
	Заявка закрыта

Прочие

	Общая информация о заявке
	Информация об исполнителе
	Жизненный цикл заявки

Для хранения этих изображений мы можем создать в проекте в каталоге Content специальную папку pictures и оттуда обращаться к этим изображениям.

Теперь создадим представление Index.cshtml:

@model IEnumerable<Request>
@using HelpDeskTrain.Models

@{
    ViewBag.Title = "Список заявок";
    int i = 0; //счетчик
}

<h2>Список заявок</h2>
<p>Всего заявок: @(Model.Count<Request>())</p>
<table>

@foreach (var item in Model) {
    i++;
    <tr>
        <td><b>@i</b></td>
        <td>
         @if (item.Status == (int)RequestStatus.Open)
        { 
             <img src="../../Content/pictures/status1.png" title="Заявка открыта" class="tdImage" />
        }
        else if (item.Status == (int)RequestStatus.Distributed)
        { 
             <img src="../../Content/pictures/status2.png" title="Заявка распределена" class="tdImage" />
        }
         else if (item.Status == (int)RequestStatus.Proccesing)
         {
            <img src="../../Content/pictures/status3.png" title="Заявка в процессе" class="tdImage" />
         }
         else if (item.Status == (int)RequestStatus.Checking)
         {
            <img src="../../Content/pictures/status4.png" title="Заявка на проверке" class="tdImage" />
         } 
        else if (item.Status == (int)RequestStatus.Closed)
         {
            <img src="../../Content/pictures/status5.png" title="Заявка закрыта" class="tdImage" />
         }
        </td>
        <td>
            @if (item.Priority == (int)RequestPriority.Low)
            { 
             <img src="../../Content/pictures/prior1.png" title="Низкий приоритет" class="tdImage" />
            }
            else if (item.Priority == (int)RequestPriority.Medium)
            { 
             <img src="../../Content/pictures/prior2.png" title="Средний приоритет"  class="tdImage" />
            }
            else if (item.Priority == (int)RequestPriority.High)
            {
            <img src="../../Content/pictures/prior3.png" title="Высокий приоритет" class="tdImage" />
            }
            else if (item.Priority == (int)RequestPriority.Critical)
            {
            <img src="../../Content/pictures/prior4.png" title="Критичный приоритет" class="tdImage" />
            }
        </td>
        <td>
            @if (item.File != null)
            { 
                <a href="/Request/Download/@item.Id"><img src="../../Content/pictures/filey.png" alt='@item.File' class="tdImage" /></a>
            }
            else
            { 
                <img src="../../Content/pictures/filen.png" alt="без файла изображения" class="tdImage" />
            }
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Lifecycle.Opened)
        
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        
        <td>
        
        <div><a class="openDialog" data-dialog-id="infoDialog" data-dialog-title="Описание заявки" 
               href="Request/Details/@item.Id">
               <img src="../../Content/pictures/info.png" class="tdImage" title="Описание заявки" />
         </a></div>
        </td>
        <td>
         <div><a class="openDialog" data-dialog-id="executorDialog" data-dialog-title="Исполнитель заявки" 
             href="Request/Executor/@item.ExecutorId">
               <img src="../../Content/pictures/executor.png" class="tdImage" title="Исполнитель заявки" />
           </a>
         </div>
        </td>
        <td>
           <div><a class="openDialog" data-dialog-id="lifecycleDialog" data-dialog-title="Жизненный цикл заявки" 
               href="Request/Lifecycle/@item.LifecycleId">
               <img src="../../Content/pictures/lifecycle.png" class="tdImage" title="Жизненный цикл заявки" />
           </a></div>
         
        </td>
        <td>
            @Html.ActionLink("Удалить", "Delete", new { id = item.Id })
        </td>
    </tr>
}

</table>
 @Styles.Render("~/Content/themes/base/css")
@section Scripts {
    @Scripts.Render("~/bundles/jqueryui")
}

Довольно объемный код, поэтому разберем его подробнее. Сначала мы выводим статус в первом столбце: @if (item.Status == (int)RequestStatus.Open). И в зависимости от того, какой будет статус, мы выводим определенную картинку.

Далее похожим образом выводим приоритет заявки и также с помощью изображения.

Затем идет дата открытия, название и наконец доходим до следующего блока:

<div><a class="openDialog" data-dialog-id="infoDialog" data-dialog-title="Описание заявки" 
               href="Request/Details/@item.Id">
        <img src="../../Content/pictures/info.png" class="tdImage" title="Описание заявки" />
</a></div>

Здесь мы объявляем ссылку, которая затем после применения библиотеки jquery-ui и нажатия превратится в всплывающее окно, содержащее некоторую информацию. Ссылка href="Request/Details/@item.Id" при нажатии будет обращаться к методу Details (кторое мы далее создадим) и будет в него передавать id данной заявки, и в окне появится некоторая нужная нам информация. Ну для визуализации добавляем в пределы ссылки изображение. То же самое справедливо и для следующих блоков исполнителя и жизненного цикла, только методы контроллера там будет отличаться.

Ну и также мы применяем к элементам img для единообразия класс tdImage, который будет иметь следующие стили (который можно добавить в файл Site.css):

 .tdImage{
     
    width:30px;
    height:25px;
}

И в самом конце представления добавляем бандлы - стили и скрипы библиотеки jquery-ui:

@Styles.Render("~/Content/themes/base/css")
@section Scripts {
    @Scripts.Render("~/bundles/jqueryui")
}

Эти бандлы объявлены у нас в файле BundleConfig.cs в папке App_Start, вы можете открыть этот файл и увидеть, какие конкретно файлы эти бандлы подключают.

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