Часть 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, и мы сохраняем его в контейнере представлений для последующего использования.

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

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

При нажатии кнопки Добавить добавляется файл с именем Администратор.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>

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

В Обозреватель решений разверните папку Представления, а затем — папку Общие. Откройте файл с именем _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
{
    // ...

Примечание

MVC и веб-API определяют атрибуты Authorize в разных пространствах имен. MVC использует System.Web.Mvc.AuthorizeAttribute, а веб-API — System.Web.Http.AuthorizeAttribute.

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

НазадВперед