Criando sua primeira aplicação com o ASP.NET 5 MVC 6 [TUTORIAL]

Fala galera tudo bem?
Vocês já devem ter ouvido falar sobre o ASP.NET 5 MVC 6, que recentemente recebeu sua versão Release Candidate, ou seja agora teremos suporte a essa versão então porque não começar a se aventurar nesse novo mundo? Esse é o intuito desse artigo!
Preparei um pequeno tutorial de como criar a sua primeira aplicação utilizando o ASP.NET 5, é uma aplicação bem simples, mas é um início para você poder avançar com os estudos, chega de conversa em vamos ao que interessa:

Configurações iniciais

Antes de iniciar precisamos nos certificar que temos o Visual Studio 2015 instalado e o ASP.NET 5, caso você não possua segue o passo a passo abaixo:

  1. Instale o Visual Studio 2015 (https://go.microsoft.com/fwlink/?LinkId=532606)Durante a instalação você deve incluir a instalação do Microsoft Web Developer Tools.
  2. Instale o ASP.NET 5 (https://go.microsoft.com/fwlink/?LinkId=627627)
  3. Habilite o ASP.NET 5 command-line tools, para isso abra o Prompt de Comando do Windows e execute e seguinte instrução:
    dnvm upgrade
  4. Se você estiver utilizando o Windows 7 será necessário instalar o Visual C++ Redistributable for Visual Studio 2012 Update 4 (https://www.microsoft.com/en-us/download/confirmation.aspx?id=30679)

Agora com o ambiente preparado mãos na massa com nossa primeira aplicação em ASP.NET 5!

Criando a aplicação

Iniciei seu Visual Studio 2015, vá até o menu File e selecione a opção New Project.

Selecione a opção ASP.NET Web Application que encontrasse em Installed > Templates > Visual C# > Web

Vou nomear o meu projeto como School mas faça como você preferir, em seguida clique em OK!

Na janela que se abre você deve selecionar a opção Web Application que está abaixo do ASP.NET Templates.

Vamos desabilitar a opção de autenticação, para isso clique no botão Change Authentication.
Marque a opção No Authentication e clique em OK.
Note que agora está selecionado para não utilizar autenticação! Clique em OK e aguarde que o projeto será criado. (Esse processo pode demorar)
Pronto! Nosso projeto está criado e a nossa solução ficou assim:
Nesse momento já é possível notar as diferenças do ASP.NET 4 para o 5 sendo que a principal que possivelmente vai ser a primeira a ser notada por quem já trabalha com ASP.NET a algum tempo é a ausência do Web.config.

Adicionando referências necessárias

Precisamos agora fazer a referência ao Entity Framework que vamos utilizar para manipular nossos dados, e isso se tornou diferente também ao meu ver ficou muito mais claro agora. Vamos abrir o arquivo project.json.
Vamos incluir as seguintes referências:

“EntityFramework.MicrosoftSqlServer”: “7.0.0-rc1-final”,
“EntityFramework.Commands”: “7.0.0-rc1-final”

Vamos incluir também a referência para poder trabalhar com o Scaffold:

“Microsoft.Extensions.CodeGenerators.Mvc”: “1.0.0-rc1-final”

E por fim em “commands” vamos incluir a referência:

“ef”: “EntityFramework.Commands”

Qualquer dúvida o código completo está na Figura 8.

Agora umas das coisas mais lindas acontecem ao salvar o arquivo! Nesse momento todas as dependências declaradas no arquivo project.json são instaladas sem necessitar de nenhuma ação para isso! Lindo não?

Vamos incluir as classes de modelos, mas antes precisamos criar a pasta Models em nosso projeto. Clique com o botão direito no projeto Add > New folder.

Criando os Modelos

Dentro da pasta Models vamos incluir as classes:

  • Student.cs
  • Teacher.cs
  • Course.cs
  • StudentCourse

E para cada classe vamos incluir propriedades básicas, segue abaixo:

Vamos agora criar uma classe chamada SchoolContext que será responsável pela manipulação dos dados de nossa base. Essa classe vai herdar da classe DbContext para isso será necessário referenciar a namespace Microsoft.Data.Entity.

Precisamos incluir as propriedades que vão representar as nossas tabelas:

 

Configurando o acesso ao banco de dados

Agora vamos acrescentar a string de conexão que vai apontar para a nossa base de dados, vamos utilizar para isso o localdb, abaixo a string utilizada:

Server=(localdb)\\MSSQLLocalDB;Database=SchoolDb;Trusted_Connection=True;MultipleActiveResultSets=true;

A string de conexão deve ficar no arquivo appsettings.json que se encontra na raiz do projeto

Abra agora a classe Startup.cs e dentro do método ConfigureServices vamos adicionar a instrução abaixo que vai ser responsável por adicionar o nosso contexto e também vai informar qual string de conexão que o EF vai utilizar.

Será necessário acrescentar essas duas referências a classe Startup:

Pronto! Agora podemos criar nossas Controlers e nossas Views, mas para isso vamos utilizar a maravilhosa ferramenta chamada Scaffold que irá nos ajudar a escrever alguns códigos convencionais, no caso toda estrutura do CRUD.

 

Criando Controllers e Views

Clique com o botão direito na pasta Controllers > Add > New Scaffolded Item…

Na janela selecione a opção MVC 6 Controller with views, using Entity Framework e clique em Add.

 

Agora você deve selecionar a classe que vai dar o modelo ao controller e selecionar na sequência a classe que representa o contexto.

Comecei pela classe Student, caso você ache necessário pode alterar o nome da Controller. Depois de tudo definido clique em Add e nesse momento será criado a Controller e as Views.

 

Faça o mesmo com as demais classes (Teacher, Course e StudentCourse), então sua Solution ficará conforme a imagem abaixo:

 

Gerando a Base de Dados

Agora precisamos pedir para o Entity Framework criar nossa base de dados e para isso vamos utilizar o PowerShell para poder executar o migrations que fará essa criação para nós.

Vá no menu View > Other Windows > PowerShell Interactive Window.

 

Abrirá uma tela igual a esta abaixo:

 

Antes de executar alguns comandos precisamos estar no diretório do projeto, para descobrir o diretório clique com o botão direito no projeto e vá na opção Open Folder in File Explorer.

 

Ao abrir o Explorer basta você copiar todo caminho do diretório.

 

Agora vamos acessar o diretório através do PowerShell.

Digite: cd (e cole o diretório que você acabou de copiar)

Em seguida pressione ENTER.

 

Agora vamos digitar o seguinte comando: dnu restore

Pressione ENTER, e aguarde que o processo seja executado por completo!

Na sequência digite: dnx ef migrations add Initial

Pressione ENTER e aguarde uma mensagem similar a essa:

E por fim digite: dnx ef database update

Pressione ENTER e aguarde finalizar e exibir uma mensagem similar a essa:

Pronto para verificar se está tudo certo vamos conferir em nossa Solution se existe uma nova pasta chamada Migrations conforme a imagem abaixo.

 

Podemos verificar também a base criada abrindo o SQL Server Object Explorer e verificando as tabelas criadas:

 

Alterando os menus

Pronto nossa base está criada e tudo “deve” estar funcionando! Antes de rodar a aplicação vamos alterar os links do menu principal para poder ter acesso as páginas que criamos. Para isso encontre na sua Solution a View chamada _Layout.cshtml. Esse arquivo está em Views > Shared.

Identifique no html a area que representa a navbar, veja a imagem abaixo:

Inclua no lugar os menus para acessar as novas páginas criadas (Students, Teachers e Courses).

 

Testando a aplicação

Agora podemos rodar nossa aplicação, pressione (CTRL + F5).

 

Pronto nossa aplicação está rodando corretamente! Será?

Vamos acessar o menu Professores:

Aparentemente está tudo normal, não apareceu nenhum professor porque não incluímos nenhum, vamos criar um professor clicando no link Create New.

 

Insira o nome do professor e clique em Create.

 

Ótimo! O professor incluiu normalmente, agora vamos criar um novo Curso.

 

Pronto estava tudo bom demais para ser verdade! Se você clicar na lista de professores verá que ele não mostra nenhum professor! Isso acontece por que existe um problema no Scaffold que não carregou os itens da lista então faremos isso na mão!

Vá em Views > Courses > Create.cshtml e abra esse arquivo localize o item <select> que deveria vir com os professores carregados.

Como podemos perceber o Scaffold não inclui os itens desse select, se abrirmos o CoursesController veremos que a lista de professores está sendo enviada por um ViewData, porém em momento algum na View essa ViewData está sendo chamada.

Mas aqui já temos um problema, no objeto SelectList ele utiliza o TeacherID como valor do item e utiliza o “Teacher” como Text! Só que essa propriedade não existe dentro da classe Teacher, devemos alterar para “Name”, e ficará como a imagem abaixo:

Agora sim vamos resolver os problemas no arquivo Create.cshtml.

Faremos duas modificações. A primeira bem no início do arquivo, vamos pegar o conteúdo da ViewData e converter para um IEnumerable de SelectListItem, utilizando um cast para fazer essa conversão, e atribuiremos esse IEnumerable em uma variável. Veja na imagem abaixo como ficará!

Note que coloquei dentro do bloco @{ } onde se encontra a ViewData do Título da página.

Agora vamos utilizar essa variável teacher para que seja os itens no nosso select, para isso vamos utilizar o atributo asp-items atribuindo a variável, como ilustra a imagem:

Agora sim, vamos salvar e executar nossa aplicação novamente.

Bingo! Agora está funcionando perfeitinho.

 

Agora será preciso fazer essa alteração em todas as Views que utilizarem o ViewData para carregar a lista.

Chegamos ao fim do nosso tutorial e espero que possa ter ajudado você a conhecer um pouco do ASP.NET 5 MVC 6, tem muitas novidades que não abordei nesse tutorial e que pretendo abordar em outros.

Gostaria muito que vocês comentassem o que acharam, e até mesmo caso eu tenha me equivocado em alguma informação que vocês possam acrescentar!

Grande abraço a todos e fiquem com Deus!

About the Author

Léo Andrade

Leave a Reply

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *