Actualización de ASP.NET MVC y API web a ASP.NET Core MVC

En este artículo se muestra cómo empezar a migrar un proyecto de ASP.NET MVC a ASP.NET Core MVC. En el proceso, resalta los cambios relacionados de ASP.NET MVC.

La migración desde ASP.NET MVC es un proceso de varios pasos. Este artículo trata sobre:

• Configuración inicial.
• Controladores y vistas básicos.
• Contenido estático.
• Dependencias del lado cliente.

Para migrar la configuración y Identity el código, consulte Migración de la configuración a ASP.NET Core y Migración de la autenticación y Identity a ASP.NET Core.

Prerequisites

• Visual Studio 2019 16.4 o posterior con la carga de trabajo de ASP.NET y desarrollo web
• SDK de .NET Core 3.1

Creación del proyecto de inicio ASP.NET MVC

Cree un ejemplo ASP.NET proyecto MVC en Visual Studio para migrar:

1. En el menú Archivo, seleccione Nuevo>Proyecto.
2. Seleccione ASP.NET Aplicación web (.NET Framework) y, a continuación, seleccione Siguiente.
3. Asigne al proyecto el nombre WebApp1 para que el espacio de nombres coincida con el proyecto ASP.NET Core creado en el paso siguiente. Selecciona Crear.
4. Seleccione MVC y, a continuación, seleccione Crear.

Creación del proyecto ASP.NET Core

Cree una nueva solución con un nuevo proyecto de ASP.NET Core para migrar a:

1. Inicie una segunda instancia de Visual Studio.
2. En el menú Archivo, seleccione Nuevo>Proyecto.
3. Seleccione ASP.NET Aplicación web principal y, a continuación, seleccione Siguiente.
4. En el cuadro de diálogo Configurar el nuevo proyecto , asigne al proyecto el nombre WebApp1.
5. Establezca la ubicación en un directorio diferente al del proyecto anterior para usar el mismo nombre de proyecto. El uso del mismo espacio de nombres facilita la copia de código entre los dos proyectos. Selecciona Crear.
6. En el cuadro de diálogo Crear una nueva aplicación web de ASP.NET Core , confirme que están seleccionadas .NET Core y ASP.NET Core 3.1 . Seleccione la plantilla de proyecto Aplicación web (Modelo-View-Controller) y seleccione Crear.

Configuración del sitio de ASP.NET Core para usar MVC

En los proyectos de ASP.NET Core 3.0 o posteriores, .NET Framework ya no es un framework de destino compatible. El proyecto debe tener como destino .NET Core. El marco compartido de ASP.NET Core, que incluye MVC, forma parte de la instalación del entorno de ejecución de .NET Core. Se hace referencia automáticamente al marco compartido cuando se usa el Microsoft.NET.Sdk.Web SDK en el archivo de proyecto:

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

Para obtener más información, consulte Referencia del marco.

En ASP.NET Core, la Startup clase :

• Reemplaza Global.asax.
• Controla todas las tareas de inicio de la aplicación.

Para obtener más información, consulte Inicio de la aplicación en ASP.NET Core.

En el proyecto ASP.NET Core, abra el Startup.cs archivo :

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?}");
        });
    }
}

Las aplicaciones de ASP.NET Core deben habilitar funcionalidades del framework con middleware. El código generado por la plantilla anterior agrega los siguientes servicios y middleware:

• El AddControllersWithViews método de extensión registra la compatibilidad del servicio MVC con controladores, características relacionadas con api y vistas. Para obtener más información sobre las opciones de registro del servicio MVC, consulte Registro del servicio MVC.
• El método de extensión UseStaticFiles agrega el controlador de archivos estáticos Microsoft.AspNetCore.StaticFiles. El método de extensión UseStaticFiles debe llamarse antes de UseRouting. Para obtener más información, vea Archivos estáticos en ASP.NET Core.
• El UseRouting método de extensión agrega enrutamiento. Para obtener más información, consulta Enrutamiento en ASP.NET Core.

Esta configuración existente incluye lo que se necesita para migrar el ejemplo ASP.NET proyecto MVC. Para obtener más información sobre las opciones de middleware de ASP.NET Core, consulte Inicio de la aplicación en ASP.NET Core.

Migración de controladores y vistas

En el proyecto ASP.NET Core, se agregaría una nueva clase de controlador vacía y clase de vista para servir como marcadores de posición con los mismos nombres que el controlador y las clases de vista en cualquier proyecto de MVC de ASP.NET desde el que migrar.

El proyecto ASP.NET Core WebApp1 ya incluye un controlador de ejemplo mínimo y una vista con el mismo nombre que el proyecto de ASP.NET MVC. Por lo tanto, estos servirán como marcadores de posición para el controlador y las vistas de ASP.NET MVC que se van a migrar del proyecto ASP.NET MVC WebApp1.

1. Copie los métodos del ASP.NET MVC HomeController para reemplazar los nuevos métodos ASP.NET Core HomeController . No es necesario cambiar el tipo de valor devuelto de los métodos de acción. El tipo de valor devuelto del método de acción del controlador de la plantilla integrada ASP.NET MVC es ActionResult; en ASP.NET Core MVC, los métodos de acción devuelven IActionResult en su lugar. ActionResult implementa IActionResult.
2. En el proyecto ASP.NET Core, haga clic con el botón derecho en el directorio Views/Home , seleccione Agregar>elemento existente.
3. En el cuadro de diálogo Agregar elemento existente, vaya al directorio del proyecto MVC Home de ASP.NET.
4. Seleccione los archivos de vista About.cshtml, Contact.cshtml, y Index.cshtmlRazor, luego seleccione Agregar para reemplazar los archivos existentes.

Para obtener más información, consulte Control de solicitudes con controladores en ASP.NET Core MVC y Vistas en ASP.NET Core MVC.

Probar cada método

Sin embargo, cada punto de conexión del controlador se puede probar, el diseño y los estilos se tratan más adelante en el documento.

1. Ejecute la aplicación ASP.NET Core.
2. Invoque las vistas representadas desde el explorador en la aplicación de ASP.NET Core en ejecución reemplazando el número de puerto actual por el número de puerto usado en el proyecto de ASP.NET Core. Por ejemplo: https://localhost:44375/home/about.

Migración de contenido estático

En ASP.NET MVC 5 o versiones anteriores, el contenido estático se hospedaba desde el directorio raíz del proyecto web y se mezclaba con archivos del lado servidor. En ASP.NET Core, los archivos estáticos se almacenan en el directorio raíz web del proyecto. El directorio predeterminado es {content root}/wwwroot, pero se puede cambiar. Para obtener más información, vea Archivos estáticos en ASP.NET Core.

Copie el contenido estático del proyecto webApp1 de ASP.NET MVC en el wwwroot directorio del proyecto ASP.NET Core WebApp1 :

1. En el proyecto ASP.NET Core, haga clic con el botón derecho en el wwwroot directorio y seleccione Agregar>elemento existente.
2. En el cuadro de diálogo Agregar elemento existente , vaya al proyecto ASP.NET WebApp1 de MVC.
3. Seleccione el favicon.ico archivo y, a continuación, seleccione Agregar y reemplace el archivo existente.

Migración de los archivos de diseño

Copie los archivos de diseño del proyecto ASP.NET MVC en el proyecto de ASP.NET Core:

1. En el proyecto ASP.NET Core, haga clic con el botón derecho en el Views directorio y seleccione Agregar>elemento existente.
2. En el cuadro de diálogo Agregar elemento existente, vaya al directorio del proyecto ASP.NET MVC Views.
3. Seleccione el _ViewStart.cshtml archivo y, a continuación, seleccione Agregar.

Copie los archivos de diseño compartido del proyecto ASP.NET MVC en el proyecto ASP.NET Core:

1. En el proyecto ASP.NET Core, haga clic con el botón derecho en el Views/Shared directorio y seleccione Agregar>elemento existente.
2. En el cuadro de diálogo Agregar elemento existente, vaya al directorio del proyecto ASP.NET MVC Views/Shared.
3. Seleccione el _Layout.cshtml archivo y, a continuación, seleccione Agregar y reemplace el archivo existente.

En el proyecto ASP.NET Core, abra el _Layout.cshtml archivo . Realice los siguientes cambios para que coincidan con el código completado que se muestra a continuación:

Actualice la inclusión de CSS de Bootstrap para que coincida con el código completado siguiente:

1. Reemplace @Styles.Render("~/Content/css") por un elemento <link> para cargar bootstrap.css (consulte abajo).
2. Quite @Scripts.Render("~/bundles/modernizr").

El marcado de reemplazo completado para la inclusión de CSS de Bootstrap:

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

Actualice la inclusión de JavaScript de jQuery y Bootstrap para que coincida con el código completado siguiente:

1. Reemplace @Scripts.Render("~/bundles/jquery") con un elemento <script> (ver abajo).
2. Reemplace @Scripts.Render("~/bundles/bootstrap") con un elemento <script> (ver abajo).

Marcado de reemplazo completado para la inclusión de JavaScript de jQuery y 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>

A continuación se muestra el archivo actualizado _Layout.cshtml :

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

Vea el sitio en el explorador. Debe representarse con los estilos esperados en su lugar.

Configuración de la agrupación y la minificación

ASP.NET Core es compatible con varias soluciones de agrupación y minificación de código abierto, como WebOptimizer y otras bibliotecas similares. ASP.NET Core no proporciona una solución de unión y minificación nativa. Para obtener información sobre cómo configurar la agrupación y la minificación, consulte Agrupación y minificación.

Solución de errores HTTP 500

Hay muchos problemas que pueden provocar un mensaje de error HTTP 500 que no contiene información sobre el origen del problema. Por ejemplo, si el Views/_ViewImports.cshtml archivo contiene un espacio de nombres que no existe en el proyecto, se genera un error HTTP 500. De forma predeterminada, en aplicaciones ASP.NET Core, la extensión UseDeveloperExceptionPage se agrega a IApplicationBuilder y se ejecuta cuando el entorno es Desarrollo. Esto se detalla en el código siguiente:

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 convierte excepciones no controladas en respuestas de error HTTP 500. Normalmente, los detalles del error no se incluyen en estas respuestas para evitar la divulgación de información potencialmente confidencial sobre el servidor. Para obtener más información, vea Página de excepciones para desarrolladores.

Pasos siguientes

• <identity.md>

Recursos adicionales

• ASP.NET Core Blazor
• Asistentes de etiquetas en ASP.NET Core