Parte 4: adicionando uma exibição de administrador

por Mike Wasson

Baixar projeto concluído

Adicionar uma exibição de administrador

Agora, vamos voltar ao lado do cliente e adicionar uma página que pode consumir dados do controlador de administração. A página permitirá que os usuários criem, editem ou excluam produtos, enviando solicitações AJAX para o controlador.

Em Gerenciador de Soluções, expanda a pasta controladores e abra o arquivo chamado HomeController.cs. Esse arquivo 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 da Web e armazenamos isso no recipiente de exibição para mais tarde.

Em seguida, posicione o cursor de texto dentro do método de ação Admin, clique com o botão direito do mouse e selecione Adicionar exibição. Isso abrirá a caixa de diálogo Adicionar exibição .

Na caixa de diálogo Adicionar exibição , nomeie o modo de exibição "admin". Marque a caixa de seleção rotulada criar uma exibição fortemente tipada. Em classe de modelo, selecione "produto (ProductStore. Models)". Deixe todas as outras opções como seus valores padrão.

Clicar em Adicionar adiciona um arquivo chamado admin. cshtml em exibições/início. Abra este arquivo e adicione o seguinte HTML. Esse HTML define a estrutura da página, mas nenhuma funcionalidade está conectada ainda.

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

Em Gerenciador de Soluções, expanda a pasta exibições e expanda a pasta compartilhada. Abra o arquivo chamado _layout. cshtml. Localize o elemento UL com ID = "menu" e um link de ação para a exibição de administrador:

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

Note

No projeto de exemplo, fiz algumas outras alterações superficiais, como substituir a cadeia de caracteres "seu logotipo aqui". Eles não afetam a funcionalidade do aplicativo. Você pode baixar o projeto e comparar os arquivos.

Execute o aplicativo e clique no link "admin" que aparece na parte superior do home page. A página de administração deve ser parecida com a seguinte:

No momento, a página não faz nada. Na próxima seção, usaremos knockout. js para criar uma interface do usuário dinâmica.

Adicionar autorização

A página de administração está acessível no momento para qualquer pessoa que visitar o site. Vamos alterar isso para restringir a permissão aos administradores.

Comece adicionando uma função de "administrador" e um usuário administrador. Em Gerenciador de Soluções, expanda a pasta filtros e abra o arquivo chamado InitializeSimpleMembershipAttribute.cs. Localize o construtor de SimpleMembershipInitializer. 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);
}

Essa é uma maneira rápida e suja de adicionar a função de "administrador" e criar um usuário para a função.

Em Gerenciador de Soluções, expanda a pasta controladores e abra o arquivo HomeController.cs. Adicione o atributo Authorize ao método Admin.

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

Abra o arquivo AdminController.cs e adicione o atributo autorizar a toda a classe de AdminController.

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

Note

O MVC e a API da Web definem autorizar atributos, em namespaces diferentes. O MVC usa System. Web. Mvc. authorattribute, enquanto a API Web usa System. Web. http. authorattribute.

Agora, somente os administradores podem exibir a página de administração. Além disso, se você enviar uma solicitação HTTP para o controlador de administração, a solicitação deverá conter um cookie de autenticação. Caso contrário, o servidor enviará uma resposta HTTP 401 (não autorizado). Você pode ver isso no Fiddler enviando uma solicitação GET para http://localhost:*port*/api/admin.