Question

我的问题是：如何在剃须刀页面和LINQ查询（在后端）中构建html标记，以在EDIT和CREATE视图中显示所有子类别的复选框列表。

允许我创建具有多个子类别的产品，并可以随时在EDIT视图中对其进行更新。

使用.Net EF Core 2.2，Razor Pages。

主类（产品）：

public class Product
{
    public int Id { get; set; }

    public string Name { get; set; }

    public string Description { get; set; }

    public Category Category { get; set; }

    public List<ProductSubcategory> SubCategories { get; set; }

}

产品与子类别有多对多关系：

public class SubCategory
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<ProductSubcategory> SubCategories { get; set; }
}

所以联接表（实体）是ProductSubcategory：

 public class ProductSubcategory
{
    public int ProductId { get; set; }
    public Product Product { get; set; }

    public int SubCategoryId { get; set; }
    public SubCategory SubCategory { get; set; }
}

编辑（和创建）产品视图：

 <h2>Editar: @Model.Product.Name</h2>


<form method="post">
    <input type="hidden" asp-for="Product.Id" />
    <div class="form-group">
        <label asp-for="Product.Name"></label>
        <input asp-for="Product.Name" class="form-control" />
        <span class="text-danger" asp-validation-for="Product.Name"></span>
    </div>
    <div class="form-group">
        <label asp-for="Product.Description"></label>
        <textarea asp-for="Product.Description" class="form-control"></textarea>


        <span class="text-danger" asp-validation-for="Product.Description"></span>
    </div>
    <div class="form-group">
        <label asp-for="Product.Category"></label>
        <select class="form-control" asp-for="Product.Category" asp-items="Model.Categories"></select>
        <span class="text-danger" asp-validation-for="Product.Category"></span>
    </div>
    <div class="form-group">

        //Code to allow the subcategory selection.
        //preferable as checkboxes 

        //() subcat1    (x)subcat2    ()subcat3
        //() subcat4    ()subcat5    (x)subcat6

    </div>
    <button type="submit" class="btn btn-primary">Salvar</button>
</form>

Edit.cshtml.cs PageModel

public class EditModel : PageModel
{
    private readonly IProductData _ProductData;
    private readonly IHtmlHelper _HtmlHelper;
    [BindProperty]
    public Product Product { get; set; }
    public IEnumerable<SelectListItem> Categories { get; set; }
    public string MessageCreate { get; set; }


    public EditModel(IProductData _productData, IHtmlHelper _htmlHelper)
    {
        _ProductData = _productData;
        _HtmlHelper = _htmlHelper;
    }


    public IActionResult OnGet(int? productId)
    {
        Categories = _HtmlHelper.GetEnumSelectList<Category>();

        if (productId.HasValue)
        {
            Product = _ProductData.GetById(productId.Value);

        }
        else
        {
            MessageCreate = "Criar novo Produto";
            Product = new Product();
        }

        if (Product == null)
        {
            return RedirectToPage("./NotFound");
        }
        return Page();
    }

    public IActionResult OnPost()
    {
        if (!ModelState.IsValid)
        {
            Categories = _HtmlHelper.GetEnumSelectList<Category>();
            return Page();
        }

        if (Product.Id > 0)
        {
            _ProductData.Update(Product);
        }
        else
        {
            _ProductData.Create(Product);
        }

        _ProductData.Commit();

        TempData["Message"] = "Produto salvo!!!";

        //PRG POST-REDIRECT-GET
        return RedirectToPage("./Detail", new { productId = Product.Id });
    }

}

Answer 1

该复选框用于表示布尔属性。我看到您没有bool属性，因此我想您需要在SubCategories类中添加一个布尔属性，如：

public bool IsChecked { get; set; } // added this property

然后，您需要在PageModel中添加一个属性（“编辑”或“创建”）以表示数据，并确保将发布的值绑定到该数据：

[BindProperty]
public List<Subcategory> SubCategories { get; set; } = new List<Subcategory>();

最后，您所需要做的就是获取模型绑定程序，以将每个复选框与特定的子类别相关联。以下代码在.cshtml文件中显示了我的示例：

@for (var i = 0; i < Model.SubCategories.Count(); i++)
 {
    <input asp-for="SubCategories[i].IsChecked" />
 }

在多对多EF Core实体的剃刀页面中构建复选框列表

1 个答案: