在 ASP.NET Core MVC 中使用 Enum 创建复选框

Question

我想使用枚举创建一个复选框。我可以使用枚举创建一个简单的清单，没有任何问题，但当我在清单中使用

asp-for=""

时，它会给我错误。

每当我使用

asp-for=""

时，我都会收到此错误：

InvalidOperationException：意外的“asp-for”表达式结果类型“Website.Data.Enum.CollectionCategory”。 “asp-for”必须是“System.Boolean”或“System.String”类型，如果“type”是“checkbox”，则可以将其解析为“System.Boolean”。

我使用枚举 with

asp-for=""

创建了单选按钮，并且它工作没有任何问题。

我在网上搜索了为什么会这样，结果如下：

不幸的是，为每个枚举值渲染复选框是不可能的——根据定义，您始终只能选择枚举的一个值。如果您想要复选框，您可以为每个复选框创建单独的布尔属性。

我已经寻找了多种解决方案，但不幸的是，我的问题仍然没有解决。

这是我的代码：

枚举定义：

public enum CollectionCategory
{
    [Display(Name = "Veg")]
    Veg = 0,

    [Display(Name = "NonVeg")]
    NonVeg = 1,

    [Display(Name = "Breakfast")]
    Breakfast = 2,

    [Display(Name = "Lunch")]
    Lunch = 3,

    [Display(Name = "Dinner")]
    Dinner = 4
}

模型类：

public class Post
{
    // Code Before

    public CollectionCategory CollectionCategory { get; set; }

    // Code After
}

查看模型：

public class CreatePostViewModel
{
    // Code Before
    public CollectionCategory CollectionCategory { get; set; }
}

控制器：

public IActionResult Create()
{
    return View();
}

[HttpPost]
public async Task<IActionResult> Create(CreatePostViewModel postVM)
{
    if (ModelState.IsValid)
    {
        var post = new Post
        {
            // Code before
            CollectionCategory = postVM.CollectionCategory,                    
        };

        _postInterface.Add(post);
        return RedirectToAction("Index");
    }
    else
    {
        // Error
    }

    return View(postVM);
}

查看（在没有

asp-for=""

的情况下也能正常工作）：

<div class="col-md-12 mb-3">
    @foreach (var value in Enum.GetValues(typeof(CollectionCategory)))
    {
        <input type="checkbox" asp-for="CollectionCategory" class="btn-check" id="@value" value="@((int)value)" required>
        <label asp-for="CollectionCategory" class="btn btn-outline-primary" for="@value">@value</label>
    }
</div>

谢谢您的帮助。

Answer 1

首先，从控制器中的代码来看，您只需要在视图模型中使用单个 CollectionCategory，单选按钮更适合您的场景

如果要将值绑定到多个 CollectionCategory，则必须为 checkbox 创建一个属性类型为

bool

的模型，并创建一个 hiden 输入来保存枚举的值；

类似的问题我曾经在这里回答过。

这是一个简单的例子，希望对您有帮助：

型号：

public enum CollectionCategory
{
    [Display(Name = "Veg")]
    Veg = 0,

    [Display(Name = "NonVeg")]
    NonVeg = 1,

    [Display(Name = "Breakfast")]
    Breakfast = 2,

    [Display(Name = "Lunch")]
    Lunch = 3,

    [Display(Name = "Dinner")]
    Dinner = 4
}


public class CheckboxModel
{
    public bool IsChecked { get; set; }
    public CollectionCategory CollectionCategory { get; set; }

    public string Label { get; set; }
}


public class CreatePostViewModel
{
    public List<CheckboxModel> Checks { get; set; } = new();
}

控制器：

public IActionResult Check()
{
    var viewmodel = new CreatePostViewModel();
    foreach (var name in Enum.GetNames(typeof(CollectionCategory)))
    {
        var checkboxmodel = new CheckboxModel()
        {
            CollectionCategory = ( CollectionCategory)Enum.Parse(typeof(CollectionCategory), name,true),
            IsChecked = false,
            Label = name,

        };
        viewmodel.Checks.Add(checkboxmodel);
    }

    return View(viewmodel);
}
[HttpPost]
public IActionResult Check(CreatePostViewModel viewmodel)
{
    //...........
    return View(viewmodel);
}

查看：

@model CreatePostViewModel

<form method="post">

    @for (int i = 0; i < Model.Checks.Count; i++)
    {
        <div class="col-md-12 mb-3">
            <input type="checkbox" asp-for="@Model.Checks[i].IsChecked"   >
            <label asp-for="@Model.Checks[i].Label">@Model.Checks[i].Label </label>
            <input type="text" asp-for="@Model.Checks[i].CollectionCategory" hidden />
            <input type="text" asp-for="@Model.Checks[i].Label" hidden />
        </div>
     }
    
    <input type="submit" value="submit"/>
</form>

结果：