Parte 1: Visão Geral e Criação do Projeto

por Rick Anderson

Descarregar Projeto Concluído

Entity Framework é um framework de mapeamento objeto/relacional. Mapeia os objetos de domínio no seu código para entidades numa base de dados relacional. Na maioria das vezes, não tens de te preocupar com a camada da base de dados, porque o Entity Framework trata disso por ti. O teu código manipula os objetos, e as alterações são mantidas numa base de dados.

Sobre o Tutorial

Neste tutorial, vais criar uma aplicação simples de loja. A candidatura tem duas partes principais. Os utilizadores normais podem ver produtos e criar encomendas:

Os administradores podem criar, eliminar ou editar produtos:

Competências que vais aprender

Isto é o que vais aprender:

• Como usar o Entity Framework com ASP.NET Web API.
• Como usar knockout.js para criar uma interface de cliente dinâmica.
• Como usar a autenticação de formulários com Web API para autenticar utilizadores.

Embora este tutorial seja autónomo, talvez queira ler primeiro os seguintes tutoriais:

• A sua primeira ASP.NET API Web
• Criação de uma API Web que Suporte Operações CRUD

Algum conhecimento sobre ASP.NET MVC também é útil.

Descrição geral

A um nível geral, aqui está a arquitetura da aplicação:

• ASP.NET MVC gera as páginas HTML para o cliente.
• ASP.NET Web API expõe operações CRUD sobre os dados (produtos e encomendas).
• O Entity Framework traduz os modelos C# usados pela Web API em entidades de base de dados.

O diagrama seguinte mostra como os objetos de domínio são representados em várias camadas da aplicação: a camada de base de dados, o modelo de objetos e, finalmente, o formato wire, que é usado para transmitir dados ao cliente via HTTP.

Criar o Projeto Visual Studio

Pode criar o projeto tutorial usando o Visual Web Developer Express ou a versão completa do Visual Studio.

Na página Inicial , clique em Novo Projeto.

No painel de Modelos, selecione Modelos Instalados e expanda o nó Visual C#. Em Visual C#, selecione Web. Na lista de modelos de projeto, selecione ASP.NET Aplicação Web MVC 4. Nomeie o projeto como "ProductStore" e clique em OK.

No diálogo Projeto New ASP.NET MVC 4 , selecione Aplicação Internet e clique em OK.

O modelo "Aplicação Internet" cria uma aplicação ASP.NET MVC que suporta autenticação de formulários. Se executares a aplicação agora, ela já tem algumas funcionalidades:

• Novos utilizadores podem registar-se clicando no link "Registar" no canto superior direito.
• Os utilizadores registados podem iniciar sessão clicando no link "Iniciar sessão".

A informação de membros é mantida numa base de dados que é criada automaticamente. Para mais informações sobre autenticação de formulários no ASP.NET MVC, consulte Walkthrough: Utilização da Autenticação de Formulários em ASP.NET MVC.

Atualizar o ficheiro CSS

Este passo é cosmético, mas fará com que as páginas sejam renderizadas como as capturas de ecrã anteriores.

No Explorador de Soluções, expanda a pasta Content e abra o ficheiro chamado Site.css. Adicione os seguintes estilos CSS:

.content {
    clear: both;
    width: 90%;
}

li {
    list-style-type: none;
}
        
#products li {
    width: 300px;
    background-color: #aaf;
    font-size: 1.5em;
    font-weight: bold;
    color: #ff0;
    margin: 0 0 5px 0;
    padding: 0 5px 0 5px;
}
        
.price  {
    float: right;
    color: #c00;
    font-size: 0.75em;
}
        
.details thead td {
    background-color: #CCCCCC;
    color: #333333;
}

.details td {
padding: 6px;
}
        
.details td.qty {
text-align: center;
}       
        
#cart a {
color: Blue;
font-size: .75em;
} 
        
#update-products li { 
    padding: 5px; 
    color: #666;
    border-style: dashed;
    border-width: 2px;
    border-color: #666;
}

#update-products li .item {
width: 120px;
display: inline-block;
text-align: right;
}