Tutorial: Introducción a C# y ASP.NET Core en Visual StudioTutorial: Get started with C# and ASP.NET Core in Visual Studio

En este tutorial para el desarrollo de C# con ASP.NET Core mediante Visual Studio, creará una aplicación web de C# ASP.NET Core, realizará cambios en ella, explorará algunas características del IDE y luego ejecutará la aplicación.In this tutorial for C# development with ASP.NET Core using Visual Studio, you'll create a C# ASP.NET Core web app, make changes to it, explore some features of the IDE, and then run the app.

Si todavía no ha instalado Visual Studio, vaya a la página de descargas de Visual Studio para instalarlo de forma gratuita.If you haven't already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

Crear un proyectoCreate a project

En primer lugar, creará un proyecto de ASP.NET Core.First, you'll create a ASP.NET Core project. En el tipo de proyecto se incluyen todos los archivos de plantilla que se necesitarán para un sitio web completamente funcional, sin necesidad de agregar nada más.The project type comes with all the template files you'll need for a fully functional website, before you've even added anything!

  1. Abra Visual Studio 2017.Open Visual Studio 2017.

  2. En la barra de menús superior, seleccione Archivo > Nuevo > Proyecto.From the top menu bar, choose File > New > Project.

  3. En el panel de la izquierda del cuadro de diálogo Nuevo proyecto, expanda Visual C#, expanda Web y después seleccione .NET Core.In the New Project dialog box in the left pane, expand Visual C#, expand Web, and then choose .NET Core. En el panel central, elija Aplicación web ASP.NET Core.In the middle pane, choose ASP.NET Core Web Application. Después, asigne el nombre del archivo MyCoreApp y elija Aceptar.Then, name the file MyCoreApp and choose OK.

    Plantilla de proyecto Aplicación web ASP.NET Core en el cuadro de diálogo Nuevo proyecto en el IDE de Visual Studio

Agregar una carga de trabajo (opcional)Add a workload (optional)

Si no ve la plantilla de proyecto Aplicación web ASP.NET Core, puede obtenerla mediante la adición de la carga de trabajo Desarrollo de ASP.NET y web.If you don't see the ASP.NET Core Web Application project template, you can get it by adding the ASP.NET and web development workload. Puede agregar esta carga de trabajo de una de las dos formas siguientes, según las actualizaciones de Visual Studio 2017 que estén instaladas en el equipo.You can add this workload in one of the two following ways, depending on which Visual Studio 2017 updates are installed on your machine.

Opción 1: Usar el cuadro de diálogo Nuevo proyectoOption 1: Use the New Project dialog box

  1. Seleccione el vínculo Abrir el Instalador de Visual Studio en el panel de la izquierda del cuadro de diálogo Nuevo proyecto.Select the Open Visual Studio Installer link in the left pane of the New Project dialog box.

    Seleccione el vínculo Abrir el Instalador de Visual Studio del cuadro de diálogo Nuevo proyecto

  2. Se iniciará el Instalador de Visual Studio.The Visual Studio Installer launches. Elija la carga de trabajo Desarrollo de ASP.NET y web y después haga clic en Modificar.Choose the ASP.NET and web development workload, and then choose Modify.

    Carga de trabajo Desarrollo multiplataforma de .NET Core en el instalador de Visual Studio

    (Es posible que deba cerrar Visual Studio para continuar con la instalación de la carga de trabajo nueva).(You might have to close Visual Studio before you can continue installing the new workload.)

Opción 2: Usar la barra del menú HerramientasOption 2: Use the Tools menu bar

  1. Cancele el cuadro de diálogo Nuevo proyecto.Cancel out of the New Project dialog box. Después, en la barra de menús, elija Herramientas > Obtener herramientas y características.Then, from the top menu bar, choose Tools > Get Tools and Features.

  2. Se iniciará el Instalador de Visual Studio.The Visual Studio Installer launches. Elija la carga de trabajo Desarrollo de ASP.NET y web y después haga clic en Modificar.Choose the ASP.NET and web development workload, and then choose Modify.

    (Es posible que deba cerrar Visual Studio para continuar con la instalación de la carga de trabajo nueva).(You might have to close Visual Studio before you can continue installing the new workload.)

Agregar una plantilla de proyectoAdd a project template

  1. En el cuadro de diálogo Nueva aplicación web ASP.NET Core, seleccione la plantilla de proyecto Aplicación web.In the New ASP.NET Core Web Application dialog box, choose the Web Application project template.

  2. Compruebe que ASP.NET Core 2.1 aparece en el menú desplegable superior.Verify that ASP.NET Core 2.1 appears in the top drop-down menu. Después, elija Aceptar.Then, choose OK.

    Cuadro de diálogo Nueva aplicación web ASP.NET Core

Acerca de la soluciónAbout your solution

Esta solución sigue el modelo de diseño Razor Page.This solution follows the Razor Page design pattern. La diferencia con el modelo de diseño Modelo-Vista-Controlador (MVC) es que está optimizado para incluir el modelo y el código de control dentro de la misma Razor Page.It is different than the Model-View-Controller (MVC) design pattern in that its streamlined to include the model and controller code within the Razor Page itself.

Recorrido por la soluciónTour your solution

  1. La plantilla de proyecto crea una solución con un solo proyecto de ASP.NET Core que se denomina MyCoreApp.The project template creates a solution with a single ASP.NET Core project that is named MyCoreApp. Elija la pestaña Explorador de soluciones para ver el contenido.Choose the Solution Explorer tab to view its contents.

    Explorador de soluciones de ASP.NET en Visual Studio para la solución Razor Pages que se denomina MyCoreApp

  2. Expanda la carpeta Páginas y expanda About.cshtml.Expand the Pages folder, and then expand About.cshtml.

    El archivo About.cshtml en el Explorador de soluciones de Visual Studio

  3. Vea el archivo About.cshtml en el editor de código.View the About.cshtml file in the code editor.

    Visualización del archivo About.cshtml en el editor de código de Visual Studio

  4. Elija el archivo About.cshtml.cs.Choose the About.cshtml.cs file.

    Elección del archivo About.cshtml en el editor de código de Visual Studio

  5. Vea el archivo About.cshtml.cs en el editor de código.View the About.cshtml.cs file in the code editor.

    Visualización del archivo About.cshtml en el editor de código de Visual Studio

  6. El proyecto contiene una carpeta wwwroot que es la raíz del sitio web.The project contains a wwwroot folder that is the root for your website. Expanda la carpeta para ver su contenido.Expand the folder to view its contents.

    Carpeta wwwroot en el Explorador de soluciones en Visual Studio

    Puede colocar contenido estático del sitio —como CSS, imágenes y bibliotecas de JavaScript— directamente en las rutas de acceso que quiera.You can put static site content—such as CSS, images, and JavaScript libraries—directly in the paths where you want them.

  7. El proyecto también contiene archivos de configuración que administran la aplicación web en el entorno de ejecución.The project also contains configuration files that manage the web app at runtime. La configuración predeterminada de la aplicación se almacena en appsettings.json.The default application configuration is stored in appsettings.json. Sin embargo, puede invalidar esta configuración mediante el uso de appsettings.Development.json.However, you can override these settings by using appsettings.Development.json. Expanda el archivo appsettings.json para ver el archivo appsettings.Development.json.Expand the appsettings.json file to view the appsettings.Development.json file.

    Archivos de configuración en el Explorador de soluciones en Visual Studio

Ejecutar, depurar y realizar cambiosRun, debug, and make changes

  1. Haga clic en el botón IIS Express del IDE para compilar y ejecutar la aplicación en modo de depuración.Choose the IIS Express button in the IDE to build and run the app in Debug mode. (O bien, presione F5 o elija Depurar > Iniciar depuración en la barra de menús).(Alternatively, press F5, or choose Debug > Start Debugging from the menu bar.)

    Haga clic en el botón IIS Express de Visual Studio

    Note

    Si recibe un mensaje de error que indica No se puede conectar al servidor web "IIS Express", cierre Visual Studio y, luego, ábralo mediante la opción Ejecutar como administrador que aparece si hace clic con el botón derecho o en el menú contextual.If you get an error message that says Unable to connect to web server 'IIS Express', close Visual Studio and then open it by using the Run as administrator option from the right-click or context menu. A continuación, vuelva a ejecutar la aplicación.Then, run the application again.

  2. Visual Studio inicia una ventana del explorador.Visual Studio launches a browser window. Luego debería ver las páginas Inicio, Acerca de y Contacto en la barra de menús.You should then see Home, About, and Contact pages in the menu bar. (Si no es así, elija el elemento de menú "hamburguesa" para verlas).(If you do not, choose the "hamburger" menu item to view them.)

    Selección del elemento de menú "hamburguesa" en la barra de menús de la aplicación web

  3. Elija Acerca de en la barra de menús.Choose About from the menu bar.

    Selección de Acerca de en la barra de menús de la ventana del explorador de la aplicación

    Entre otras cosas, la página Acerca de en el explorador representa el texto que se establece en el archivo About.cshtml.Among other things, the About page in the browser renders the text that is set in the About.cshtml file.

    Ver el texto de la página Acerca de

  4. Mantenga abierta la ventana del explorador y vuelva a Visual Studio.Keep the browser window open and return to Visual Studio.

  5. En Visual Studio, elija About.cshtml.In Visual Studio, choose About.cshtml. Luego, elimine la palabra changed y, en su lugar, agregue las palabras file and directory.Then, delete the word changed and in its place, add the words file and directory.

    Cambio del texto en el archivo About.cshtml

  6. Elija About.cshtml.cs.Choose About.cshtml.cs. Luego, limpie las directivas using que se encuentran al inicio del archivo con el siguiente método abreviado:Then, clean up the using directives at the top of the file by using the following shortcut:

    Elija cualquiera de las directivas using atenuadas y aparecerá una bombilla Acciones rápidas justo debajo del símbolo de intercalación o en el margen izquierdo.Choose any of the grayed-out using directives and a Quick Actions light bulb will appear just below the caret or in the left margin. Elija la bombilla y después elija Eliminar instrucciones Using innecesarias.Choose the light bulb, and then choose Remove Unnecessary Usings.

    Eliminación de las instrucciones Using innecesarias en el archivo About.cshtml.cs

    Visual Studio elimina las directivas using innecesarias del archivo.Visual Studio deletes the unnecessary using directives from the file.

  7. Luego, en el método OnGet(), cambie el cuerpo por el código siguiente:Next, in the OnGet() method, change the body to the following code:

    public void OnGet()
    {
        string directory = Environment.CurrentDirectory;
    Message = String.Format("Your directory is {0}.", directory);
    }
    
  8. Observe que aparecerán dos caracteres de subrayado ondulados en Environment y String.Notice that two wavy underlines appear under Environment and String. Los caracteres de subrayado ondulados aparecen porque estos tipos están fuera del ámbito.The wavy underlines appear because these types are not in scope.

    Errores marcados con caracteres de subrayado ondulados en el método OnGet

    Abra la barra de herramientas Lista de errores para ver los mismos errores en la lista.Open the Error List toolbar to see the same errors listed there. Si no ve la barra de herramientas Lista de errores, elija Ver > Lista de errores en la barra de menús superior.(If you don't see the Error List toolbar, choose View > Error List from the top menu bar.)

    Lista de errores en Visual Studio

  9. Solucionemos este problema.Let's fix this. En el editor de código, coloque el cursor en cualquiera de las líneas que contienen el error y elija la bombilla Acciones rápidas ubicada en el margen izquierdo.In the code editor, place your cursor on either line that contains the error, and then choose the Quick Actions light bulb in the left margin. Luego, en el menú desplegable, elija using System; para agregar esta directiva al inicio del archivo y solucionar los errores.Then, from the drop-down menu, choose using System; to add this directive to the top of your file and resolve the errors.

    Incorporación de la directiva "using System;"

  10. Presione Ctrl+S para guardar los cambios y actualizar la aplicación en el explorador web.Press Ctrl+S to save your changes and refresh your app in the web browser.

  11. En la parte superior del sitio web, elija Acerca de para ver los cambios.At the top of the web site, choose About to view your changes.

    Visualización de la página Acerca de actualizada que incluye los cambios realizados

  12. Cierre el explorador web, presione Mayús+F5 para detener el modo de depuración y cierre Visual Studio.Close the web browser, press Shift+F5 to stop Debug mode, and then close Visual Studio.

Respuestas rápidas a preguntas frecuentesQuick answers FAQ

Esta es una sección rápida de P+F para destacar algunos conceptos clave.Here's a quick FAQ to highlight some key concepts.

¿Qué es C#?What is C#?

C# es un lenguaje de programación con seguridad de tipos y orientado a objetos que se ha diseñado para ser robusto y fácil de aprender.C# is a type-safe and object-oriented programming language that's designed to be both robust and easy to learn.

¿Qué es ASP.NET Core?What is ASP.NET Core?

ASP.NET Core es un marco multiplataforma y de código abierto en el que se pueden crear aplicaciones conectadas a Internet, como por ejemplo, servicios y aplicaciones web.ASP.NET Core is an open-source and cross-platform framework for building internet-connected applications, such as web apps and services. Las aplicaciones de ASP.NET Core se pueden ejecutar en .NET Core o .NET Framework.ASP.NET Core apps can run on either .NET Core or the .NET Framework. Puede desarrollar y ejecutar las aplicaciones multiplataforma ASP.NET Core en Windows, Mac y Linux.You can develop and run your ASP.NET Core apps cross-platform on Windows, Mac, and Linux. ASP.NET Core es código abierto en GitHub.ASP.NET Core is open source at GitHub.

¿Qué es Visual Studio?What is Visual Studio?

Visual Studio es un conjunto de desarrollo integrado de herramientas de productividad para desarrolladores.Visual Studio is an integrated development suite of productivity tools for developers. Considérelo como un programa que se puede usar para crear programas y aplicaciones.Think of it as a program you can use to create programs and applications.

Pasos siguientesNext steps

Enhorabuena por completar este tutorial.Congratulations on completing this tutorial! Esperamos que haya aprendido un poco sobre C#, ASP.NET Core y el IDE de Visual Studio.We hope you learned a little bit about C#, ASP.NET Core, and the Visual Studio IDE. Para más información acerca de cómo crear una aplicación web o un sitio web con C# y ASP.NET, continúe con los siguientes tutoriales:To learn more about creating a web app or website with C# and ASP.NET, continue with the following tutorials:

Vea tambiénSee also

Publicar una aplicación web en Azure App Service mediante Visual StudioPublish your web app to Azure App Service by using Visual Studio