问题描述
因此，总体目标是我希望在表单上具有所有不同图案和不同类型的裁剪(男性、女性、通用)的复选框，并且我希望能够选中x、y和z模式，然后选择男性和女性类型。然后将我检查过的值传递或访问到一个方法，该方法然后执行所有独特的配置。然后调用我的数据访问库并将它们保存到我的SQL Server。
我使用EditForms从由硬编码列表填充的下拉列表中获取数据，然后调用我的InsertPattern函数，从而一次插入一个模式。
我不确定如何使用Blazors EditForms中的InputCheckBox选项。我知道它必须绑定到布尔值，所以我尝试创建两个布尔值列表来匹配我的PatternName和CutType/Gender，但似乎这不是处理它的方法。
我以前读过，我必须设置一个onChange函数来处理我的编辑表单。这是否应该是调用与我的PatternName和PatternCut列表关联的布尔列表的那个列表？
因此，我真正的问题是如何设置这些输入复选框？ 下面是我的清单和模特的例子。模式模型有4个部分PatternID，即PK PatternName、PatternType和Inactive，仅供将来实现。 当然，我的allInserts将需要更改，但一旦我弄清楚如何正确使用输入复选框，我就应该知道如何操作。 @page "/Pattern"
@using DataAccessLibrary
@using DataAccessLibrary.Models
@inject IPatternData _db
<h4>Current Patterns </h4>
@if (patternList is null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table table-striped">
<thead>
<tr>
<th>Pattern Name</th>
<th>Pattern Cut</th>
</tr>
</thead>
<tbody>
@foreach (var CurrentPatterns in patternList)
{
<tr>
<td>@CurrentPatterns.PatternName</td>
<td>@CurrentPatterns.PatternCut</td>
</tr>
}
</tbody>
</table>
}
<h3>Insert Patterns</h3>
<EditForm Model=@newPattern OnValidSubmit=@InsertPattern>
<ValidationSummary />
<InputSelect @bind-Value=newPattern.PatternName>
<option value=" ">"..."</option>
@foreach (string patName in AllPatternNames)
{
<option value=@patName>@patName</option>
}
</InputSelect>
<InputSelect @bind-Value=newPattern.PatternCut>
<option value=" ">"..."</option>
@foreach (string cut in Gender)
{
<option value=@cut>@cut</option>
}
</InputSelect>
<button type="submit" class="btn btn-primary"> Submit</button>
</EditForm>
<h3>Insert Patterns V2</h3>
<EditForm Model=@newPattern OnValidSubmit=@CallInserts>
<ValidationSummary />
@foreach (string patName in AllPatternNames)
{
<label>@patName</label>
<InputCheckbox @bind-Value=@patName />
}
@foreach (string cut in Gender)
{
<label>@cut</label>
<InputCheckbox @bind-Value=@cut />
}
<button type="submit" class="btn btn-primary"> Submit</button>
</EditForm>
@*@foreach (var cutType in Gender)
{
<input type="checkbox" />
@cutType
}
@foreach (var patternName in AllPatternNames)
{
<input type="checkbox" />
@patternName
}*@
@code {
private List<PatternModel> patternList;
private PatternModel newPattern = new PatternModel();
private List<string> AllPatternNames = new List<string> {"Middle Weight Coverall",
"Light Weight Coveral",
"Winter Coverall",
"Arctic Coverall",
"Button Up Workshirt",
"Henley Shirt’",
"Welders Shirt",
"Daily Bib",
"Winter Bib",
"Arctic Bib",
"Jeans",
"Work Pants",
"Tactical Pant",
"Parka",
"Bomber",
"Frost Jacket",
"Fleece ¼ / full zip",
"Hat Liner",
"Balaclava",
"Lab Coats" };
public List<string> Gender = new List<string>
{
"Men",
"Women",
"Universal"
};
private List<bool> selectedPatterns = new List<bool>
{
false, false, false, false, false,false, false, false, false, false,false, false, false, false, false,false, false, false, false, false,false, false, false, false, false,false, false, false, false, false
};
private List<bool> selectedCut = new List<bool> { false, false, false };
protected override async Task OnInitializedAsync()
{
patternList = await _db.Get();
}
private async Task InsertPattern()
{
PatternModel NP = new PatternModel
{
PatternCut = newPattern.PatternCut,
PatternName = newPattern.PatternName
};
await _db.Insert(NP);
patternList.Add(NP);
newPattern = new PatternModel();
}
private void CallInserts()
{
for (int i = 0; i < Gender.Count; i++)
{
if (selectedCut[i] == true)
{
for (int x = 0; i < AllPatternNames.Count; x++)
{
if (selectedPatterns[x] == true)
{
PatternModel NP = new PatternModel
{
PatternCut = Gender[i],
PatternName = AllPatternNames[i]
};
patternList.Add(NP);
newPattern = new PatternModel();
//newPattern.PatternCut = Gender[i];
//newPattern.PatternName = AllPatternNames[i];
}
}
}
//await InsertPattern();
}
}
//private List<ClosuresModel> closure;
}
如果需要更多信息，请让我知道！！
推荐答案
复选框需要绑定到bool变量。或者，如果您不想使bool成为变量，则可以将该项传递给事件处理程序，并保留一个单独的选定项列表。有很多其他方法可以做到这一点，但希望您能明白这一点。
1.使用添加的IsSelected变量创建承载您的列表项的载体类。
@if (SelectablePatterns is not null)
{
foreach (var item in SelectablePatterns)
{
<input type="checkbox" @bind-value="@item.IsSelected" />
@item.Name
<br />
}
<br />
<div><b>Selected items:</b></div>
foreach (var item in SelectablePatterns.Where(sp => sp.IsSelected))
{
<div>@item.Name</div>
}
}
@code {
private List<string> AllPatternNames = new List<string>
{ "Middle Weight Coverall", "Light Weight Coveral", "Bikini Briefs" };
class SelectablePattern { public string Name; public bool IsSelected; }
List<SelectablePattern> SelectablePatterns;
protected override void OnInitialized()
{
SelectablePatterns = AllPatternNames.Select(pat => new SelectablePattern { Name = pat }).ToList();
}
}
2.为所选项目保留单独的列表，并在复选框的事件处理程序中添加或删除它们。
@foreach (var item in AllPatternNames)
{
<input type="checkbox" @onchange="args=>TogglePattern(args, item)" /> @item <br />
}
<br />
<div><b>Selected items:</b></div>
@foreach (var item in SelectedPatterns)
{
<div>@item</div>
}
@code {
private List<string> AllPatternNames = new List<string> { "Middle Weight Coverall", "Light Weight Coveral", "Bikini Briefs" };
List<string> SelectedPatterns = new List<string>();
async Task TogglePattern(ChangeEventArgs args, string item)
{
bool IsSelected = (bool)args.Value;
if (IsSelected) SelectedPatterns.Add(item);
else SelectedPatterns.Remove(item);
}
}