Question

我正在创建页面以创建模型并将其保存到DBS。模型包含一些简单的属性，以及从复选框的动态数组中选择的属性列表。因此，我的想法是从数据库中加载道具列表（有效）为每个属性显示复选框（也适用），等待用户填写所有简单表单并检查他想要的所有道具，然后通过POST将其发送到数据库。

我只是无法弄清楚如何将所有选中的道具添加到模型列表中。我将竭尽所能。

型号：

    public class MyModel
    {
        public Guid Id { get; set; }
        public string SimpleProp1 { get; set; }
        public string SimpleProp2 { get; set; }
        public IEnumerable<Guid> Extras { get; set; }
    }

    public class Extra
    {
        public Guid Id { get; set; }
        public string Name { get; set; }
    }

后端add.cshtml.cs中的代码

   [Authorize]
    public class AddModel : PageModel
    {
        private readonly DatabaseHelper databasehelper;
        [BindProperty]
        public List<Extra> ExtrasList { get; set; }

        public AddModel(ApplicationDbContext context)
        {
            databasehelper = new DatabaseHelper(context);
        }

        public IActionResult OnGet()
        {            
            ExtrasList = StaticLists.Extras;
            return Page();
        }

        
        [BindProperty]
        public MyModel Model { get; set; }
        public IActionResult OnPostAsync()
        {
            if (!ModelState.IsValid)
            {
                return Page();
            }

            var result = database.AddToDbs(Model);

            return RedirectToPage("./Overview/"+ result.ResponseGuid.ToString());
        }
    }

和前端


@page
@model Pages.AddModel

@{
    ViewData["Title"] = "Add";
}

<hr />
<div class="row">
    <div class="col-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <br />
            <input type="text" asp-for="Model.SimpleProp1" />
            <br />
            <input type="text" asp-for="Model.SimpleProp2" />
            <br />
            <div>
                @foreach (var cb in Model.ExtrasList) {
                    <input name="ExtrasList" type="checkbox" value="@cb.Id" /> @cb.Name<br />
                }

                <br />
            </div>
             <!-- somewhere here I need to bind checkbox state to model -->
        </form>
        <form method="post">
                <button>Submit</button>
        </form>
    </div>
</div>

<div>
    <a asp-page="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

我知道，这段代码不是超级有效的，并且不是实现此目的的最佳方法。我只是在学习FE和整个剃刀页面概念。

Answer 1

根据您的剃刀页面代码，我发现您在页面中使用了多个表单标签。

您应该删除<button>Submit</button>之外的表单标签，并将复选框的名称修改为Model.Extras，这样才能正常工作。

更多详细信息，您可以参考以下查看代码：

<div class="row">
    <div class="col-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <br />
            <input type="text" asp-for="Model.SimpleProp1" />
            <br />
            <input type="text" asp-for="Model.SimpleProp2" />
            <br />
            <div>
                @foreach (var cb in Model.ExtrasList)
                {
                    <input name="Model.Extras" type="checkbox" value="@cb.Id" /> @cb.Name<br />
                }

                <br />
            </div>
            <!-- somewhere here I need to bind checkbox state to model -->

            <button>Submit</button>
            </d>
        </form>
    </div>
</div>

结果：

剃刀页面核心：将动态复选框列表绑定到模型

1 个答案: