Часть 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
.