Parte 4: Aggiunta di una vista amministratore

di Rick Anderson

Scaricare il progetto completato

Aggiungere una visualizzazione amministratore

A questo punto si tornerà al lato client e si aggiungerà una pagina in grado di utilizzare i dati dal controller di amministrazione. La pagina consentirà agli utenti di creare, modificare o eliminare prodotti inviando richieste AJAX al controller.

In Esplora soluzioni espandere la cartella Controllers e aprire il file denominato HomeController.cs. Questo file contiene un controller MVC. Aggiungere un metodo denominato Admin:

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

    return View();
}

Il metodo HttpRouteUrl crea l'URI per l'API Web e lo archiviamo nel contenitore di visualizzazioni per un secondo momento.

Posizionare quindi il cursore di testo all'interno del metodo di azione, quindi fare clic con il pulsante destro del Admin mouse e selezionare Aggiungi visualizzazione. Verrà visualizzata la finestra di dialogo Aggiungi visualizzazione .

Nella finestra di dialogo Aggiungi visualizzazione assegnare alla visualizzazione il nome "Admin". Selezionare la casella di controllo Crea una visualizzazione fortemente tipizzata. In Classe modello selezionare "Product (ProductStore.Models)". Lasciare invariate tutte le altre opzioni come valori predefiniti.

Facendo clic su Aggiungi viene aggiunto un file denominato Admin.cshtml in Views/Home. Aprire questo file e aggiungere il codice HTML seguente. Questo HTML definisce la struttura della pagina, ma nessuna funzionalità è ancora collegata.

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

Creare un collegamento alla pagina di amministrazione

In Esplora soluzioni espandere la cartella Visualizzazioni e quindi espandere la cartella Condivisa. Aprire il file denominato _Layout.cshtml. Individuare l'elemento ul con id = "menu" e un collegamento di azione per la vista Admin:

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

Eseguire l'applicazione e fare clic sul collegamento "Amministratore" visualizzato nella parte superiore della home page. La pagina Admin dovrebbe essere simile alla seguente:

Al momento, la pagina non esegue alcuna operazione. Nella sezione successiva si userà Knockout.js per creare un'interfaccia utente dinamica.

Aggiungere l'autorizzazione

La pagina Admin è attualmente accessibile a chiunque visiti il sito. Modificare questa impostazione per limitare l'autorizzazione agli amministratori.

Per iniziare, aggiungere un ruolo "Amministratore" e un utente amministratore. In Esplora soluzioni espandere la cartella Filtri e aprire il file denominato InitializeSimpleMembershipAttribute.cs. Individuare il SimpleMembershipInitializer costruttore. Dopo la chiamata a WebSecurity.InitializeDatabaseConnection, aggiungere il codice seguente:

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

Si tratta di un modo rapido e sporco per aggiungere il ruolo "Amministratore" e creare un utente per il ruolo.

In Esplora soluzioni espandere la cartella Controllers e aprire il file HomeController.cs. Aggiungere l'attributo Authorize al Admin metodo .

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

Aprire il file AdminController.cs e aggiungere l'attributo Authorize all'intera AdminController classe.

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

Ora solo gli amministratori possono visualizzare la pagina Amministratore. Inoltre, se si invia una richiesta HTTP al controller di amministrazione, la richiesta deve contenere un cookie di autenticazione. In caso contrario, il server invia una risposta HTTP 401 (non autorizzata). È possibile visualizzarlo in Fiddler inviando una richiesta GET a http://localhost:*port*/api/admin.