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

Posted 2023-02-19

【中文标题】如何将我选中的复选框与另一个绑定

【英文标题】：How can I bind my checked checkboxes with another

【发布时间】：2022-01-14 12:56:57

【问题描述】：

我目前正在开发 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();

希望你们能帮忙。

【问题讨论】：

@if (recipes.Contains()) <ul> </ul> @foreach (var recipe in recipes) <EditForm Model="this"> <li> @recipe.Name <br /> <p style="font-weight: bold;">Description:</p> @recipe.Description <br /> <a href="url">@recipe.URL</a> </li> </EditForm>

我可以在 recipes.Contains() if 语句中添加什么来获取哪些成分匹配的食谱？

【参考方案1】：

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

【讨论】：

我不确定，我明白你的意思。你能详细说明一下吗？