有没有简单的方法可以从 ASP.NET Core 中的枚举创建 Bootstrap 单选按钮组？

Question

我有一个关于优先级的枚举：

public enum Priorities
    {
        P1,
        P2,
        P3,
        P4,
        P5,
    }

我想在 Bootstrap 中创建一个单选按钮组，以选择应给予哪个优先级作为以下模型属性的值：

public Priorities Priority { get; set; }

我找到了这个 Bootstrap 模板：

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

但不幸的是我不知道如何让它工作，选择正确的按钮后，该值将被赋予在数据库中创建的新对象。

Answer 1

首先将值添加到您的枚举中：

public enum Priorities : int
{
    P1 = 1,
    P2 = 2,
    P3 = 3,
    P4 = 4,
    P5 = 5,
}

然后循环遍历枚举的每个值并将值添加到 ID。

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
@foreach(int e in Enum.GetValues(typeof(Priorities)))
{
    var buttonId = $"btnradio{e}";
    <input type="radio" class="btn-check" name="btnradio" id="@buttonId" autocomplete="off" checked="@(e==1)">
    <label class="btn btn-outline-primary" for=""@buttonId"">Radio @e</label>
}
</div>

输出：

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
    <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked="checked">
    <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
    <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
    <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
    <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
    <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
    <input type="radio" class="btn-check" name="btnradio" id="btnradio4" autocomplete="off">
    <label class="btn btn-outline-primary" for="btnradio4">Radio 4</label>
    <input type="radio" class="btn-check" name="btnradio" id="btnradio5" autocomplete="off">
    <label class="btn btn-outline-primary" for="btnradio5">Radio 5</label>
</div>

Answer 2

此解决方案有效：

@foreach (var value in Enum.GetValues(typeof(Priorities)))
{
        <input type="radio" asp-for="" class="btn-check" id="@value" value="@((int)value)">
        <label asp-for="" class="btn btn-outline-primary" for="@value">@value</label>
}