使用Blazor在循环中激活多个复选框

使用Blazor在循环中激活多个复选框,blazor,blazor-server-side,Blazor,Blazor Server Side,我有一个表格,里面有大约60个复选框,我必须根据从数据库获取的用户配置文件随机激活其中的一些复选框。我有要选择的复选框的ID。有没有办法用Blazor做到这一点 第一个元素是select,我可以在其中选择某个用户角色,我将收到一个复选框ID列表,必须为该特定角色激活这些复选框ID <select class="form-control" @bind:event="onInput" @bind="@D5UserTitle" @onchange="PopulateAccessRight

我有一个表格,里面有大约60个复选框,我必须根据从数据库获取的用户配置文件随机激活其中的一些复选框。我有要选择的复选框的ID。有没有办法用Blazor做到这一点

第一个元素是select,我可以在其中选择某个用户角色,我将收到一个复选框ID列表,必须为该特定角色激活这些复选框ID

    <select class="form-control" @bind:event="onInput" @bind="@D5UserTitle" @onchange="PopulateAccessRights">
        <option selected disabled>Please select role...</option>
        @foreach (var title in Titles) {

        <option value="@title.PkId">@title.Jobtitle1</option>
        }
    </select>

    <input type="checkbox" id="sma" />
    <input type="checkbox" id="smb" />
    <input type="checkbox" id="smc" />
    <input type="checkbox" id="smd" /> 

    @code{

    protected override async Task OnInitializedAsync()
    {
    D5Users = await us.GetUsersAsync();
    Titles = await us.GetJobTitlesAsync();
    ADUsers = await us.GetADUsersAsync();
    }

    private void PopulateAccessRights()
    {

// Here we acquire a list of the IDs of every checkbox to tick for that specific role. The result looks like this: sma;smd;CM_A;CESAR_A;MBKSO_A;OTB_A;VPLUS_A;MW_A;OD_A;XP_A
Every corresponding checkbox must be ticked.

List<string> ConfigurationString = Titles.Where(s => s.PkId == 25).First().ConfigurationString.Split(";").ToList();

// Here's where I'd like to activate the checkboxes                    
    }

}

请选择角色。。。
@foreach(标题中的var标题){
@职位职位职位职位1
}
@代码{
受保护的重写异步任务OnInitializedAsync()
{
D5Users=waiting us.GetUsersAsync();
Titles=等待我们。GetJobTitleAsync();
ADUsers=等待我们。GetADUsersAsync();
}
私有void PopulateAccessRights()
{
//在这里,我们获取每个复选框的ID列表,以便为特定角色打勾。结果如下所示:sma;smd;CM_a;CESAR_a;MBKSO_a;OTB_a;VPLUS_a;MW_a;OD_a;XP_a
必须勾选每个相应的复选框。
List ConfigurationString=Titles.Where(s=>s.PkId==25.First().ConfigurationString.Split(“;”).ToList();
//我想在这里激活复选框
}
}

您可以执行以下操作:

@foreach (var employee in employees)
{
    <input type="checkbox" id="@employee.ID" @bind="@employee.Checked" />
}



@code{ 

    IList<Employee> employees = new List<Employee>() { new Employee { ID=1, Name="Nanacy", Checked=true},
                                                       new Employee { ID=2, Name="Andrew", Checked=true},
                                                       new Employee { ID=2, Name="Bill", Checked=false}};


    public class Employee
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public bool Checked  { get; set; }
    }

} 
@foreach(雇员中的var雇员)
{
}
@代码{
IList employees=new List(){new employees{ID=1,Name=“Nanacy”,Checked=true},
新员工{ID=2,Name=“Andrew”,Checked=true},
新员工{ID=2,Name=“Bill”,Checked=false};
公营雇员
{
公共int ID{get;set;}
公共字符串名称{get;set;}
公共布尔检查{get;set;}
}
} 

使用属性文本ValidValue及其自己的OnChange事件创建自己的复选框控件 还具有选中的公共属性

<input type="checkbox"  @bind="@Checked" >@Text<br>
@code {

    [Parameter] public String Text { get; set; }
    [Parameter] public String ValidValue { get; set; }


    [Parameter] public Action OnChange { get; set; }


    private bool _Checked = false;
    public bool Checked
    {

        get
        {
            return _Checked;
        }
        set
        {
            _Checked = value;
            OnChange.Invoke(); //this just tells the  parent control something happened 
    so it can redraw
        }

    }


}

@Text
@代码{ [参数]公共字符串文本{get;set;} [参数]公共字符串有效值{get;set;} [参数]更改时的公共操作{get;set;} private bool _Checked=假; 公共图书馆检查 { 得到 { 返回已检查; } 设置 { _选中=值; OnChange.Invoke();//这只是告诉父控件发生了什么 所以它可以重新绘制 } } }
然后你可以创建一个MyCheckBox控件列表,然后使用@ref属性将这些控件替换为HTML中for循环添加的控件,然后你可以像其他列表一样使用这些控件

<div class="row">
    <div class="col-md-6">
        <button @onclick="Change">Set config Values</button>
        <button @onclick="Clear">Clear Checks</button>
        @for (int i = 0; i < NumberOfControls; i++)
        {
            int x = i; // need to make a copy here  or everything thinks it is the last one when you click it 
            String Value = $"sms{i}";
            String Text = "This is for " + Value;
            <MyCheckBox @ref="Checkboxes[x]" ValidValue="@Value" Text="@Text" OnChange="Changed" />
        }
    </div>
    <div class="col-md-6">
       <h4>List of Checked Boxes</h4>
        @foreach (MyCheckBox cb in Checkboxes.Where(c => c.Checked == true))
        {
            <div>@cb.ValidValue --- @cb.Checked</div>
        }
    </div>
</div>


@code{

    private int NumberOfControls = 100;

    List<MyCheckBox> Checkboxes = new List<MyCheckBox>();

    List<string> ConfigurationString = new List<string>() { "sms5", "sms6", "sms7", "sms8", "sms10", "sms22", "sms21", "sms29" };

    protected override void OnInitialized()
    {
        // create place holders in the list that will be replaced  by the actual controls when the page renders
        for (int i = 0; i < NumberOfControls; i++)
        {
            Checkboxes.Add(new MyCheckBox());
        }
        base.OnInitialized();
    }


    void Change()
    {
        foreach (var c in ConfigurationString)
        {
            string localc = c;
            MyCheckBox x = Checkboxes.Where(c => c.ValidValue == localc).FirstOrDefault();
            if (x != null)
            {
                x.Checked = !x.Checked;
            }
        }
    }

    void Clear()
    {
        @foreach (MyCheckBox cb in Checkboxes)
        {
            cb.Checked = false;
        }
    }

    void Changed()
    {
        StateHasChanged(); //redraw this page
    }

}

设置配置值
清点
@对于(int i=0;ic.Checked==true))
{
@cb.ValidValue---@cb.Checked
}
@代码{
私有int NumberOfControls=100;
列表复选框=新建列表();
列表配置字符串=新列表(){“sms5”、“sms6”、“sms7”、“sms8”、“sms10”、“sms22”、“sms21”、“sms29”};
受保护的覆盖无效OnInitialized()
{
//在列表中创建占位符,当页面呈现时,该占位符将被实际控件替换
对于(int i=0;ic.ValidValue==localc.FirstOrDefault();
如果(x!=null)
{
x、 选中=!x.Checked;
}
}
}
无效清除()
{
@foreach(复选框中的MyCheckBox cb)
{
cb.Checked=假;
}
}
作废已更改()
{
StateHasChanged();//重新绘制此页面
}
}
这里很难阅读,所以我把它放在Blazorfidle中,这样你就可以使用它了。它还生成了100个复选框,这样你就可以看到它很快,左边的列表只显示真实的值,这样当你想写回数据库时,你就可以使用类似的东西了


我希望这有帮助

请至少发布一段您尝试过的代码,我们不会为您实现它。请看这里的示例:这很好。但是我想得越多,我就越觉得我必须回到Javascript上来,因为在我勾选了所有必要的复选框之后,我必须将每个勾选的复选框写回数据库,以便进行用户权限管理。不幸的是,管理员可以手动更改一些框,我必须在最后检查哪些框是真正选中的。在JS中,我将获得对页面上每个复选框的引用,检查它是否被选中,并将ID写回DB。当我为每个复选框都有一个属性时,我不知道如何迭代所有属性。您可以通过双向绑定来绑定复选框,以便在需要将修改保存到数据库时,当前数据会反映它。您不需要求助于JavaScript…我使用的配置字符串(请参阅第一篇文章)只是某个用户角色的模板,用于描述用户拥有的权限(以及相应的复选框ID)。该工具用于创建新用户帐户。当管理员决定某个用户应该拥有某个角色以及某个系统的附加权限时,他会勾选一个附加框。我必须将所有打勾的框写回用户数据库以获取文档。我将配置存储为字符串,而不是数据库中每个复选框的单个列。因此,,