如何将我选中的复选框与另一个绑定

Question

我目前正在开发 Blazor 服务器上的膳食计划系统，您可以在其中列出可用成分的列表，该列表将生成可能的食谱列表（成分和食谱均由管理员通过数据库制作） .在配方表中，配料表也位于数据库中。 我有一个复选框，可以在其中检查他/她的成分，选中后将其粘贴到列表中。 但是如何在检查的成分和食谱之间建立联系，以便显示或突出显示可用的食谱？ An image of the current system

这是您可以选择的成分列表：

 @foreach (var ing in checkedIngredients)
                 {
                    <EditForm Model="this">
                        <input type="checkbox" @bind="ing.Checked" />@ing.Ingredient.Name, @ing.Ingredient.Category
                    </EditForm>
                 }
                <button @onclick="addedChanged">Add</button>



@code

private List<Ingredients> ingredients;
private List<boolIngredients> checkedIngredients = new List<boolIngredients>();
private List<Ingredients> addedIngredients;
private Ingredients ing = new Ingredients();

private async Task InsertData()
{
    string sql = "SELECT FROM ingredients (Name) VALUES (@Name);";
    await _data.SaveData(sql, new { Name = ing.Name, Category =ing.Category }, _config.GetConnectionString("default"));
    await OnInitializedAsync();
}

protected override async Task OnInitializedAsync()
{
    string sql = "SELECT * FROM ingredients";

    ingredients = await _data.LoadData<Ingredients, dynamic>(sql, new { }, _config.GetConnectionString("default"));
    foreach (var ingredent in ingredients)
    {
        checkedIngredients.Add(new boolIngredients
        {
            Checked = false,
            Ingredient = ingredent
        });
    }
}

这是检查成分的清单：

     @if (addedIngredients == null)
        {
            <p>Loading</p>
        } else
        {
            @foreach (var ing in addedIngredients)
            {
                <p>@ing.Name</p>
            }
        }

@code
private void addedChanged()
{
    addedIngredients = new List<Ingredients>();
    foreach (var ing in checkedIngredients)
    {
        if (ing.Checked == true)
        {
            addedIngredients.Add(ing.Ingredient);
        }
    }
}

这是食谱列表：

@foreach (var recipe in recipes)
                 {
                    <EditForm Model="this">
                        <input type="checkbox" />@recipe.Name, @recipe.URL, @recipe.Description
                    </EditForm>

                 }
@code 
 List<Recipes> recipes;
private Recipes recipe = new Recipes();
private Recipes DeleteForm = new Recipes();




 protected override async Task OnInitializedAsync()
{
    
    string abc = "SELECT * FROM recipes";

    recipes = await _data.LoadData<Recipes, dynamic>(abc, new { }, _config.GetConnectionString("default"));
}

private async Task InsertDataRecipe()
{
    string sql = "INSERT INTO recipes (Name, Ingredient, Description, URL, Admin_admin_id) VALUES (@Name, @Ingredient, @Description, @URL, @Admin_admin_ID);";
    await _data.SaveData(sql, new { Name = recipe.Name, Ingredient = recipe.Ingredient, Description = recipe.Description, Url = recipe.URL, Admin_admin_ID = recipe.Admin_admin_ID }, _config.GetConnectionString("default"));
    await OnInitializedAsync();
}

希望你们能帮忙。

Answer 1

您可能需要绑定到复选框的onchange 事件以触发数据获取过程。 在这个sample 中，您可以查看如何做到这一点。