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

时间:2019-11-19 09:14:24

标签: blazor blazor-server-side

我有一个带有约60个复选框的表单,我必须根据从数据库中获取的用户个人资料来随机激活一些复选框。我有要选择的复选框的ID。 Blazor有什么办法做到这一点?

第一个元素是select,我可以在其中选择某个用户角色,为此我会收到必须针对该特定角色激活的复选框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                    
    }

}

2 个答案:

答案 0 :(得分:1)

您可以执行以下操作:

Range("A1").Formula = "=" & Replace(pouet, ",", ".") & "/" & CountCells

答案 1 :(得分:0)

使用属性Text ValidValue及其自己的OnChange事件使您自己的复选框控件 也具有Checked的公共财产。

<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
        }

    }


}

然后您可以执行此操作,这将创建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
    }

}

这很难在这里阅读,因此我将其放在BlazorFiddle https://blazorfiddle.com/s/0gn657dn中,因此您可以使用它并生成100个复选框,因此您可以看到它很快,并且左侧列表仅显示真实值因此,当您要写回数据库时,可以使用类似的方法。

我希望这会有所帮助。