Criando um projeto MVC com o dotnet CLI - parte 3

Na terceira parte iremos ver como adicionar as dependências necessárias para que possamos adicionar nossos controllers views ao projeto.

Para ler este post, é necessário ler os anteriores, Parte 2 e Parte 1.

A primeira coisa a fazer, é adicionarmos os pacotes Microsoft.AspNetCore.Mvc Microsoft.AspNetCore.Mvc.Core.

Para adicionar os pacotes ao nosso projeto, edite o csproj e adicione as seguintes linhas

<PackageReference Include="Microsoft.AspNetCore.Mvc" Version="2.0.0-preview1-final"/>    
<PackageReference Include="Microsoft.AspNetCore.Mvc.Core" Version="2.0.0-preview1-final"/>    

Após a adição do pacote, rode um dotnet restore e um dotnet build no terminal do VS Code.

Ficando da seguinte forma o csproj

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>netcoreapp2.0</TargetFramework>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore" Version="2.0.0-preview1-final"/>
    <PackageReference Include="Microsoft.AspNetCore.Mvc" Version="2.0.0-preview1-final"/>    
    <PackageReference Include="Microsoft.AspNetCore.Mvc.Core" Version="2.0.0-preview1-final"/>    
    <PackageReference Include="Microsoft.AspNetCore.Hosting" Version="2.0.0-preview1-final"/>    
    <PackageReference Include="Microsoft.AspNetCore.Hosting.Abstractions" Version="2.0.0-preview1-final" />
  </ItemGroup>
</Project>

Com isso já podemos fazer as alterações necessárias para que o nosso projeto possa dar suporte ao MVC. Começando pelo Startup.cs.

O ponto de partida, é adicionar no método ConfigureServices a injeção de dependência em nosso projeto para dar suporte ao MVC, para isso iremos precisar do namespace Microsoft.Extensions.DependencyInjection, pois é nele que se encontra um método de extensão que irá adicionar todas as dependências necessárias aos serviços do MVC. A implementação do método pode ser encontrada no github do projeto ASPNET MVC.

Ficando da seguinte forma o ConfigureServices:

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc();
}

O próximo passo é adicionar as informações da rota default para nossos controllers, isso deve ser feito no método Configure dentro no nosso Startup.cs.

Ficando da seguinte maneira

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseMvc(routes => {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });
}

O método UseMvc é responsável por adicionar as rotas para as requisições do pipeline e configura o MVC como manipulador padrão.

A classe Startup.cs ficou da seguinte forma

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;

namespace ExemploBlog
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        private IConfiguration Configuration { get; }

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
        }

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller=Home}/{action=Index}/{id?}");
            });
        }
    }
}

Adicionando Controllers e Views ao Projeto

Agora já podemos adicionar o nosso primeiro controller view ao projeto. 

Vamos começar organizando a estrutura de pastas. Adicione uma pasta Controllers e Views a raiz do projeto.

Dentro da pasta Controllers iremos adicionar o nosso primeiro controller, que vamos chamar de HomeController. 

Todo controller que teremos, deverá obrigatoriamente herdar da classe Controller, para isso precissaremos do namespace Microsoft.AspNetCore.Mvc.

Ficando da seguinte forma o nosso HomeController:

using Microsoft.AspNetCore.Mvc;

namespace ExemploBlog
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Para que seja possível realizar uma chamada ao controller em um navegador, o mesmo necessita de uma action, que nesse caso é o método Index, que faz um simples retorno ao um IActionResult atráves da chamada ao método View() que está implementado na classe Controller.

Com a classe HomeController implementada, vamos adicionar a nossa view. Adicione uma pasta Home dentro da pasta Views. Por padrão o HomeController irá procurar por uma view com o mesmo nome da action adicionada da extensão .cshtml, primeiramente em uma pasta com o mesmo nome do controller sem o sufixo Controller.

Dentro da pasta Home adicione um novo arquivo chamado de Index.cshtml.

Inicialmente iremos adicionar um html direto nesse arquivo, ficando da seguinte forma.

<html>
    <body>
        <h1>Index</h1>
    </body>
</html>

Agora já é possível rodarmos o projeto e abrir no navegador a chamada ao HomeController, bastando rodar no terminal do VS Code o dotnet run, mas antes rode um dotnet restore e um dotnet build.

Ao acessar o http://localhost:5000, já teremos a chamada ao HomeController. Não foi necessário colocar o caminho completo http://localhost:5000/Home/Index pois definimos na nossa rota padrão no o template "{controller=Home}/{action=Index}/{id?}") onde o controller default sempre será o Home, a action default sempre será a Index e também temos um parâmetro id que é opcional.

Para o próximo post, iremos ver como trabalhar com um Layout padrão para o projeto.

O código fonte deste projeto pode ser baixado do meu github.

Comentar

Loading