为什么我的按钮不能调用按钮类型为按钮的函数？

Question

我正在制作一个食谱网站，用户可以上传自己的食谱。我正在努力处理我的 CreateRecipe 页面。我希望用户输入成分名称、成分数量和计量单位。然后他们按下“添加”按钮，将他们的输入添加到我的数据库中，然后在屏幕上显示他们的成分。我想动态地执行此操作，以便用户可以添加多种成分，而无需刷新页面并清除所有其他输入信息。我对“AddIngredient”和“AddInstruction”按钮也有同样的问题，我似乎无法用它们的按钮调用这些函数。

@page "/create-recipe"
@using CookNet.Data
@inject RecipeService RecipeService
@inject NavigationManager NavigationManager
@using Microsoft.AspNetCore.Components.Forms

<h3>Create Recipe</h3>

<EditForm Model="@Recipe" OnValidSubmit="HandleSubmit" FormName="CreateRecipeForm">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <label>Name:</label>
    <InputText @bind-Value="@Recipe.Name" />

    <label>Description:</label>
    <InputTextArea @bind-Value="@Recipe.Description" />

    <label>Cook Time (minutes):</label>
    <InputNumber @bind-Value="@Recipe.CookTime" />

    <label>Ethnicity:</label>
    <InputText @bind-Value="@Recipe.Ethnicity" />

    <label>Category:</label>
    <InputText @bind-Value="@Recipe.Category" />

    <div class="form-group">
        <label>Ingredient Name:</label>
        <InputText @bind-Value="@NewIngredientName" />
    </div>
    <div class="form-group">
        <label>Quantity:</label>
        <InputNumber @bind-Value="@NewIngredientQuantity" />
    </div>
    <div class="form-group">
        <InputSelect @bind-Value="@NewIngredientQuantityUnit">
            <option value="teaspoon">tsp</option>
            <option value="tablespoon">Tbsp</option>
            <option value="cup">Cup</option>
            <option value="gram">Gram</option>
            <option value="ounce">Ounce</option>
        </InputSelect>
    </div>
    <button type="button" class="btn btn-primary" @onclick="AddIngredientAsync">Add</button>

    <div class="form-group">
        <label>Instructions:</label>
        <InputTextArea @bind-Value="NewInstructionText" />
    </div>
    <button type="button" class="btn btn-primary" @onclick="AddInstructionAsync">Add</button>

    @if (AddedIngredients.Any())
    {
        <h4>Added Ingredients:</h4>
        <ul>
            @foreach (var ingredient in AddedIngredients)
            {
                <li>@($"{ingredient.Quantity} {ingredient.QuantityUnit} - {ingredient.Name}")</li>
            }
        </ul>
    }

    @if (AddedInstructions.Any())
    {
        <h4>Added Instructions:</h4>
        <ul>
            @foreach (var instruction in AddedInstructions)
            {
                int stepNum = 0;
                <li>@($"{stepNum++}. {instruction}")</li>
            }
        </ul>
    }

    <button type="submit" class="btn btn-success">Submit</button>
</EditForm>

@code {
    Recipe Recipe { get; set; } = new Recipe();
    string NewIngredientName { get; set; }
    int NewIngredientQuantity { get; set; }
    string NewIngredientQuantityUnit { get; set; } = "tsp";
    string NewInstructionText { get; set; }
    List<Ingredient> AddedIngredients { get; set; } = new List<Ingredient>();
    List<Instruction> AddedInstructions { get; set; } = new List<Instruction>();

    private async Task AddIngredientAsync()
    {
        Console.WriteLine("BUTTON CLICKED!");
        await RecipeService.AddIngredientToRecipeAsync(Recipe, NewIngredientName, NewIngredientQuantity, NewIngredientQuantityUnit);
        AddedIngredients.Add(new Ingredient
        {
            Name = NewIngredientName,
            Quantity = NewIngredientQuantity,
            QuantityUnit = NewIngredientQuantityUnit
        });
        NewIngredientName = string.Empty;
        NewIngredientQuantity = 0;
        NewIngredientQuantityUnit = "tsp";
    }

    private async Task AddInstructionAsync()
    {
        Console.WriteLine("BUTTON CLICKED!");
        await RecipeService.AddInstructionToRecipeAsync(Recipe, NewInstructionText);
        AddedInstructions.Add(new Instruction
        {
            InstructionText = NewInstructionText
        });
        NewInstructionText = string.Empty;
    }

    async Task HandleSubmit()
    {
        Recipe.DateCreated = DateTime.Now;
        await RecipeService.CreateRecipeAsync(Recipe);
        NavigationManager.NavigateTo("/recipes");
    }
}

有什么建议吗？

Answer 1

在新的 Blazor Web App 项目类型中，默认为静态渲染。您的页面不是交互式的，只有 submit 按钮才有效。

对于您的设计，您需要选择另一种渲染模式：

@page "/create-recipe"
@rendermode InteractiveServer
...