Crear su primera aplicación web con ASP.NET Core con Blazor

Windows Linux macOS

Probar el contador

En la aplicación en ejecución, vaya a la página Contador haciendo clic en la pestaña Contador en la barra lateral de la izquierda. Debe mostrarse la siguiente página:

La página Contador presenta un botón Haga clic en mí para incrementar el conteo que se muestra en la página.

Seleccione el botón Hacer clic aquí para incrementar el recuento sin necesidad de actualizar la página. Por lo general, para incrementar un contador en una página web, es necesario escribir JavaScript, pero, con Blazor, puede usar C#.

Puede encontrar la implementación del componente de Counter en el archivo Counter.razor ubicado dentro del directorio Components/Pages.

Components/Pages/Counter.razor
@page "/counter"
@rendermode InteractiveServer

<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++;
    }
}

Una solicitud de /counter en el explorador, como se especifica en la directiva de @page en la parte superior, hace que el componente Counter presente su contenido. La directiva @rendermode habilita la representación interactiva del servidor para el componente, de modo que pueda controlar eventos de interfaz de usuario desde el explorador.

Cada vez que se selecciona el botón Haga clic aquí:

  • Se desencadena el evento onclick.
  • Se llama al método IncrementCount.
  • currentCount se incrementa.
  • El componente se representa para mostrar el recuento actualizado.