[英]Get the list of check items in Select Drobdown Check Box In Blazor with C#
在 Blazor 项目中,我们需要一个 DropDownCheckBox,为此我从 Blazor 创建了 HTML 模板。 你可以在这张照片中看到:
如果选中某一项或未选中其中一项,则会执行console.log(this.selectedOptions)
方法,并在浏览器的日志部分显示选项列表。
<div class="information__set toggle_module">
<div class="information_wrapper form--fields row">
<div class="col-md-6" style="padding-left: 0px;padding-right: 0px;">
<div class="form-group">
<div>
<div class="container">
<h1>Multiselect-dropdown demo!</h1>
<div class="row">
<div class="col ">
<hr />
@if (Items != null)
{
<label>Select 2</label>
<select name="field2" id="field2" multiple multiselect-search="true" multiselect-select-all="false" multiselect-max-items="1" onchange="console.log(this.selectedOptions)">
@foreach (var itm in Items)
{
if (!itm.Selected)
{
<option value="@itm.ItemID">@itm.SelItms</option>
}
else
{
<option selected value="@itm.ItemID">@itm.SelItms</option>
}
}
</select>
}
</div>
</div>
<br /><br /><br />
<button class="btn btn-light" onclick="field2.innerHTML='<option value=1>New option 1</option><option selected value=2>New option 2</option><option value=3>New option 3</option>';field2.loadOptions()">Load new options</button>
<input type="text" id="ttt" />
</div>
</div>
</div>
</div>
</div>
</div>
Blazor 中的 C# 代码部分:
@code
{
[Parameter]
public List<MultiSelectList> Items { get; set; } = null!;
MultiSelectList fref = new MultiSelectList();
string IntSelectedCountryID;
string IntSelectedCountryIDMain
{
get
{
return IntSelectedCountryID;
}
set
{
IntSelectedCountryID = value;
Console.WriteLine(value.ToString() + "------------------");
}
}
protected override async Task OnInitializedAsync()
{
Items = new List<MultiSelectList>();
MultiSelectList m;
for (int i = 0; i <= 5; i++)
{
m = new MultiSelectList();
if (i == 3)
{
m.Selected = true;
}
else
{
m.Selected = false;
}
m.ItemID = i + 1;
m.SelItms = "Item " + i.ToString();
Items.Add(m);
}
}
private void CheckboxChanged(ChangeEventArgs e)
{
Console.WriteLine(e.Value.ToString());
}
public class MultiSelectList
{
public int ItemID { get; set; }
public string SelItms { get; set; }
public Boolean Selected { get; set; }
}
}
如何将console.log(this.selectedOptions)
方法发送的列表传递给C#参数或变量,并在程序中使用。 感谢您的善意和关注。 html sprace 与 java 等文件的链接: https ://github.com/admirhodzic/multiselect-dropdown
@onchange="CheckboxChanged">
如果您想管理选定或未选定的列表项,您必须收集它们,例如在列表中并跟踪它们的修改。
更新嗨,我不知道你想要什么,但它对我有用:
<div class="container">
<h1>Multiselect-dropdown demo!</h1>
<div class="row"><div class="col ">
<label>Select 1</label>
<select name="field1" id="field1" multiple
@onchange="CheckboxChanged"
multiselect-hide-x="true">
<option value="1">Audi</option>
<option selected value="2">BMW</option>
<option selected value="3">Mercedes</option>
<option value="4">Volvo</option>
<option value="5">Lexus</option>
<option value="6">Tesla</option>
</select>
</div></div>
private void CheckboxChanged(ChangeEventArgs e)
{
var listOfSelectedElements= ((IList<string>)e.Value);
}
对不起,如果再次误解。
我建议使用comboBox
,例如,您可以绑定您在组合框中选择的任何内容
<MudSelect IconSize='Size.Small'Dense="true" MultiSelection=true @bind-SelectedValues='selectedValues'>
@for(var i=0;i<5;i++)
{
<MudSelectItem>item @i</MudSelectItem>
}
</MudSelect>
@code
{
private IEnumerable<string> selectedValues {get; set;} = new HashSet<string();
}
在您的按钮中,您可以循环诸如foreach
selectedValues
之类的值
请参阅他们网站上的示例
好的,这就是你正在做的:
当用户选择一个新选项时,您在控制台中写入列表。 这是非常非常简单的问题。
您需要在代码部分声明一个列表,然后当 onclick 事件单击时,而不是通过控制台编写列表,而是调用另一个方法,例如onchange="@MyMethod(this.selectedOptions)"
然后
@code{
.....
void MyMethod(...){
myList = myparameter;
}
...}
myList 是你定义的列表,需要@表示这是c#代码
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.