Partie 4 : Ajout d’une vue Administration

par Rick Anderson

Télécharger le projet terminé

Ajouter une vue Administration

Nous allons maintenant nous tourner vers le côté client et ajouter une page qui peut consommer des données à partir du contrôleur Administration. La page permet aux utilisateurs de créer, modifier ou supprimer des produits en envoyant des requêtes AJAX au contrôleur.

Dans Explorateur de solutions, développez le dossier Contrôleurs et ouvrez le fichier nommé HomeController.cs. Ce fichier contient un contrôleur MVC. Ajoutez une méthode nommée Admin:

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

    return View();
}

La méthode HttpRouteUrl crée l’URI de l’API web, et nous le stockons dans le sac d’affichage pour plus tard.

Ensuite, positionnez le curseur de texte dans la méthode d’action, puis cliquez avec le Admin bouton droit et sélectionnez Ajouter une vue. La boîte de dialogue Ajouter une vue s’affiche.

Dans la boîte de dialogue Ajouter une vue, nommez la vue « Administration ». Sélectionnez la zone case activée intitulée Créer une vue fortement typée. Sous Classe de modèle, sélectionnez « Product (ProductStore.Models) ». Conservez toutes les autres options comme valeurs par défaut.

Cliquez sur Ajouter pour ajouter un fichier nommé Administration.cshtml sous Vues/Accueil. Ouvrez ce fichier et ajoutez le code HTML suivant. Ce code HTML définit la structure de la page, mais aucune fonctionnalité n’est encore câblée.

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

Créer un lien vers la page Administration

Dans Explorateur de solutions, développez le dossier Views, puis le dossier Partagé. Ouvrez le fichier nommé _Layout.cshtml. Recherchez l’élément ul avec id = « menu » et un lien d’action pour la vue Administration :

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

Notes

Dans l’exemple de projet, j’ai apporté quelques autres modifications cosmétiques, telles que le remplacement de la chaîne « Votre logo ici ». Celles-ci n’affectent pas les fonctionnalités de l’application. Vous pouvez télécharger le projet et comparer les fichiers.

Exécutez l’application et cliquez sur le lien « Administration » qui s’affiche en haut de la page d’accueil. La page Administration doit ressembler à ce qui suit :

Pour l’instant, la page ne fait rien. Dans la section suivante, nous allons utiliser Knockout.js pour créer une interface utilisateur dynamique.

Ajouter une autorisation

La page Administration est actuellement accessible à toute personne visitant le site. Nous allons modifier ceci pour restreindre l’autorisation aux administrateurs.

Commencez par ajouter un rôle « Administrateur » et un utilisateur administrateur. Dans Explorateur de solutions, développez le dossier Filtres et ouvrez le fichier nommé InitializeSimpleMembershipAttribute.cs. Recherchez le constructeur SimpleMembershipInitializer. Après l’appel à WebSecurity.InitializeDatabaseConnection, ajoutez le code suivant :

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

Il s’agit d’un moyen rapide et sale d’ajouter le rôle « Administrateur » et de créer un utilisateur pour le rôle.

Dans Explorateur de solutions, développez le dossier Controllers et ouvrez le fichier HomeController.cs. Ajoutez l’attribut Authorize à la Admin méthode .

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

Ouvrez le fichier AdminController.cs et ajoutez l’attribut Authorize à la classe entière AdminController .

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

Notes

MVC et l’API web définissent tous deux des attributs Authorize , dans des espaces de noms différents. MVC utilise System.Web.Mvc.AuthorizeAttribute, tandis que l’API Web utilise System.Web.Http.AuthorizeAttribute.

Désormais, seuls les administrateurs peuvent afficher la page Administration. En outre, si vous envoyez une requête HTTP au contrôleur Administration, celle-ci doit contenir un cookie d’authentification. Si ce n’est pas le cas, le serveur envoie une réponse HTTP 401 (non autorisée). Vous pouvez le voir dans Fiddler en envoyant une requête GET à http://localhost:*port*/api/admin.

PrécédentSuivant