Migración de ASP.NET MVC a ASP.NET Core MVC

  • Artículo
  • Tiempo de lectura: 12 minutos

En este artículo se muestra cómo empezar a migrar un proyecto 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. En este artículo se describe:

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

Para migrar la configuración y el código, vea Migrar la configuración Identity a ASP.NET Core y Migrar la autenticación y a Identity ASP.NET Core.

Prerrequisitos

Creación del proyecto ASP.NET MVC

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

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

Creación del ASP.NET Core proyecto

Cree una nueva solución con un nuevo ASP.NET Core proyecto al que migrar:

  1. Inicie una segunda instancia de Visual Studio.
  2. En el menú Archivo, seleccione Nuevo > Proyecto.
  3. Seleccione Aplicación web ASP.NET Core y, después, 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 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. Seleccione Crear.
  6. En el cuadro de diálogo Crear una aplicación web ASP.NET Core, confirme que las opciones .NET Core y ASP.NET Core 3.1 estén seleccionadas. Seleccione la plantilla de proyecto Aplicación web (Modelo-Vista-Controlador) y seleccione Crear.

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

En ASP.NET Core 3.0 y versiones posteriores, .NET Framework ya no es una plataforma de destino compatible. El proyecto debe tener como destino .NET Core. El ASP.NET Core compartido, que incluye MVC, forma parte de la instalación en tiempo de ejecución de .NET Core. Se hace referencia al marco compartido automáticamente al usar el SDK Microsoft.NET.Sdk.Web en el archivo de proyecto:

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

Para obtener más información, vea Referencia de Framework.

En ASP.NET Core, la Startup clase :

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

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

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

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 aplicaciones deben participar en las características del marco con middleware. El código generado por la plantilla anterior agrega los siguientes servicios y middleware:

Esta configuración existente incluye lo que se necesita para migrar el ejemplo ASP.NET de MVC. Para obtener más información sobre las ASP.NET Core middleware, vea 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 una clase de vista para que actuara como marcadores de posición con los mismos nombres que el controlador y las clases de vista en cualquier proyecto de ASP.NET MVC desde el que migrar.

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

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

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

Prueba de cada método

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

  1. Ejecute la ASP.NET Core aplicación.
  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 ASP.NET Core proyecto. Por ejemplo, https://localhost:44375/home/about.

Migración de contenido estático

En ASP.NET MVC 5 y 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 ASP.NET MVC en el directorio wwwroot del ASP.NET Core webApp1:

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

Migración de los archivos de diseño

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

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

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

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

En el ASP.NET Core, abra el archivo _Layout.cshtml. Realice los cambios siguientes 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 para cargar <link> bootstrap.css (consulte a continuación).
  2. Quite @Scripts.Render("~/bundles/modernizr").

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.min.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") por un elemento <script> (vea a continuación).
  2. Reemplace @Scripts.Render("~/bundles/bootstrap") por un elemento <script> (vea a continuación).

Marcado de reemplazo completado para la inclusión de JavaScript de jQuery y Bootstrap:

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

El archivo _Layout.cshtml actualizado se muestra a continuación:

<!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.min.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.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.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 unión y la minimización

ASP.NET Core es compatible con varias soluciones de unió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 unión y la minificación, vea Unión y minificación.

Resolució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 archivo Views/_ViewImports.cshtml contiene un espacio de nombres que no existe en el proyecto, se genera un error HTTP 500. De forma predeterminada ASP.NET Core aplicaciones, la extensión se agrega a y UseDeveloperExceptionPage se ejecuta cuando el entorno es IApplicationBuilder Development. 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 Developer Exception Page.

Pasos siguientes

Recursos adicionales

En este artículo se muestra cómo empezar a migrar un proyecto ASP.NET MVC a ASP.NET Core MVC 2.2. En el proceso, resalta muchas de las cosas que han cambiado desde ASP.NET MVC. La migración desde ASP.NET MVC es un proceso de varios pasos. En este artículo se describe:

  • 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, vea Migración de la configuración a ASP.NET Core y Migrar la autenticación Identity y a ASP.NET Core .

Nota

Es posible que los números de versión de los ejemplos no sean actuales, actualice los proyectos en consecuencia.

Creación del proyecto ASP.NET MVC

Para demostrar la actualización, comenzaremos por crear una aplicación ASP.NET MVC. Crábalo con el nombre WebApp1 para que el espacio de nombres coincida con ASP.NET Core proyecto creado en el paso siguiente.

Cuadro de diálogo Nuevo proyecto de Visual Studio

Cuadro de diálogo Nueva aplicación web: plantilla de proyecto mvc seleccionada en el panel ASP.NET plantillas web

Opcional: Cambie el nombre de la solución de WebApp1 a Mvc5. Visual Studio muestra el nuevo nombre de la solución (Mvc5), lo que facilita la información de este proyecto desde el proyecto siguiente.

Creación del ASP.NET Core proyecto

Cree una nueva aplicación ASP.NET Core web vacía con el mismo nombre que el proyecto anterior (WebApp1) para que los espacios de nombres de los dos proyectos coincidan. Tener el mismo espacio de nombres facilita la copia de código entre los dos proyectos. Cree este proyecto en un directorio diferente al anterior para usar el mismo nombre.

Cuadro de diálogo Nuevo proyecto

Cuadro de ASP.NET de diálogo Nueva aplicación web: plantilla de proyecto vacía seleccionada en el panel ASP.NET Core plantillas

  • Opcional: Cree una nueva aplicación ASP.NET Core mediante la plantilla de proyecto Aplicación web. Asigne al proyecto el nombre WebApp1 y seleccione una opción de autenticación de Cuentas de usuario individuales. Cambie el nombre de esta aplicación a FullAspNetCore. La creación de este proyecto ahorra tiempo en la conversión. El resultado final se puede ver en el código generado por la plantilla, el código se puede copiar en el proyecto de conversión o compararlo con el proyecto generado por la plantilla.

Configuración del sitio para usar MVC

  • Al dirigirse a .NET Core, se hace referencia Microsoft.AspNetCore.App metapaquete de forma predeterminada. Este paquete contiene paquetes que las aplicaciones MVC usan habitualmente. Si el destino .NET Framework, las referencias de paquete se deben enumerar individualmente en el archivo de proyecto.

Microsoft.AspNetCore.Mvces el marco ASP.NET Core MVC. Microsoft.AspNetCore.StaticFiles es el controlador de archivos estáticos. ASP.NET Core aplicaciones optan explícitamente por middleware, como para servir archivos estáticos. Para obtener más información, consulte Archivos estáticos.

  • Abra el archivo Startup.cs y cambie el código para que coincida con lo siguiente:
public class Startup
{
    // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseStaticFiles();

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

El UseStaticFiles método de extensión agrega el controlador de archivos estáticos. Para obtener más información, vea Inicio y enrutamiento de la aplicación.

Adición de un controlador y una vista

En esta sección, se agregan un controlador y una vista mínimos para que sirvan como marcadores de posición para el controlador de ASP.NET MVC y las vistas migradas en la sección siguiente.

  • Agregue un directorio Controladores.

  • Agregue una clase de controlador denominada Home Controller.cs al directorio Controllers.

Cuadro de diálogo Agregar nuevo elemento con la clase de controlador MVC seleccionada

  • Agregue un directorio Views.

  • Agregue un directorio Views/. Home

  • Agregue una Razor vista denominada Index.cshtml Home al directorio Views/.

Cuadro de diálogo Agregar nuevo elemento con la página vista MVC seleccionada

A continuación se muestra la estructura del proyecto:

Explorador de soluciones archivos y directorios de WebApp1

Reemplace el contenido del archivo Views/ Home /Index.cshtml por el marcado siguiente:

<h1>Hello world!</h1>

Ejecutar la aplicación.

Aplicación web abierta en Microsoft Edge

Para obtener más información, vea Controladores y vistas.

La funcionalidad siguiente requiere la migración desde el proyecto ASP.NET MVC al proyecto ASP.NET Core mvc:

  • contenido del lado cliente (CSS, fuentes y scripts)

  • controllers

  • views

  • modelos

  • Agrupación

  • filters

  • Inicie o cierre sesión Identity (esto se realiza en el siguiente tutorial).

Controladores y vistas

  • Copie cada uno de los métodos de ASP.NET MVC HomeController en el nuevo HomeController . En ASP.NET MVC, el tipo de valor devuelto del método de acción de controlador de la plantilla integrada es ; en ASP.NET Core MVC, los métodos de acción ActionResult IActionResult devuelven en su lugar. ActionResult implementa IActionResult , por lo que no es necesario cambiar el tipo de valor devuelto de los métodos de acción.

  • Copie los archivos de vista About.cshtml, Contact.cshtml e Index.cshtml del proyecto ASP.NET MVC en Razor el proyecto ASP.NET Core.

Prueba de cada método

El archivo de diseño y los estilos aún no se han migrado, por lo que las vistas representadas solo contienen el contenido de los archivos de vista. Los vínculos generados por el archivo de diseño About para las vistas y aún no Contact estarán disponibles.

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

Página de contacto

Tenga en cuenta la falta de estilos y elementos de menú. El estilo se solucionará en la sección siguiente.

Contenido estático

En ASP.NET MVC 5 y versiones anteriores, el contenido estático se hospedaba desde la raíz del proyecto web y se mezclaba con archivos del lado servidor. En ASP.NET Core, el contenido estático se hospeda en el directorio wwwroot. Copie el contenido estático de la aplicación ASP.NET MVC en el directorio wwwroot del ASP.NET Core proyecto. En esta conversión de ejemplo:

  • Copie el archivoicon.ico del proyecto ASP.NET MVC en el directorio wwwroot del ASP.NET Core proyecto.

El ASP.NET MVC usa Bootstrap para su estilo y almacena los archivos bootstrap en los directorios content y scripts. La plantilla, que generó el ASP.NET MVC, hace referencia a Bootstrap en el archivo de diseño (Views/Shared/_Layout.cshtml). Los bootstrap.js archivos bootstrap.css y ASP.NET mvc en el directorio wwwroot del nuevo proyecto. En su lugar, este documento agrega compatibilidad con Bootstrap (y otras bibliotecas del lado cliente) mediante CDN, en la sección siguiente.

Migración del archivo de diseño

  • Copie el archivo _ViewStart.cshtml del directorio Views del proyecto de ASP.NET MVC en el directorio Views del ASP.NET Core del proyecto. El _ViewStart.cshtml no ha cambiado en ASP.NET Core MVC.

  • Cree un directorio Views/Shared.

  • Opcional: Copie _ViewImports.cshtml desde el directorio Views del proyecto de MVC FullAspNetCore en el directorio Views ASP.NET Core del proyecto. Quite cualquier declaración de espacio de nombres en _ViewImports.cshtml. El _ViewImports.cshtml proporciona espacios de nombres para todos los archivos de vista y proporciona asistentes de etiquetas. Los asistentes de etiquetas se usan en el nuevo archivo de diseño. El _ViewImports.cshtml es nuevo para ASP.NET Core.

  • Copie el archivo _Layout.cshtml del directorio Views/Shared del proyecto de ASP.NET MVC en el directorio Views/Shared del proyecto de ASP.NET Core.

Abra _Layout.cshtml y realice los siguientes cambios (el código completado se muestra a continuación):

  • Reemplace @Styles.Render("~/Content/css") por un elemento para cargar <link> bootstrap.css (consulte a continuación).

  • Quite @Scripts.Render("~/bundles/modernizr").

  • Comente la @Html.Partial("_LoginPartial") línea (envuelve la línea con @*...*@ ). Para obtener más información, consulte Migración de la autenticación y a Identity ASP.NET Core

  • Reemplace @Scripts.Render("~/bundles/jquery") por un elemento <script> (vea a continuación).

  • Reemplace @Scripts.Render("~/bundles/bootstrap") por un elemento <script> (vea a continuación).

Marcado de reemplazo para la inclusión de CSS de Bootstrap:

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

Marcado de reemplazo para la inclusión de JavaScript de jQuery y Bootstrap:

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

El archivo _Layout.cshtml actualizado se muestra a continuación:

<!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.min.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>
                @*@Html.Partial("_LoginPartial")*@
            </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.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    @RenderSection("scripts", required: false)
</body>
</html>

Vea el sitio en el explorador. Ahora debe cargarse correctamente, con los estilos esperados en su lugar.

  • Opcional: Pruebe a usar el nuevo archivo de diseño. Copie el archivo de diseño del proyecto FullAspNetCore. El nuevo archivo de diseño usa asistentes de etiquetas y tiene otras mejoras.

Configuración de la unión y la minimización

Para obtener información sobre cómo configurar la unión y la minificación, vea Unión y minificación.

Solución de errores HTTP 500

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

public class Startup
{
    // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseStaticFiles();

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{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 Developer Exception Page.

Recursos adicionales

En este artículo se muestra cómo empezar a migrar un proyecto ASP.NET MVC a ASP.NET Core MVC 2.1. En el proceso, resalta muchas de las cosas que han cambiado desde ASP.NET MVC. La migración desde ASP.NET MVC es un proceso de varios pasos. En este artículo se describe:

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

Para migrar la configuración y el código, vea Migrar la configuración a ASP.NET Core y Migrar la Identity autenticación Identity y a ASP.NET Core.

Nota

Es posible que los números de versión de los ejemplos no sean actuales, actualice los proyectos en consecuencia.

Creación del proyecto ASP.NET MVC

Para demostrar la actualización, comenzaremos por crear una aplicación ASP.NET MVC. Cándalo con el nombre WebApp1 para que el espacio de nombres coincida con ASP.NET Core proyecto creado en el paso siguiente.

Cuadro de diálogo Nuevo proyecto de Visual Studio

Cuadro de diálogo Nueva aplicación web: plantilla de proyecto mvc seleccionada en el panel ASP.NET plantillas web

Opcional: Cambie el nombre de la solución de WebApp1 a Mvc5. Visual Studio muestra el nuevo nombre de la solución (Mvc5), lo que facilita la información de este proyecto desde el proyecto siguiente.

Creación del ASP.NET Core proyecto

Cree una nueva aplicación ASP.NET Core web vacía con el mismo nombre que el proyecto anterior (WebApp1) para que los espacios de nombres de los dos proyectos coincidan. Tener el mismo espacio de nombres facilita la copia de código entre los dos proyectos. Cree este proyecto en un directorio diferente al anterior para usar el mismo nombre.

Cuadro de diálogo Nuevo proyecto

Cuadro ASP.NET de diálogo Nueva aplicación web: plantilla de proyecto vacía seleccionada en el panel ASP.NET Core plantillas

  • Opcional: Cree una nueva aplicación ASP.NET Core con la plantilla de proyecto Aplicación web. Asigne al proyecto el nombre WebApp1 y seleccione una opción de autenticación de Cuentas de usuario individuales. Cambie el nombre de esta aplicación a FullAspNetCore. La creación de este proyecto ahorra tiempo en la conversión. El resultado final se puede ver en el código generado por la plantilla, el código se puede copiar en el proyecto de conversión o compararse con el proyecto generado por la plantilla.

Configuración del sitio para usar MVC

  • Al dirigirse a .NET Core, se hace referencia Microsoft.AspNetCore.App metapaquete de forma predeterminada. Este paquete contiene paquetes que las aplicaciones MVC usan habitualmente. Si el destino es .NET Framework, las referencias de paquete se deben enumerar individualmente en el archivo del proyecto.

Microsoft.AspNetCore.Mvces el marco ASP.NET Core MVC. Microsoft.AspNetCore.StaticFiles es el controlador de archivos estáticos. ASP.NET Core aplicaciones optan explícitamente por middleware, como para servir archivos estáticos. Para obtener más información, consulte Archivos estáticos.

  • Abra el archivo Startup.cs y cambie el código para que coincida con lo siguiente:
public class Startup
{
    // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseStaticFiles();

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

El UseStaticFiles método de extensión agrega el controlador de archivos estáticos. El UseMvc método de extensión agrega enrutamiento. Para obtener más información, vea Inicio y enrutamiento de aplicaciones.

Agregar un controlador y una vista

En esta sección, se agregan un controlador y una vista mínimos para que sirvan como marcadores de posición para el controlador de ASP.NET MVC y las vistas migradas en la sección siguiente.

  • Agregue un directorio Controllers.

  • Agregue una clase de controlador denominada Home Controller.cs al directorio Controllers.

Cuadro de diálogo Agregar nuevo elemento con la clase de controlador MVC seleccionada (antes del lanzamiento de ASP.NET Core 2.1)

  • Agregue un directorio Views.

  • Agregue un directorio Views/. Home

  • Agregue una Razor vista denominada Index.cshtml Home al directorio Views/.

Cuadro de diálogo Agregar nuevo elemento con la página vista MVC seleccionada (antes del lanzamiento de ASP.NET Core 2.1)

A continuación se muestra la estructura del proyecto:

Explorador de soluciones archivos y directorios de WebApp1

Reemplace el contenido del archivo Home Views//Index.cshtml por el marcado siguiente:

<h1>Hello world!</h1>

Ejecutar la aplicación.

Aplicación web abierta en Microsoft Edge

Para obtener más información, vea Controladores y vistas.

La funcionalidad siguiente requiere la migración del ejemplo ASP.NET proyecto MVC al proyecto ASP.NET Core proyecto:

  • contenido del lado cliente (CSS, fuentes y scripts)

  • controllers

  • views

  • modelos

  • Agrupación

  • filters

  • Inicie sesión o cierre sesión Identity (esto se realiza en el siguiente tutorial).

Controladores y vistas

  • Copie cada uno de los métodos del ASP.NET MVC HomeController en el nuevo HomeController . En ASP.NET MVC, el tipo de valor devuelto del método de acción de controlador de la plantilla integrada es ; en ASP.NET Core MVC, los métodos ActionResult de acción devuelven en IActionResult su lugar. ActionResult implementa IActionResult , por lo que no es necesario cambiar el tipo de valor devuelto de los métodos de acción.

  • Copie los archivos de vista About.cshtml, Contact.cshtml e Index.cshtml del proyecto ASP.NET MVC en Razor el ASP.NET Core proyecto.

Prueba de cada método

El archivo de diseño y los estilos aún no se han migrado, por lo que las vistas representadas solo contienen el contenido de los archivos de vista. Los vínculos generados por el archivo de diseño para las vistas About Contact y aún no estarán disponibles.

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

Página contacto

Tenga en cuenta la falta de estilos y elementos de menú. El estilo se solucionará en la sección siguiente.

Contenido estático

En ASP.NET MVC 5 y versiones anteriores, el contenido estático se hospedaba desde la raíz del proyecto web y se mezclaba con archivos del lado servidor. En ASP.NET Core, el contenido estático se hospeda en el directorio wwwroot. Copie el contenido estático de la aplicación ASP.NET MVC en el directorio wwwroot del ASP.NET Core proyecto. En esta conversión de ejemplo:

  • Copie el archivoicon.ico del proyecto ASP.NET MVC en el directorio wwwroot del ASP.NET Core proyecto.

El ASP.NET mvc usa Bootstrap para su estilo y almacena los archivos bootstrap en los directorios content y scripts. La plantilla, que generó el ASP.NET MVC, hace referencia a Bootstrap en el archivo de diseño (Views/Shared/_Layout.cshtml). Los bootstrap.js y bootstrap.css se podrían copiar del proyecto ASP.NET MVC en el directorio wwwroot del nuevo proyecto. En su lugar, este documento agrega compatibilidad con Bootstrap (y otras bibliotecas del lado cliente) mediante CDN, en la sección siguiente.

Migración del archivo de diseño

  • Copie el archivo _ViewStart.cshtml del directorio Views del proyecto de ASP.NET MVC en el directorio Views del ASP.NET Core del proyecto. El _ViewStart.cshtml no ha cambiado en ASP.NET Core MVC.

  • Cree un directorio Views/Shared.

  • Opcional: Copie _ViewImports.cshtml desde el directorio Views del proyecto de MVC FullAspNetCore en el directorio Views ASP.NET Core del proyecto. Quite cualquier declaración de espacio de nombres en _ViewImports.cshtml. El _ViewImports.cshtml proporciona espacios de nombres para todos los archivos de vista y proporciona asistentes de etiquetas. Los asistentes de etiquetas se usan en el nuevo archivo de diseño. El _ViewImports.cshtml es nuevo para ASP.NET Core.

  • Copie el archivo _Layout.cshtml del directorio Views/Shared del proyecto de ASP.NET MVC en el directorio Views/Shared del proyecto de ASP.NET Core.

Abra _Layout.cshtml y realice los siguientes cambios (el código completado se muestra a continuación):

  • Reemplace @Styles.Render("~/Content/css") por un elemento para cargar <link> bootstrap.css (consulte a continuación).

  • Quite @Scripts.Render("~/bundles/modernizr").

  • Comente la @Html.Partial("_LoginPartial") línea (envuelve la línea con @*...*@ ). Para obtener más información, consulte Migración de la autenticación y a Identity ASP.NET Core

  • Reemplace @Scripts.Render("~/bundles/jquery") por un elemento <script> (vea a continuación).

  • Reemplace @Scripts.Render("~/bundles/bootstrap") por un elemento <script> (vea a continuación).

Marcado de reemplazo para la inclusión de CSS de Bootstrap:

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

Marcado de reemplazo para la inclusión de JavaScript de jQuery y Bootstrap:

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

El archivo _Layout.cshtml actualizado se muestra a continuación:

<!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.min.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>
                @*@Html.Partial("_LoginPartial")*@
            </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.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    @RenderSection("scripts", required: false)
</body>
</html>

Vea el sitio en el explorador. Ahora debe cargarse correctamente, con los estilos esperados en su lugar.

  • Opcional: Pruebe a usar el nuevo archivo de diseño. Copie el archivo de diseño del proyecto FullAspNetCore. El nuevo archivo de diseño usa asistentes de etiquetas y tiene otras mejoras.

Configuración de la unión y la minimización

Para obtener información sobre cómo configurar la unión y la minificación, vea Unión y minificación.

Solución de errores HTTP 500

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

public class Startup
{
    // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseStaticFiles();

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{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 Developer Exception Page.

Recursos adicionales