Introducción a ASP.NET Core

En este tutorial se muestra cómo crear, ejecutar y modificar un ASP.NET Core Blazor Web App mediante la CLI de .NET. Blazor es un marco web de front-end de .NET que admite la representación del lado servidor y la interactividad del cliente en un único modelo de programación.

Aprenderá a:

• Crear un control Blazor Web App.
• Ejecute la aplicación.
• Cambie la aplicación.
• Cierre la aplicación.

Prerequisites

Obtenga e instale el SDK de .NET más reciente en Descargar .NET.

Creación de una clase Blazor Web App

Abra un shell de comandos en una ubicación adecuada para la aplicación de ejemplo y use el comando siguiente para crear un Blazor Web App. La -o|--output opción crea una carpeta para el proyecto y asigna un nombre al proyecto BlazorSample:

dotnet new blazor -o BlazorSample

Ejecución de la aplicación

Cambie el directorio a la BlazorSample carpeta con el siguiente comando:

cd BlazorSample

El dotnet watch comando ejecuta la aplicación y abre el explorador predeterminado en la página de aterrizaje de la aplicación:

dotnet watch

Utilizando la navegación de la barra lateral de la aplicación, visite la página Contador, donde puede seleccionar el botón Click me para incrementar el contador.

Cambiar la aplicación

Deje abierto el explorador con la página Contador cargada. Con el dotnet watch comando para ejecutar la aplicación, puede realizar cambios en el marcado y el código de la aplicación sin tener que volver a generar la aplicación para reflejar los cambios en el explorador.

El CounterRazor componente que representa la página web Contador se encuentra en Components/Pages/Counter.razor en el proyecto. Razor es una sintaxis para combinar marcado HTML con código de C# diseñada para aumentar la productividad del desarrollador.

Abra el Counter.razor archivo en un editor de texto y observe algunas líneas interesantes que representan contenido y hacen que la característica de contador del componente funcione.

Components/Pages/Counter.razor:

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

El archivo comienza con una línea que indica la ruta de acceso relativa del componente (/counter):

@page "/counter"

El título de la página se establece mediante <PageTitle> etiquetas:

<PageTitle>Counter</PageTitle>

Se muestra un encabezado H1:

<h1>Counter</h1>

Un elemento de párrafo (<p>) muestra el recuento actual, que se almacena en una variable denominada currentCount:

<p role="status">Current count: @currentCount</p>

Un botón (<button>) permite al usuario incrementar el contador, que se produce cuando un clic de botón ejecuta un método de C# denominado IncrementCount:

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

El @code bloque contiene código de C# que ejecuta el componente:

• La variable currentCount de contador se establece con un valor inicial de cero.
• El método IncrementCount está definido. El código del método incrementa la currentCount variable por una cada vez que se invoca el método.

private int currentCount = 0;

private void IncrementCount()
{
    currentCount++;
}

Vamos a cambiar el incremento del contador en el IncrementCount método .

Cambie la línea de manera que currentCount se incremente en un valor de diez cada vez que se llame a IncrementCount.

- currentCount++;
+ currentCount += 10;

Guarde el archivo.

En cuanto guarde el archivo, la aplicación en ejecución se actualiza automáticamente porque usó el dotnet watch comando . Vuelva a la aplicación en el navegador y seleccione el botón Click me de la página Contador. Observe cómo el contador ahora se incrementa de su valor existente de uno a un valor de once. Cada vez que se selecciona el botón, el valor se incrementa en diez.

Apagar la aplicación

Siga estos pasos:

• Cierra la ventana del explorador.
• Para apagar la aplicación, presione Ctrl+C en el shell de comandos.

Congratulations! Ha completado correctamente este tutorial.

Pasos siguientes

En este tutorial, ha aprendido a:

• Crear un control Blazor Web App.
• Ejecute la aplicación.
• Cambie la aplicación.
• Cierre la aplicación.

Para obtener más información sobre los aspectos básicos de ASP.NET Core, consulte lo siguiente:

Introducción a los aspectos básicos de ASP.NET Core

Tutoriales adicionales

Tipo de aplicación	Scenario	Tutorials
Aplicación web	Nuevo desarrollo web de cliente y servidor con Blazor	Crear una aplicación de Blazor tareas pendientes y Crear una Blazor aplicación de base de datos de películas (Resumen)
API de la Web	Procesamiento de datos basado en servidor con API mínimas	Tutorial: Creación de una API mínima con ASP.NET Core
Aplicación de llamada a procedimiento remoto (RPC)	Servicios de contrato primero con búferes de protocolo	Creación de un cliente y un servidor gRPC de .NET en ASP.NET Core
Aplicación en tiempo real	Comunicación bidireccional de servidor/cliente	Introducción a ASP.NET Core SignalR

Recursos adicionales

• Introducción a .NET
• Visual Studio
• Visual Studio Code
• Comunidad de desarrolladores de .NET
• .NET Live TV