Inicio rápido: uso de Visual Studio para crear su primera aplicación web ASP.NET CoreQuickstart: Use Visual Studio to create your first ASP.NET Core web app

En esta introducción de 5 a 10 minutos sobre cómo usar Visual Studio, creará una aplicación web simple "Hola mundo" mediante el uso de una plantilla de proyecto ASP.NET y el lenguaje de programación C#.In this 5-10 minute introduction to how to use Visual Studio, you'll create a simple "Hello World" web app by using an ASP.NET project template and the C# programming language.

Antes de empezarBefore you begin

Instalar Visual StudioInstall Visual Studio

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.

Actualizar Visual StudioUpdate Visual Studio

Si ya ha instalado Visual Studio, asegúrese de que se está ejecutando la versión más reciente.If you've already installed Visual Studio, make sure that you are running the most recent release. Para obtener más información sobre cómo actualizar la instalación, vea la página Actualizar Visual Studio 2017 a la versión más reciente.For more information about how to update your installation, see the Update Visual Studio 2017 to the most recent release page.

Elija su tema (opcional)Choose your theme (optional)

En esta guía de inicio rápido se incluyen capturas de pantalla que utilizan el tema oscuro.This quickstart tutorial includes screenshots that use the dark theme. Si no está usando el tema oscuro pero le gustaría hacerlo, vea la página Guía de inicio rápido: personalizar el IDE y el editor de Visual Studio para obtener información sobre cómo hacerlo.If you aren't using the dark theme but would like to, see the Personalize the Visual Studio IDE and Editor page to learn how.

Crear un proyectoCreate a project

En primer lugar, creará un proyecto de aplicación web ASP.NET Core.To start, you'll create an ASP.NET Core web application project. En el tipo de proyecto se incluyen todos los archivos de plantilla para crear una aplicación web, sin necesidad de agregar nada más.The project type comes with all template files to create a web app, 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 izquierdo del cuadro de diálogo Nuevo proyecto, expanda Visual C# y luego elija .NET Core.In the left pane of the New Project dialog box, expand Visual C#, 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. Luego asigne un nombre al archivo HelloWorld y elija Aceptar.Then, name your file HelloWorld and choose OK.

    Creación de un proyecto de aplicación web ASP.NET Core para C#

    Note

    Si no ve la categoría de plantilla de proyecto de .NET Core, elija el vínculo Abrir el instalador de Visual Studio en el panel de la izquierda.If you don't see the .NET Core project template category, choose the Open Visual Studio Installer link in the left pane. (Según la configuración de pantalla, es posible que tenga que desplazarse para verlo).(Depending on your display settings, you might have to scroll to see it.)

    Abrir el Instalador de Visual Studio desde el cuadro de diálogo Nuevo proyecto

    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 ASP.NET 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.)

  4. En el cuadro de diálogo Nueva aplicación web ASP.NET Core, seleccione ASP.NET Core 2.0 o posterior en el menú desplegable situado en la parte superior.In the New ASP.NET Core Web Application dialog box, select ASP.NET Core 2.0 or later from the top drop-down menu.

    Note

    Si no ve ASP.NET Core 2.0 o posterior, asegúrese de que se está ejecutando la versión más reciente de Visual Studio.If you don't see ASP.NET Core 2.0 or later, make sure that you are running the most recent release of Visual Studio. Para obtener más información sobre cómo actualizar la instalación, vea la página Actualizar Visual Studio 2017 a la versión más reciente.For more information about how to update your installation, see the Update Visual Studio 2017 to the most recent release page.

  5. Después, elija Aplicación web y luego haga clic en Aceptar.Next, choose Web Application, and then choose OK.

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

Poco después, Visual Studio abre el archivo de proyecto.Soon after, Visual Studio opens your project file.

Creación de la aplicaciónCreate the app

  1. En el Explorador de soluciones, expanda la carpeta Páginas y después elija About.cshtml.In the Solution Explorer, expand the Pages folder, and then choose About.cshtml.

    Selección del archivo About.cshtml desde el Explorador de soluciones

    Este archivo corresponde a una página denominada Acerca de de la aplicación web.This file corresponds to a page that's named About in the web app.

    Página Acerca de de la aplicación web

    En el editor, verá el código HTML para el área "información adicional" de la página Acerca de.In the editor, you'll see HTML code for the "additional information" area of the About page.

    El código HTML para el área de información adicional en el editor de Visual Studio

  2. Cambie el texto "información adicional" para que rece "Hello World!".Change the "additional information" text to read "Hello World!".

    Cambio del código HTML predeterminado para el área de información adicional en el editor de Visual Studio

  3. En el Explorador de soluciones, expanda About.cshtml y luego elija About.cshtml.cs.In the Solution Explorer, expand About.cshtml, and then choose About.cshtml.cs. (Este archivo también se corresponde con la página Acerca de de la aplicación web).(This file also corresponds with the About page in your web app.)

    Selección del archivo About.cshtml desde el Explorador de soluciones

    En el editor, verá el código de C# que incluye texto para el área "Descripción de la aplicación" de la página Acerca de.In the editor, you'll see C# code that includes text for the "application description" area of the About page.

    El código de C# para el área de descripción de la aplicación en el editor de Visual Studio

  4. Cambie el texto del mensaje "descripción de la aplicación" para que rece "¿Cuál es mi mensaje?".Change the "application description" message text to read "What's my message?".

    Cambio del texto del mensaje predeterminado para el área de descripción de la aplicación en el editor de Visual Studio

Ejecutar la aplicaciónRun the app

  1. Presione Ctrl+F5 para ejecutar la aplicación y abrirla en un explorador web.Press Ctrl+F5 to run the app and open it in a web browser.

    Note

    Si recibe un mensaje de error que dice No se puede conectar al servidor web "IIS Express" o un mensaje de error que menciona un certificado SSL, cierre Visual Studio.If you get an error message that says, Unable to connect to web server 'IIS Express', or an error message that mentions an SSL certificate, close Visual Studio. Después, abra Visual Studio mediante la opción Ejecutar como administrador en el menú contextual.Next, open Visual Studio 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. En la parte superior de la página web, elija Acerca de.At the top of the web page, choose About.

    Selección de Acerca de en la página web

  3. Vea el texto actualizado que agregó a la página Acerca de.View the updated text that you added to the About page.

    Visualización de la página Acerca de actualizada que incluye el texto agregado

  4. Cierre el explorador web.Close the web browser.

¡Enhorabuena por completar este tutorial de inicio rápido!Congratulations on completing this Quickstart! Esperamos que haya aprendido un poco sobre C#, ASP.NET Core y el IDE (entorno de desarrollo integrado) de Visual Studio.We hope you learned a little bit about C#, ASP.NET Core, and the Visual Studio IDE (integrated development environment).

Pasos siguientesNext steps

Para obtener más información, continúe con el tutorial siguiente:To learn more, continue with the following tutorial:

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