Cómo implementar view-models de componentes Blazor en clases code-behind

Al comenzar con Blazor, seguro que veis en la mayoría de ejemplos que la implementación de la lógica (código C#) y de la pura interfaz de usuario (HTML) se encuentran en un bloque @code en el mismo archivo .razor, como en el siguiente bloque de código:

@* File: ~/Pages/HelloWorld.razor *@
@page "/hello"
<h1>Hello</h1>
<div>
    <label for="name">Your name:</label>
    <input id="name" @bind-value="Name" @bind-value:event="oninput"/>
</div>
@if (HasName)
{
    <h2>Hello, @Name!</h2>
}

@code
{
    public string Name { get; set; }
    public bool HasName => !string.IsNullOrWhiteSpace(Name);
}

Sin embargo, esto no tiene que ser necesariamente así. En tiempo de compilación, un archivo .razor genera una clase parcial C# con su mismo nombre, lo cual nos brinda la posibilidad de mover todo el código C# a otra porción de dicha clase.

Podéis ver las clases generadas para cada archivo .razor en la carpeta del proyecto obj\debug\netcoreapp3.1\Razor\Pages.

La única precaución a tener en cuenta es que la clase debe ser parcial, llamarse exactamente igual que el archivo .razor (mayúsculas y minúsculas incluidas), y encontrarse en el mismo espacio de nombres (algo que, por ejemplo, podríamos conseguirlo rápidamente si creamos la clase en la misma carpeta).

Además, si usamos justo el mismo nombre de archivo pero con la extensión final ".cs", el editor lo mostrará por debajo del primero, muy al estilo "code-behind" al que estamos acostumbrados.

Los siguientes bloques de código muestran cómo quedaría la página anterior si realizamos esta división:

@* File: ~/Pages/HelloWorld.razor *@
@page "/hello"
<h1>Hello</h1>
<div>
    <label for="name">Your name:</label>
    <input id="name" @bind-value="Name" @bind-value:event="oninput"/>
</div>
@if (HasName)
{
    <h2>Hello, @Name!</h2>
}

// File: ~/Pages/HelloWorld.razor.cs
namespace BlazorDemo.Pages
{
    public partial class HelloWorld
    {
        public string Name { get; set; }
        public bool HasName => !string.IsNullOrWhiteSpace(Name);
    }
}

Fijaos que hemos llamado a la clase HelloWorld (usando Pascal casing) porque el archivo Razor era HelloWorld.razor. Pero si se hubiera llamado Hello-World.razor, o Hello!World.razor , dado que C# no permite nombres de clases con esos caracteres separadores, debería llamarse Hello_World.

Publicado en Variable not found.