Blazor笔记列表添加后无法显示标题和描述问题求助

核心问题分析 #

代码里有两个关键问题导致标题和描述无法显示：

1. 表单双向绑定语法错误：FormCrearNota组件使用了bind-value，这不是Blazor标准的双向绑定语法，且组件未将用户输入值传递给父页面。
2. 创建笔记时传递空值：ListaNotas页面调用AgregarNota时，传入的NuevoTitulo和NuevaDescripcion始终为空，因为表单组件没有同步输入值到这两个变量。

分步修复 #

1. 修复FormCrearNotas的双向绑定与参数传递 #

修改FormCrearNota.razor的输入框绑定语法，同时将输入字段改为支持双向绑定的参数：

<!-- FormCrearNota.razor -->
<div class="mb-4">
    <label class="block text-gray-700 font-bold mb-2" for="titulo">
        Titulo
    </label>
    <input class="shadow appearance-none border rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
           @bind-Value="@Titulo" @bind-Value:event="oninput" />
</div>
<div class="mb-6">
    <label class="block text-gray-700 font-bold mb-2" for="descripcion">
        Descripcion
    </label>
    <input class="shadow appearance-none border rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
           @bind-Value="@Descripcion" @bind-Value:event="oninput" />
</div>
<SfButton CssClass="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" OnClick="CancelarNota">
    Cancelar
</SfButton>
<SfButton CssClass="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" OnClick="CrearNota">
    Crear
</SfButton>

更新FormCrearNotas后台代码，添加双向绑定所需的Changed回调：

// FormCrearNotas后台代码
public partial class FormCrearNotas
{
    [Required(ErrorMessage = "Falta un campo por rellenar")]
    [Parameter] public string Titulo { get; set; }
    [Parameter] public EventCallback<string> TituloChanged { get; set; }

    [Required(ErrorMessage = "Falta un campo por rellenar")]
    [Parameter] public string Descripcion { get; set; }
    [Parameter] public EventCallback<string> DescripcionChanged { get; set; }

    public string CancelText { get; set; } = "Cancelar";
    public string OkText { get; set; } = "Crear";
    [Required(ErrorMessage = "Falta un mensaje")]
    public string ErrorMessage { get; set; }

    [Parameter] public EventCallback CancelarNota { get; set; }
    [Parameter] public EventCallback CrearNota { get; set; }
}

2. 修复ListaNotas页面的数据传递逻辑 #

修改ListaNotas.razor中表单组件的调用方式，使用双向绑定同步输入值：

<!-- ListaNotas.razor -->
@if (MostrarFormulario)
{
    <FormCrearNotas 
        @bind-Titulo="NuevoTitulo" 
        @bind-Descripcion="NuevaDescripcion"
        CancelarNota="@(() => MostrarFormulario = false)" 
        CrearNota="@AgregarNota" />
}

简化AgregarNota方法，直接使用组件的属性值：

// ListaNotas后台代码
public void AgregarNota()
{
    if (!string.IsNullOrWhiteSpace(NuevoTitulo))
    {
        Nota nota = new Nota { Titulo = NuevoTitulo, Descripcion = NuevaDescripcion };
        notas.Add(nota);
        NuevoTitulo = "";
        NuevaDescripcion = "";
        MostrarFormulario = false;
    }
}

3. 可选优化：简化BlocNota组件参数 #

移除冗余的单独参数，直接接收Nota对象：

<!-- BlocNota.razor -->
<div class="m-4 p-2 rounded-lg shadow" style="background-color: @colores[random.Next(colores.Count)] ">
    <h3 class="text-white font-bold rounded-lg">
        @Nota.Titulo
    </h3>
    <br />
    <p class="text-white rounded-lg">
        @Nota.Descripcion
    </p>
    <br />
    <SfButton CssClass="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" @onclick="@BorrarNota">Eliminar</SfButton>
</div>

// BlocNota后台代码
public partial class BlocNota
{
    [Parameter, Required] public Nota Nota { get; set; }
    [Parameter] public EventCallback BorrarNota { get; set; }
    private readonly Random random = new Random();
    private readonly List<string> colores = new() { "#F94144", "#F3722C", "#F8961E", "#F9C74F", "#90BE6D", "#43AA8B", "#577590" };
}

更新ListaNotas中BlocNota的调用：

<!-- ListaNotas.razor -->
<BlocNota Nota="@(new Nota { Titulo = "Hola", Descripcion = "Esto es un ejemplo" })" />
<div class="flex flex-wrap justify-center gap-2">
    @if (!notas.Any())
    {
        <p>No hay notas</p>
    }else
    {
        @foreach (var nota in notas)
        {
            <BlocNota Nota="nota" BorrarNota="@(() => EliminarNota(nota))" />
        }
    }
</div>

额外注意点 #

• 原代码中BlocNota的m4类是错误的，应改为Tailwind标准的m-4间距类。
• 随机颜色生成时，应复用同一个Random实例，避免重复生成相同颜色。

内容的提问来源于stack exchange，提问作者Gegob