Parte 4: Adicionar uma Vista de Administrador

por Rick Anderson

Descarregar Projeto Concluído

Adicionar uma Vista de Administrador

Agora vamos passar para o lado do cliente e adicionar uma página que pode consumir dados do controlador de administrador. A página permitirá aos utilizadores criar, editar ou eliminar produtos, enviando pedidos AJAX ao controlador.

No Explorador de Soluções, expanda a pasta Controladores e abra o ficheiro chamado HomeController.cs. Este ficheiro contém um controlador MVC. Adicione um método chamado Admin:

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

    return View();
}

O método HttpRouteUrl cria o URI para a API web, e armazenamo-lo no saco de visualizações para mais tarde.

De seguida, posiciona o cursor de texto dentro do Admin método de ação, depois clica com o botão direito e seleciona Adicionar Vista. Isto vai abrir o diálogo de Adicionar Vista .

No diálogo Adicionar Vista , nomeie a vista como "Admin". Selecione a caixa de seleção chamada Criar uma vista fortemente tipificada. Em Classe de Modelo, selecione "Produto (ProductStore.Models)". Deixa todas as outras opções como valores predefinidos.

Clicar em Adicionar adiciona um ficheiro chamado Admin.cshtml em Visualizações/Casa. Abra este ficheiro e adicione o seguinte HTML. Este HTML define a estrutura da página, mas ainda não existe nenhuma funcionalidade ligada.

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

Crie um link para a página de administração

No Explorador de Soluções, expanda a pasta Vistas e depois expanda a pasta Partilhada. Abra o ficheiro chamado _Layout.cshtml. Localize o elemento ul com id = "menu" e um link de ação para a vista de Administrador:

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

Execute a aplicação e clique no link "Admin" que aparece no topo da página inicial. A página de Administração deve ser a seguinte:

Neste momento, a página não faz nada. Na secção seguinte, vamos usar Knockout.js para criar uma interface dinâmica.

Adicionar Autorização

A página de Administração está atualmente acessível a qualquer pessoa que visite o site. Vamos mudar isto para restringir a permissão aos administradores.

Comece por adicionar um papel de "Administrador" e um utilizador administrador. No Explorador de Soluções, expanda a pasta Filtros e abra o ficheiro chamado InitializeSimpleMembershipAttribute.cs. Localiza o SimpleMembershipInitializer construtor. Após a chamada para WebSecurity.InitializeDatabaseConnection, adicione o seguinte código:

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

Esta é uma forma rápida e simples de adicionar o papel de "Administrador" e criar um utilizador para o cargo.

No Explorador de Soluções, expanda a pasta Controladores e abra o ficheiro HomeController.cs. Adicione o atributo Authorize ao Admin método.

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

Abra o ficheiro AdminController.cs e adicione o atributo Authorize a toda a classe AdminController.

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

Agora só os administradores podem ver a página de Administrador. Além disso, se enviar um pedido HTTP ao controlador de administrador, o pedido deve conter um cookie de autenticação. Se não, o servidor envia uma resposta HTTP 401 (Não autorizada). Pode ver isto no Fiddler enviando um pedido GET para http://localhost:*port*/api/admin.