Introducción a C# y ASP.NET Core en Visual StudioGet started with C# and ASP.NET 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, le agregará código, explorará algunas características del IDE y 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, add code to it, explore some features of the IDE, and 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.

Antes de empezarBefore you begin

Esta es una sección rápida de P+F para presentar algunos conceptos clave.Here's a quick FAQ to introduce you to 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.

Empezar a desarrollarStart developing

¿Listo para empezar a desarrollar?Ready to start developing? Vamos allá.Let's go!

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 vamos a necesitar, sin necesidad de agregar nada más.The project type comes with all the template files you'll need, 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, asigne el nombre MyCoreApp al archivo y, después, haga clic en Aceptar.In the middle pane, choose ASP.NET Core Web Application, name the file MyCoreApp, and then 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. Haga clic en el vínculo Abrir el instalador de Visual Studio en el panel de la izquierda del cuadro de diálogo Nuevo proyecto.Click the Open Visual Studio Installer link in the left pane of the New Project dialog box.

    Clic en 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

Opción 2: Usar la barra del menú HerramientasOption 2: Use the Tools menu bar
  1. Cancele para salir del cuadro de diálogo Nuevo proyecto y, en la barra de menús superior, seleccione Herramientas > Obtener herramientas y características....Cancel out of the New Project dialog box and 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.

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 (controlador de vista de modelos).In the New ASP.NET Core Web Application dialog box, choose the Web Application (Model-View-Controller) project template.

  2. Seleccione ASP.NET Core 2.0 en el menú desplegable superior.Select ASP.NET Core 2.0 from the top drop-down menu. Si en la lista no aparece ASP.NET Core 2.0, debe instalarlo siguiendo el vínculo Descargar que aparece en una barra amarilla en la parte superior del cuadro de diálogo. Elija Aceptar.(If you don't see ASP.NET Core 2.0 in the list, install it by following the Download link that should appear in a yellow bar near the top of the dialog box.) Choose OK.

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

Acerca de la soluciónAbout your solution

La solución sigue el patrón de arquitectura del controlador de vista de modelos (MVC) que separa una aplicación en tres componentes principales:This solution follows the Model-View-Controller (MVC) architectural pattern that separates an app into three main components:

  • En Modelos se incluyen clases que representan los datos de la aplicación.Models include classes that represent the data of the app. Las clases de modelo usan lógica de validación para aplicar las reglas de negocio para esos datos.The model classes use validation logic to enforce business rules for that data. Normalmente, los objetos de modelo recuperan y almacenan el estado del modelo en una base de datos.Typically, model objects retrieve and store model state in a database.
  • Las Vistas son los componentes que muestran la interfaz de usuario (IU) de la aplicación.Views are the components that display the app's user interface (UI). Por lo general, esta interfaz de usuario muestra los datos del modelo.Generally, this UI displays the model data.
  • En los Controladores se incluyen las clases que controlan las solicitudes del explorador.Controllers include classes that handle browser requests. Recuperan los datos del modelo y llaman a plantillas de vistas que devuelven una respuesta.They retrieve model data and call view templates that return a response. En una aplicación MVC, la vista solo muestra información; el controlador controla y responde a la interacción y entrada del usuario.In an MVC app, the view displays only the information; the controller handles and responds to user input and interaction.

El patrón de MVC ayuda a crear aplicaciones que son más fáciles de actualizar y probar que las tradicionales aplicaciones monolíticas.The MVC pattern helps you create apps that are easier to test and update than traditional monolithic apps.

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. Expanda el nodo del proyecto para exponer su contenido.Expand the project node to expose its contents.

    Explorador de soluciones de ASP.NET en Visual Studio

  2. Abra el archivo HomeController.cs desde la carpeta Controladores.Open the HomeController.cs file from the Controllers folder.

    Archivo HomeController.cs en el Explorador de soluciones de Visual Studio

  3. Ver el archivo HomeController.csView the HomeController.cs

    HomeController.cs en la ventana de código de Visual Studio

  4. El proyecto también tiene una carpeta Vistas que contiene otras carpetas que se asignan a cada controlador (además de una para las vistas compartidas).The project also has a Views folder that contains other folders that map to each controller (as well as one for Shared views). Por ejemplo, el archivo CSHTML de la vista (una extensión de HTML) para la ruta de acceso /Home/About estaría en Views/Home/About.cshtml.For example, the view CSHTML file (an extension of HTML) for the /Home/About path would be at Views/Home/About.cshtml. Abra ese archivo.Open that file.

    Archivo About.cshtml en el Explorador de soluciones en Visual Studio

  5. En este archivo CSHTML se usa la sintaxis de Razor para representar HTML en función de una combinación de etiquetas estándar y C# en línea.This CSHTML file uses the Razor syntax to render HTML based on a combination of standard tags and inline C#.

    About.cshtml en la ventana de código de Visual Studio

    Nota

    Para más información al respecto, consulte la página Introducción a C# y ASP.NET mediante la sintaxis Razor.To learn more about this, see the Get started with C# and ASP.NET using the Razor syntax page.

  6. La solución también contiene una carpeta wwwroot que es la raíz del sitio web.The solution also contains a wwwroot folder that is the root for your web site. Puede colocar el contenido estático del sitio (como CSS, imágenes y bibliotecas de JavaScript) directamente en las rutas de acceso en las que quiera que esté cuando se implemente el sitio.You can put static site content, such as CSS, images, and JavaScript libraries, directly at the paths you'd want them to be at when the site is deployed.

    Carpeta wwwroot en el Explorador de soluciones en Visual Studio

  7. También hay una variedad de archivos de configuración que sirven para administrar el proyecto, sus paquetes y la aplicación en tiempo de ejecución.There are also a variety of configuration files that serve to manage the project, its packages, and the application at runtime. Por ejemplo, la configuración predeterminada de la aplicación se almacena en appsettings.json.For example, the default application configuration is stored in appsettings.json. Pero puede invalidar algunos o todos estos valores de forma individual en cada entorno, por ejemplo, proporcionando un archivo appsettings.Development.json para el entorno Desarrollo.However, you can override some/all of these settings on a per-environment basis, such as by providing an appsettings.Development.json file for the Development environment.

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

Ejecutar y depurar la aplicaciónRun and debug the application

  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 seleccione Depurar > Iniciar depuración desde la barra de menús).(Alternatively, press F5, or choose Debug > Start Debugging from the menu bar.)

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

    Nota

    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. Seleccione Acerca de.Select About.

    Seleccione Acerca de en 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 HomeController.cs.Among other things, the About page in the browser renders the text that is set in the HomeController.cs file.

    Ver el texto de la página Acerca de

  3. Mantenga abierta la ventana del explorador y vuelva a Visual Studio.Keep the browser window open and return to Visual Studio. Abra Controllers/HomeController.cs si todavía no está abierto.Open Controllers/HomeController.cs if it's not already open.

    Abrir el archivo HomeController.cs desde el Explorador de soluciones en Visual Studio

  4. Establezca un punto de interrupción en la primera línea del método About.Set a breakpoint in the first line of the About method. Para ello, haga clic en el margen o sitúe el cursor en la línea y presione F9.To do this, click in the margin or set the cursor on the line and press F9.

    Esta línea establece algunos datos de la colección ViewData que se representan en la página CSHTML en Views/Home/About.cshtml.This line sets some data in the ViewData collection that is rendered in the CSHTML page at Views/Home/About.cshtml.

    <span data-ttu-id="7670b-196">Establecer un punto de interrupción en la primera línea del método About de About.cshtml.</span><span class="sxs-lookup"><span data-stu-id="7670b-196">Set a breakpoint in the first line of the About method in About.cshtml.</span></span>

  5. Vuelva al explorador y actualice la página Acerca de.Return to the browser and refresh the About page. Esto activará el punto de interrupción en Visual Studio.This will trigger the breakpoint in Visual Studio.

  6. En Visual Studio, mueva el mouse sobre el miembro ViewData para ver sus datos.In Visual Studio, mouse over the ViewData member to view its data.

    Ver el miembro ViewData del método About para ver más información

  7. Quite el punto de interrupción de la aplicación con el mismo método usado para agregarlo.Remove the application breakpoint using the same method you used to add it.

  8. Abra Views/Home/About.cshtml.Open Views/Home/About.cshtml.

    Seleccionar About.cshtml en el Explorador de soluciones

  9. Cambie el texto "additional" por "changed" y guarde el archivo.Change the text "additional" to "changed" and save the file.

    Cambie el texto que indica "additional" por texto que indique "changed"

  10. Vuelva a la ventana del explorador para ver el texto actualizado.Return to the browser window to see the updated text. (Actualice el explorador si no ve el texto que ha cambiado).(Refresh the browser if you don't see the text that you changed.)

    Actualizar la ventana del explorador para ver el texto cambiado

  11. Haga clic en el botón Detener depuración desde la barra de herramientas para detener la depuración.Choose the Stop Debugging button from the toolbar to stop debugging. (O bien, presione Mayús+F5, o seleccione Depurar > Detener depuración desde la barra de menús).(Alternatively, press Shift+F5, or choose Debug > Stop Debugging from the menu bar.)

    Hacer clic en el botón Detener depuración de la barra de herramientas

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 obtener más información, continúe con el tutorial siguiente.To learn even more, continue with the following tutorial.