Часть 4. Добавление представления администратора

Рик Андерсон

Скачивание завершенного проекта

Добавьте представление администратора

Теперь вернемся к стороне клиента и добавим страницу, которая может использовать данные с контроллера администрирования. Страница позволит пользователям создавать, изменять или удалять продукты, отправляя запросы AJAX на контроллер.

В обозревателе решений разверните папку "Контроллеры" и откройте файл с именем HomeController.cs. Этот файл содержит контроллер MVC. Добавление метода с именем Admin:

public ActionResult Admin()
{
    string apiUri= Url.HttpRouteUrl("DefaultApi", new { controller = "admin", });
    ViewBag.ApiUrl = new Uri(Request.Url, apiUri).AbsoluteUri.ToString();

    return View();
}

Метод HttpRouteUrl создает унифицированный идентификатор ресурса (URI) для API веб-приложения, и мы храним его в ViewBag для последующего использования.

Затем поместите текстовый курсор в метод действия, а затем щелкните правой Admin кнопкой мыши и выберите "Добавить представление". Откроется диалоговое окно "Добавление представления ".

В диалоговом окне "Добавление представления " назовите представление "Admin". Установите флажок "Создать строго типизированное представление". В разделе "Класс модели" выберите "Product (ProductStore.Models)". Оставьте все остальные параметры значениями по умолчанию.

При нажатии кнопки "Добавить" добавляется файл admin.cshtml в разделе Views/Home. Откройте этот файл и добавьте следующий HTML-код. Этот HTML-код определяет структуру страницы, но функции пока не подключены.

<div class="content">
    <div class="float-left">
        <ul id="update-products">
            <li>
                <div><div class="item">Product ID</div><span></span></div>
                <div><div class="item">Name</div> <input type="text" /></div> 
                <div><div class="item">Price ($)</div> <input type="text" /></div>
                <div><div class="item">Actual Cost ($)</div> <input type="text" /></div>
                <div>
                    <input type="button" value="Update" />
                    <input type="button" value="Delete Item" />
                </div>
         </li>
        </ul>
    </div>

    <div class="float-right">
    <h2>Add New Product</h2>
    <form id="product">
        @Html.ValidationSummary(true)
        <fieldset>
            <legend>Contact</legend>
            @Html.EditorForModel()
            <p>
                <input type="submit" value="Save" />
            </p>
        </fieldset>
    </form>
    </div>
</div>

Создание ссылки на страницу администрирования

В обозревателе решений разверните папку "Представления", а затем разверните папку Shared. Откройте файл с именем _Layout.cshtml. Найдите элемент ul с идентификатором = "menu" и ссылку на действие для представления администратора:

<li>@Html.ActionLink("Admin", "Admin", "Home")</li>

Запустите приложение и щелкните ссылку "Администратор", которая отображается в верхней части домашней страницы. Страница администрирования должна выглядеть следующим образом:

Сейчас страница ничего не делает. В следующем разделе мы будем использовать Knockout.js для создания динамического пользовательского интерфейса.

Добавление авторизации

В настоящее время страница администрирования доступна всем пользователям, посещающим сайт. Давайте изменим это, чтобы ограничить разрешение администраторам.

Начните с добавления роли "Администратор" и пользователя администратора. В обозревателе решений разверните папку "Фильтры" и откройте файл с именем InitializeSimpleMembershipAttribute.cs. Найдите конструктор SimpleMembershipInitializer. После вызова WebSecurity.InitializeDatabaseConnection добавьте следующий код:

const string adminRole = "Administrator";
const string adminName = "Administrator";

if (!Roles.RoleExists(adminRole))
{
    Roles.CreateRole(adminRole);
}
if (!WebSecurity.UserExists(adminName))
{
    WebSecurity.CreateUserAndAccount(adminName, "password");
    Roles.AddUserToRole(adminName, adminRole);
}

Это простой и неформальный способ добавить роль "Администратор" в системе и создать для неё пользователя.

В обозревателе решений разверните папку "Контроллеры" и откройте файл HomeController.cs. Добавьте атрибут Authorize в Admin метод.

[Authorize(Roles="Administrator")]
public ActionResult Admin()
{
    return View();
}

Откройте файл AdminController.cs и добавьте атрибут Authorize во весь AdminController класс.

[Authorize(Roles="Administrator")]
public class AdminController : ApiController
{
    // ...

Теперь только администраторы могут просматривать страницу администрирования. Кроме того, если вы отправляете HTTP-запрос контроллеру администрирования, запрос должен содержать файл cookie проверки подлинности. В противном случае сервер отправляет ответ HTTP 401 (несанкционированный). Это можно увидеть в Fiddler, отправив запрос GET к http://localhost:*port*/api/admin.