时间戳

首页 > 解决方案 > 为什么我的复选框不返回文本属性

c# - 为什么我的复选框不返回文本属性

问题描述

所以我有这个表格，里面有这个

<div class="form-group">
    @*<div class="form-check form-check-box">


    @for (int i = 0; i < Model.Features.Count; i++)
    {
        <div class="form-check form-check-box">
            <input class="form-check-input" type="checkbox" asp-for="@Model.Features[i].Selected" value="@Model.Features[i].Text">
            <label class="form-check-label" asp-for="@Model.Features[i].Text">@Model.Features[i].Text</label>
        </div>
    }
</div>

当我发布表单并检查它的属性时，SelectedListItem它看起来像这样

在此处输入图像描述

即使Selected应该是True因为我检查了它。表单中的其他所有内容都可以正常发布，例如文本输入很好地绑定到我的 ProductModel 中的字符串 Text 属性，我相信问题出在我使用复选框元素属性的方式上。

所以我可以看到复选框，我可以检查它们等，但是当我发布表单时，与复选框相关的任何内容都不适用于 ProductModel

public class ProductModel
{
    public string Title { get; set; }
    public IList<SelectListItem> Features { get; set; }
}

这就是我为视图设置模型的方式

public IActionResult PostAd()
{
    var model = new ProductModel
    {
        Features = new List<SelectListItem>()
        {
            new SelectListItem { Text = "Camera", Value = "Camera" },
            new SelectListItem { Text = "Touch Screen", Value = "Touch Screen" }
        }
    };

    return View(model);
}

如何正确使用复选框，以便在发布表单时将数据传递给模型？这是发布时触发的操作

[HttpPost]
public IActionResult CreateAd(ProductModel Product)
{
    return View("Index");
}

标签： c#asp.net.netasp.net-mvcasp.net-core

解决方案

您遇到的问题是，当表单发布时，ASP.NET 会将发布的数据绑定到您的模型，但只发布表单中的输入值。你SelectListItem有 nullText和Value属性的原因是因为这些值没有发布在表单中。表单需要包含一个输入（例如隐藏输入）@Model.Features[i].Text和另一个用于@Model.Features[i].Value将它们绑定回SelectListItem模型绑定期间的输入，因为正是输入将name其绑定到模型属性。但请记住，即使是从隐藏的输入中接收这些，用户也可以将它们更改为他们想要的任何值，因此您需要在服务器端验证它们是 1) 有效值和 2) 允许选择。

鉴于这一事实，我发现简单地重新加载可用选项列表更有意义，在您的情况下Features，在您的HttpPost操作中，然后使用用户提交的选择更新重建的列表。

现在剩下的唯一问题是你甚至没有Selected设置为 true。这又是一次，因为它基于输入的（复选框）value。asp-for="@Model.Features[i].Selected"将为复选框提供name它需要绑定回该属性的复选框，并将其value属性绑定到Selected. 但是，您随后还定义了自己的value属性，value="@Model.Features[i].Text"该属性将覆盖由asp-for助手生成的属性。因此，当您提交表单时，模型绑定器会尝试绑定到无法完成"Camera"的布尔属性，因此它只是获取它的默认值。通常，a用于下拉菜单 (SelectedfalseSelectListItem<select>） 输入。没有理由不能将它用于此目的，但您也可以将自己的模型类型用于复选框。

推荐阅读