Razor 页面和复选框答案

【问题标题】：Razor Pages and CheckboxesRazor 页面和复选框
【发布时间】：2021-06-14 02:56:19
【问题描述】：

我正在学习 ASP.Net Core Razor Pages，并且正在通过 Microsoft 网站完成各种与 CRUD 相关的练习。

我正在尝试通过添加新功能来扩展这些练习，并希望获得有关绑定/保存/读取复选框的一些指导。

作为示例，我有一个基本的人员详细信息表单，以及捕获他们的详细信息，我想显示一个复选框列表，其中包含用户可以选择的兴趣（即钓鱼、骑自行车、足球等）。

public class Person
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Address{ get; set; }

    public virtual ICollection<Interest> Interests { get; set; }
}

public class Interest
{
    public int Id { get; set; }
    public string Name { get; set; }
}

我可以使用 Razor 语法解决如何遍历我的兴趣模型以从数据库中提取值并在页面上使用适当的 Id 和文本（名称）创建复选框，但我不确定最好的方法是什么如果用户想要编辑原始选择并重新保存，则将其保存到数据库并读回此信息并重新填充正确的复选框。

如果有人能指出正确的方向，我将不胜感激。

谢谢

【问题讨论】：

如果 Interests 是一个“信息”表（我的意思是你有预定义的数据并且想要，例如将 Person X 分配给 Interest.Id=1 等）：你需要改变你的模型和创建一个 PersonInterest 表，您将在其中将 Person X 与 Interest Y 相关联。之后您可以按照@FeiHan 的回答

标签： c# asp.net-core razor-pages

【解决方案1】：

就 HTML 而言，复选框有 2 种状态。选中和未选中。

这将转换为关系数据库bit 数据类型。它可以表示 1 表示已选中，0 表示未选中，NULL 表示不确定。

不确定状态（用户既没有选中也没有取消选中该框）不能由 HTML 本身表示。因此，我建议使用默认值 0（未选中）创建记录，并且如果位列旨在表示 HTML 中的复选框状态，则不允许 NULL。

【讨论】：

【解决方案2】：

如果用户想要编辑原始选择并重新保存，我不确定将其保存到数据库并读回此信息并重新填充正确的复选框的最佳方法。

您可以参考以下示例，在您的页面模型类中使用另一个属性（例如 SelectedInterestsId）来保存所选的兴趣 ID，如下所示。

在页面中

<form method="post">
    <dl class="row">
        <dt class="col-sm-2">
            Id
        </dt>
        <dd class="col-sm-10">
            <input asp-for="PersonAndInterests.Id" />
        </dd>
        <dt class="col-sm-2">
            Name
        </dt>
        <dd class="col-sm-10">
            <input asp-for="PersonAndInterests.Name" />
        </dd>
        <dt class="col-sm-2">
            Address
        </dt>
        <dd class="col-sm-10">
            <input asp-for="PersonAndInterests.Address" />
        </dd>
        <dt class="col-sm-2">
            Interests
        </dt>
        <dd class="col-sm-10">
            @foreach (var item in Model.PersonAndInterests.Interests)
            {
                <input type="checkbox" name="SelectedInterestsId" value="@item.Id" /> @item.Name<br />
            }
        </dd>
    </dl>
    <input type="submit" value="Edit" />
</form>

在页面模型类中

[BindProperty]
public Person PersonAndInterests { get; set; }

[BindProperty]
public List<int> SelectedInterestsId { get; set; }

public void OnGet()
{
    //code logic here
    //...
}

public IActionResult OnPost()
{

    var person_and_interests = this.PersonAndInterests;

    var interests_Id = this.SelectedInterestsId;

    //code logic here
    //...

    //can query interests from db based on SelectedInterestsId
    //then update PersonAndInterests.Interests based on above retrieved interests

    //...


    return Page();
}

测试结果

【讨论】：