Freigeben über


Teil 4: Hinzufügen einer Admin Ansicht

von Rick Anderson

Abgeschlossenes Projekt herunterladen

Hinzufügen einer Admin-Ansicht

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

Erweitern Sie in Projektmappen-Explorer den Ordner Controller, und öffnen Sie die Datei homeController.cs. Diese Datei enthält einen MVC-Controller. Fügen Sie eine Methode mit dem Namen hinzu 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 wir speichern diesen für später im Ansichtsbehälter.

Positionieren Sie als Nächstes den Textcursor in der Admin Aktionsmethode, klicken Sie dann mit der rechten Maustaste, und wählen Sie Ansicht hinzufügen aus. Dadurch wird das Dialogfeld Ansicht hinzufügen geöffnet.

Screenshot des Menüs

Geben Sie der Ansicht im Dialogfeld Ansicht hinzufügen den Namen "Admin". Aktivieren Sie das Kontrollkästchen Create a strongly typed view (Erstellen einer stark typisierten Ansicht). Wählen Sie unter Modellklasse die Option "Produkt (ProductStore.Models)" aus. Behalten Sie alle anderen Optionen als Standardwerte bei.

Screenshot des Dialogfelds

Wenn Sie auf Hinzufügen klicken, 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 noch ist keine Funktionalität verkabelt.

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

Erweitern Sie in Projektmappen-Explorer den Ordner Ansichten und dann den Ordner Freigegeben. Öffnen Sie die Datei mit dem Namen _Layout.cshtml. Suchen Sie das ul-Element mit id = "menu" und einem Aktionslink für die Admin Ansicht:

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

Hinweis

Im Beispielprojekt habe ich einige andere kosmetische Änderungen vorgenommen, z. B. das Ersetzen der Zeichenfolge "Ihr Logo hier". Diese wirken sich nicht auf die Funktionalität der Anwendung aus. Sie können das Projekt herunterladen und die Dateien vergleichen.

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

Screenshot einer Browseransicht der Seite

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

Hinzufügen der Autorisierung

Auf die Seite Admin kann derzeit jeder, der die Website besucht, zugreifen. Ändern wir dies, um die Berechtigung auf Administratoren einzuschränken.

Fügen Sie zunächst die Rolle "Administrator" und einen Administratorbenutzer hinzu. Erweitern Sie in Projektmappen-Explorer den Ordner Filter, und öffnen Sie die Datei mit dem Namen InitializeSimpleMembershipAttribute.cs. Suche 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 modifiziert Möglichkeit, die Rolle "Administrator" hinzuzufügen und einen Benutzer für die Rolle zu erstellen.

Erweitern Sie in Projektmappen-Explorer den Ordner Controllers, und öffnen Sie die Datei HomeController.cs. Fügen Sie der Methode das AdminAttribut Authorize hinzu.

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

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

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

Hinweis

MVC und Web-API definieren beide Authorize-Attribute in unterschiedlichen Namespaces. MVC verwendet System.Web.Mvc.AuthorizeAttribute, während die Web-API System.Web.Http.AuthorizeAttribute verwendet.

Jetzt können nur Administratoren die Seite Admin anzeigen. Wenn Sie außerdem eine HTTP-Anforderung an den Admin-Controller 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/adminsenden.