Atualizar de ASP.NET MVC e API Web para ASP.NET Core MVC

Este artigo mostra como começar a migrar um projeto MVC ASP.NET para ASP.NET Core MVC. No processo, ele realça as alterações relacionadas de ASP.NET MVC.

A migração de ASP.NET MVC é um processo de várias etapas. Este artigo abrange:

• Configuração inicial.
• Controladores e modos de exibição básicos.
• Conteúdo estático.
• Dependências do lado do cliente.

Para migrar a configuração e Identity o código, consulte Migrar configuração para ASP.NET Core e Migrar Autenticação e Identity para ASP.NET Core.

Prerequisites

• Visual Studio 2019 16.4 ou posterior com ASP.NET e carga de trabalho de desenvolvimento
• SDK do .NET Core 3.1.

Criar o projeto de início ASP.NET MVC

Crie um exemplo ASP.NET projeto MVC no Visual Studio para migrar:

1. No menu Arquivo, selecione Novo>Projeto.
2. Selecione ASP.NET Aplicativo Web (.NET Framework) e selecione Avançar.
3. Nomeie o projeto WebApp1 para que o namespace corresponda ao projeto ASP.NET Core criado na próxima etapa. Selecione Criar.
4. Selecione MVC e, em seguida, selecione Criar.

Criar o projeto ASP.NET Core

Crie uma nova solução com um novo projeto do ASP.NET Core para o qual migrar:

1. Inicie uma segunda instância do Visual Studio.
2. No menu Arquivo, selecione Novo>Projeto.
3. Selecione ASP.NET Aplicativo Web Principal e, em seguida, selecione Avançar.
4. Na caixa de diálogo Configurar seu novo projeto , nomeie o projeto WebApp1.
5. Defina o local como um diretório diferente do projeto anterior para usar o mesmo nome de projeto. Usar o mesmo namespace facilita a cópia de código entre os dois projetos. Selecione Criar.
6. Na caixa de diálogo Criar um novo aplicativo Web ASP.NET Core, confirme se .NET Core e ASP.NET Core 3.1 estão selecionados. Selecione o modelo de projeto aplicativo Web (modeloView-Controller) e selecione Criar.

Configurar o site do ASP.NET Core para usar o MVC

No ASP.NET Core 3.0 ou em projetos posteriores, o .NET Framework não é mais uma estrutura de destino com suporte. Seu projeto deve ter como destino o .NET Core. A estrutura compartilhada do ASP.NET Core, que inclui o MVC, faz parte da instalação do runtime do .NET Core. A estrutura compartilhada é referenciada automaticamente ao usar o Microsoft.NET.Sdk.Web SDK no arquivo de projeto:

<Project Sdk="Microsoft.NET.Sdk.Web">

Para obter mais informações, consulte a referência do Framework.

No ASP.NET Core, a classe Startup:

• Substitui Global.asax.
• Lida com todas as tarefas de inicialização do aplicativo.

Saiba mais em Inicialização de aplicativos no ASP.NET Core.

No projeto ASP.NET Core, abra o Startup.cs arquivo:

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

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllersWithViews();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        }
        app.UseHttpsRedirection();
        app.UseStaticFiles();

        app.UseRouting();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllerRoute(
                name: "default",
                pattern: "{controller=Home}/{action=Index}/{id?}");
        });
    }
}

Aplicações ASP.NET Core devem ativar recursos do framework usando middlewares. O código gerado pelo modelo anterior adiciona os seguintes serviços e middleware:

• O AddControllersWithViews método de extensão registra o suporte ao serviço MVC para controladores, recursos relacionados à API e exibições. Para obter mais informações sobre as opções de registro de serviço do MVC, consulte o registro do serviço MVC
• O UseStaticFiles método de extensão adiciona o manipulador Microsoft.AspNetCore.StaticFilesde arquivos estático. O UseStaticFiles método de extensão deve ser chamado antes UseRouting. Saiba mais em Arquivos estáticos no ASP.NET Core.
• O UseRouting método de extensão adiciona roteamento. Saiba mais em Roteamento no ASP.NET Core.

Essa configuração existente inclui o que é necessário para migrar o exemplo ASP.NET projeto MVC. Para obter mais informações sobre as opções de middleware do ASP.NET Core, consulte a inicialização do aplicativo no ASP.NET Core.

Migrar controladores e exibições

No projeto ASP.NET Core, uma nova classe de controlador e uma nova classe de exibição vazias seriam adicionadas para servir como espaços reservados, utilizando os mesmos nomes das classes de controlador e exibição em qualquer projeto ASP.NET MVC do qual migrar.

O projeto ASP.NET Core WebApp1 já inclui um controlador de exemplo mínimo e uma exibição com o mesmo nome do projeto MVC ASP.NET. Portanto, eles servirão como espaços reservados para o controlador e as visões do ASP.NET MVC a serem migrados do projeto ASP.NET MVC WebApp1.

1. Copie os métodos do ASP.NET MVC HomeController para substituir os novos métodos ASP.NET Core HomeController . Não existe a necessidade de alterar o tipo de retorno dos métodos de ação. O tipo de retorno do método de ação do controlador do modelo interno do ASP.NET MVC é ActionResult; em ASP.NET Core MVC, os métodos de ação retornam IActionResult em vez disso. ActionResult implementa IActionResult.
2. No projeto ASP.NET Core, clique com o botão direito do mouse no diretório Views/Home , selecione Adicionar>Item Existente.
3. Na caixa de diálogo Adicionar Item Existente, navegue até o diretório do projeto Home.
4. Selecione os arquivos About.cshtml, Contact.cshtml e Index.cshtmlRazor, depois selecione Adicionar, substituindo os arquivos existentes.

Para obter mais informações, consulte Manipular solicitações com controladores em ASP.NET Core MVC e Exibições em ASP.NET Core MVC.

Testar cada método

Cada ponto de extremidade do controlador pode ser testado, no entanto, o layout e os estilos são abordados posteriormente no documento.

1. Execute o aplicativo ASP.NET Core.
2. Invoque as exibições renderizadas do navegador no aplicativo ASP.NET Core em execução substituindo o número da porta atual pelo número da porta usado no projeto ASP.NET Core. Por exemplo, https://localhost:44375/home/about.

Migrar conteúdo estático

No ASP.NET MVC 5 ou anterior, o conteúdo estático era hospedado do diretório raiz do projeto Web e era intermixado com arquivos do lado do servidor. No ASP.NET Core, os arquivos estáticos são armazenados no diretório raiz da Web do projeto. O diretório padrão é {content root}/wwwroot, mas pode ser alterado. Saiba mais em Arquivos estáticos no ASP.NET Core.

Copie o conteúdo estático do projeto ASP.NET MVC WebApp1 para o wwwroot diretório no projeto ASP.NET Core WebApp1 :

1. No projeto ASP.NET Core, clique com o botão direito do mouse no wwwroot diretório, selecione Adicionar>Item Existente.
2. Na caixa de diálogo Adicionar Item Existente , navegue até o projeto ASP.NET MVC WebApp1 .
3. Selecione o favicon.ico arquivo e, em seguida, selecione Adicionar, substituindo o arquivo existente.

Migrar os arquivos de layout

Copie os arquivos de layout de projeto do ASP.NET MVC para o projeto do ASP.NET Core:

1. No projeto ASP.NET Core, clique com o botão direito do mouse no Views diretório, selecione Adicionar>Item Existente.
2. Na caixa de diálogo Adicionar Item Existente, navegue até o diretório do projeto ASP.NET MVC Views.
3. Selecione o _ViewStart.cshtml arquivo e selecione Adicionar.

Copie os arquivos de layout compartilhado do projeto ASP.NET MVC para o projeto ASP.NET Core:

1. No projeto ASP.NET Core, clique com o botão direito do mouse no Views/Shared diretório, selecione Adicionar>Item Existente.
2. Na caixa de diálogo Adicionar Item Existente, navegue até o diretório do projeto ASP.NET MVC Views/Shared.
3. Selecione o _Layout.cshtml arquivo e, em seguida, selecione Adicionar, substituindo o arquivo existente.

No projeto ASP.NET Core, abra o _Layout.cshtml arquivo. Faça as seguintes alterações para corresponder ao código concluído mostrado abaixo:

Atualize a inclusão do CSS do Bootstrap para corresponder ao código concluído abaixo:

1. Substitua @Styles.Render("~/Content/css") por um elemento <link> para carregar bootstrap.css (veja abaixo).
2. Remova @Scripts.Render("~/bundles/modernizr").

A marcação de substituição concluída para a inclusão do CSS do Bootstrap:

<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">

Atualize a inclusão de JavaScript jQuery e Bootstrap para corresponder ao código concluído abaixo:

1. Substitua @Scripts.Render("~/bundles/jquery") por um <script> elemento (veja abaixo).
2. Substitua @Scripts.Render("~/bundles/bootstrap") por um <script> elemento (veja abaixo).

A marcação de substituição concluída para inclusão do JavaScript do jQuery e do Bootstrap:

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

O arquivo atualizado _Layout.cshtml é mostrado abaixo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    @RenderSection("scripts", required: false)
</body>
</html>

Exiba o site no navegador. Ele deverá ser renderizado com os estilos esperados no lugar.

Configurar o agrupamento e a minificação

ASP.NET Core é compatível com várias soluções de agrupamento e minificação de software livre, como WebOptimizer e outras bibliotecas semelhantes. O ASP.NET Core não fornece uma solução nativa de agrupamento e minificação. Para obter informações sobre como configurar o agrupamento e a minificação, consulte Bundling e Minification.

Resolver erros de HTTP 500

Há muitos problemas que podem causar uma mensagem de erro HTTP 500 que não contém informações sobre a origem do problema. Por exemplo, se o Views/_ViewImports.cshtml arquivo contiver um namespace que não existe no projeto, um erro HTTP 500 será gerado. Por padrão, em aplicativos do ASP.NET Core, a UseDeveloperExceptionPage extensão é adicionada ao IApplicationBuilder e executada quando o ambiente é Desenvolvimento. Isso é detalhado no seguinte código:

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

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllersWithViews();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        }
        app.UseHttpsRedirection();
        app.UseStaticFiles();

        app.UseRouting();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllerRoute(
                name: "default",
                pattern: "{controller=Home}/{action=Index}/{id?}");
        });
    }
}

ASP.NET Core converte exceções sem tratamento em respostas de erro HTTP 500. Normalmente, os detalhes do erro não são incluídos nessas respostas para impedir a divulgação de informações potencialmente confidenciais sobre o servidor. Para obter mais informações, consulte a Página de Exceção do Desenvolvedor.

Próximas etapas

• <identity.md>

Recursos adicionais

• ASP.NET Core Blazor
• Auxiliares de Marca no ASP.NET Core