Teil 4: Hinzufügen einer Administratoransicht

von Rick Anderson

Abgeschlossenes Projekt herunterladen

Hinzufügen einer Administratoransicht

Jetzt wechseln wir zur Clientseite und fügen eine Seite hinzu, die Daten vom Administratorcontroller nutzen kann. Auf der Seite können Benutzer Produkte erstellen, bearbeiten oder löschen, indem SIE AJAX-Anforderungen an den Controller senden.

Erweitern Sie im Projektmappen-Explorer den Ordner "Controller", und öffnen Sie die Datei mit dem Namen HomeController.cs. Diese Datei enthält einen MVC-Controller. Hinzufügen einer Methode mit dem Namen Admin:

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

    return View();
}

Die HttpRouteUrl-Methode erstellt den URI für die Web-API, und dies wird später im Ansichtsbehälter gespeichert.

Positionieren Sie als Nächstes den Textcursor innerhalb der Aktionsmethode, klicken Sie mit der Admin rechten Maustaste, und wählen Sie "Ansicht hinzufügen" aus. Dadurch wird das Dialogfeld "Ansicht hinzufügen" angezeigt.

Nennen Sie im Dialogfeld " Ansicht hinzufügen " die Ansicht "Administrator". Aktivieren Sie das Kontrollkästchen mit der Bezeichnung "Erstellen einer stark typierten Ansicht". Wählen Sie unter "Modellklasse" die Option "Produkt (ProductStore.Models)" aus. Behalten Sie alle anderen Optionen als Standardwerte bei.

Durch Klicken auf "Hinzufügen" wird unter "Views/Home" eine Datei namens "Admin.cshtml" hinzugefügt. Öffnen Sie diese Datei, und fügen Sie den folgenden HTML-Code hinzu. Dieser html-Code definiert die Struktur der Seite, aber es ist noch keine Funktionalität verbunden.

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

Erstellen eines Links zur Administratorseite

Erweitern Sie im Projektmappenexplorer den Ordner "Ansichten" und dann den Ordner "Gemeinsam genutzt". Öffnen Sie die Datei mit dem Namen _Layout.cshtml. Suchen Sie das ul-Element mit der ID = "menu" und einen Aktionslink für die Administratoransicht:

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

Führen Sie die Anwendung aus, und klicken Sie auf den Link "Administrator", der oben auf der Startseite angezeigt wird. Die Administratorseite sollte wie folgt aussehen:

Momentan macht die Seite nichts. Im nächsten Abschnitt verwenden wir Knockout.js, um eine dynamische Benutzeroberfläche zu erstellen.

Autorisierung hinzufügen

Auf die Seite "Administrator" kann derzeit jeder, der die Website besucht, zugreifen. Ändern wir dies, um die Berechtigung für Administratoren einzuschränken.

Fügen Sie zunächst eine "Administrator"-Rolle und einen Administratorbenutzer hinzu. Erweitern Sie im Projektmappen-Explorer den Ordner "Filter", und öffnen Sie die Datei mit dem Namen InitializeSimpleMembershipAttribute.cs. Suchen Sie den SimpleMembershipInitializer-Konstruktor. Fügen Sie nach dem Aufruf von WebSecurity.InitializeDatabaseConnection den folgenden Code hinzu:

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

Dies ist eine schnelle und schmutzige Möglichkeit, die Rolle "Administrator" hinzuzufügen und einen Benutzer für die Rolle zu erstellen.

Erweitern Sie im Projektmappen-Explorer den Ordner "Controller", und öffnen Sie die datei "HomeController.cs". Fügen Sie der Methode das Admin hinzu.

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

Öffnen Sie die datei AdminController.cs, und fügen Sie der gesamten Klasse das AdminController hinzu.

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

Jetzt können nur Administratoren die Administratorseite anzeigen. Wenn Sie außerdem eine HTTP-Anforderung an den Administratorcontroller senden, muss die Anforderung ein Authentifizierungscookies enthalten. Andernfalls sendet der Server eine HTTP 401-Antwort (Nicht autorisiert). Sie können dies in Fiddler sehen, indem Sie eine GET-Anforderung an http://localhost:*port*/api/admin.