Część 4: Dodawanie widoku administratora

według Jan Wasson

Pobierz ukończony projekt

Dodawanie widoku administratora

Teraz zmienimy się po stronie klienta i dodasz stronę, która będzie mogła korzystać z danych z kontrolera administratora. Na stronie użytkownicy będą mogli tworzyć, edytować lub usuwać produkty, wysyłając żądania AJAX do kontrolera.

W Eksplorator 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 internetowego interfejsu API i zapisuje go w zbiorze widoku dla późniejszej.

Następnie umieść kursor tekstu w metodzie Admin 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 Nazwij widok "Administrator". Zaznacz pole wyboru z etykietą Utwórz widok o jednoznacznie określonym typie. W obszarze Klasa modeluwybierz pozycję "produkt (ProductStore. models)". Pozostaw wszystkie inne opcje jako wartości domyślne.

Kliknięcie przycisku Dodaj dodaje plik o nazwie admin. cshtml w widokach/na stronie głównej. Otwórz ten plik i Dodaj następujący kod HTML. Ten kod HTML definiuje strukturę strony, ale żadne funkcje nie są jeszcze przewodne.

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

W Eksplorator rozwiązań rozwiń folder widoki, a następnie rozwiń folder udostępniony. Otwórz plik o nazwie _Layout. cshtml. Znajdź element ul z identyfikatorem "menu" i link akcji dla widoku administratora:

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

Note

W przykładowym projekcie zostały wykonane pewne inne zmiany, takie jak zastąpienie ciągu "logo" w tym miejscu. Nie wpływają one na działanie aplikacji. Możesz pobrać projekt i porównać pliki.

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

Teraz Strona nie wykonuje żadnych czynności. W następnej sekcji użyjemy narzędzia separowania. js do utworzenia dynamicznego interfejsu użytkownika.

Dodaj autoryzację

Strona administratora jest obecnie dostępna dla wszystkich osób odwiedzających witrynę. Zmieńmy ten sposób, aby ograniczyć uprawnienia do administratorów.

Zacznij od dodania roli "Administrator" i administratora. W Eksplorator rozwiązań rozwiń folder filtry i Otwórz plik o nazwie InitializeSimpleMembershipAttribute.cs. Znajdź konstruktora SimpleMembershipInitializer. Po wywołaniu metody WebSecurity. InitializeDatabaseConnectionDodaj 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 szybka i zanieczyszczona metoda dodawania roli "Administrator" i tworzenia użytkownika dla roli.

W Eksplorator rozwiązań rozwiń folder kontrolery i Otwórz plik HomeController.cs. Dodaj atrybut Autoryzuj do metody Admin.

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

Otwórz plik AdminController.cs i Dodaj atrybut Autoryzuj do całej klasy AdminController.

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

Note

Zarówno MVC, jak i interfejs API sieci Web definiują atrybuty autoryzacji w różnych przestrzeniach nazw. MVC używa System. Web. MVC. AuthorizeAttribute, a interfejs API sieci Web używa System. Web. http. AuthorizeAttribute.

Teraz tylko Administratorzy mogą wyświetlać stronę administratora. Ponadto w przypadku wysłania żądania HTTP do kontrolera administratora żądanie musi zawierać plik cookie uwierzytelniania. W przeciwnym razie serwer wysyła odpowiedź HTTP 401 (bez autoryzacji). Ten element można zobaczyć w programu Fiddler, wysyłając żądanie GET do http://localhost:*port*/api/admin.