Część 4. Dodawanie widoku administratora

Autor: Rick Anderson

Pobieranie ukończonego projektu

Dodawanie widoku administratora

Teraz przejdziemy do strony klienta i dodamy stronę, która może korzystać z danych z kontrolera administratora. Strona umożliwia użytkownikom tworzenie, edytowanie lub usuwanie produktów przez wysyłanie żądań AJAX do kontrolera.

W Eksploratorze rozwiązań rozwiń folder Kontrolery i otwórz plik o nazwie HomeController.cs. Ten plik zawiera kontroler MVC. Dodaj metodę o nazwie Admin:

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

    return View();
}

Metoda HttpRouteUrl tworzy identyfikator URI dla interfejsu API sieci Web i przechowujemy go w ViewBag na przyszłość.

Następnie umieść kursor tekstowy w Admin metodzie akcji, a następnie kliknij prawym przyciskiem myszy i wybierz polecenie Dodaj widok. Spowoduje to wyświetlenie okna dialogowego Dodawanie widoku .

W oknie dialogowym Dodawanie widoku nadaj widokowi nazwę "Administrator". Zaznacz pole wyboru oznaczone etykietą Utwórz widok o silnym typie. W obszarze Klasa modelu wybierz pozycję "Product (ProductStore.Models)". Pozostaw wszystkie inne opcje jako wartości domyślne.

Kliknięcie przycisku Dodaj powoduje dodanie pliku o nazwie Admin.cshtml w obszarze Views/Home. Otwórz ten plik i dodaj następujący kod HTML. Ten kod HTML definiuje strukturę strony, ale żadna funkcja nie jest jeszcze podłączona.

<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>

Tworzenie łącza do strony administracyjnej

W Eksploratorze rozwiązań rozwiń folder Widoki, a następnie rozwiń folder Udostępnione. Otwórz plik o nazwie _Layout.cshtml. Znajdź element ul o identyfikatorze id = "menu" i link akcji dla widoku administratora:

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

Uruchom aplikację i kliknij link "Administrator", który zostanie wyświetlony w górnej części strony głównej. Strona Administrator powinna wyglądać następująco:

W tej chwili strona nic nie robi. W następnej sekcji użyjemy Knockout.js do utworzenia dynamicznego interfejsu użytkownika.

Dodawanie autoryzacji

Strona Administrator jest obecnie dostępna dla każdej osoby odwiedzającej witrynę. Zmieńmy to, aby ograniczyć uprawnienia do administratorów.

Zacznij od dodania roli "Administrator" i użytkownika administratora. W Eksploratorze rozwiązań rozwiń folder Filtry i otwórz plik o nazwie InitializeSimpleMembershipAttribute.cs. Zlokalizuj SimpleMembershipInitializer konstruktora. Po wywołaniu metody WebSecurity.InitializeDatabaseConnection dodaj następujący kod:

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);
}

Jest to szybki i prosty sposób dodania roli "Administrator" i utworzenia użytkownika o tej roli.

W Eksploratorze rozwiązań rozwiń folder Kontrolery i otwórz plik HomeController.cs. Dodaj atrybut Authorize do Admin metody .

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

Otwórz plik AdminController.cs i dodaj atrybut Authorize do całej AdminController klasy.

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

Teraz tylko administratorzy mogą wyświetlać stronę Administratora. Ponadto w przypadku wysłania żądania HTTP do kontrolera administratora żądanie musi zawierać plik cookie uwierzytelniania. Jeśli tak nie jest, serwer wysyła odpowiedź HTTP 401 (Brak autoryzacji). Można to zobaczyć w programie Fiddler, wysyłając żądanie GET do http://localhost:*port*/api/admin.