我正在使用ViewComponent渲染递归树结构，并且正在努力在表单中使用Html.HiddenFor和Html.CheckBoxFor。
这是视图模型：
public class ViewModelProductCategory
{
public int Id { get; set; }
public int? ParentId { get; set; }
public string Title { get; set; }
public int SortOrder { get; set; }
public bool Checked { get; set; }
public ViewModelProductCategory ParentCategory { get; set; }
public IEnumerable<ViewModelProductCategory> Children { get; set; }
public IEnumerable<ViewModelProduct> Products { get; set; }
}
视图组件是从主视图页面调用的，如下所示：
@await Component.InvokeAsync("SelectCategories",
new
{
parentId = 0,
productId = Model.Id // This is the current product Id from the main View
})
。这是 ViewComponent 的 Invoke-method：
public async Task<IViewComponentResult> InvokeAsync(int? parentId, int productId)
{
List<ViewModelProductCategory> VM = new List<ViewModelProductCategory>();
if (parentId == 0)
{
VM = _mapper.Map<List<ViewModelProductCategory>>
(await _context.ProductCategories.Include(c => c.Children)
.Where(x => x.ParentId == null).OrderBy(o => o.SortOrder).ToListAsync());
}
else
{
VM = _mapper.Map<List<ViewModelProductCategory>>
(await _context.ProductCategories.Include(c => c.Children)
.Where(x => x.ParentId == parentId).OrderBy(o => o.SortOrder).ToListAsync());
}
foreach (var item in VM)
{
// The Checked-value is not stored in the database, but is set here based
// on the occurances of ProductId in the navigation property Products.Id
// I'm not entirely confident that this statement checks the correct checkboxes...
item.Checked = item.Products.Any(c => c.Id == productId);
}
ViewData["productId"] = productId;
return View(VM);
}
这是视图组件的Default.cshtml：
@model List<MyStore.Models.ViewModels.ViewModelProductCategory>
<ul style="list-style:none;padding-left:0px;">
@if (Model != null)
{
int ProductId = (ViewData["productId"] != null)
? int.Parse(ViewData["productId"].ToString())
: 0;
@for (int i = 0; i < Model.Count(); i++)
{
<li style="margin-top:4px;padding:0px;">
@if (Model[i].Children.Count() == 0)// Prevent products from being placed in a category with child categories
// by not rendering a checkbox next to it
{
@Html.HiddenFor(model => Model[i].Id)
@Html.CheckBoxFor(model => Model[i].Checked)
}
@Html.LabelFor(model => Model[i].Id, Model[i].Title)
<ul>
@*Let's recurse!*@
@await Component.InvokeAsync("SelectCategories",
new
{
parentId = Model[i].Id,
productId = ProductId
})
</ul>
</li>
}
}
</ul>
输出此 HTML(这是它的一部分)：
<input id="z0__Id" name="[0].Id" type="hidden" value="1003" />
<input checked="checked" id="z0__Checked" name="[0].Checked" type="checkbox" value="true" />
<label for="z0__Id">Up to 20"</label>
<input data-val="true" data-val-required="The Id field is required." id="z1__Id" name="[1].Id" type="hidden" value="1004" />
<input checked="checked" data-val="true" data-val-required="The Checked field is required." id="z1__Checked" name="[1].Checked" type="checkbox" value="true" />
<label for="z1__Id">21" - 40"</label>
<input data-val="true" data-val-required="The Id field is required." id="z2__Id" name="[2].Id" type="hidden" value="1005" />
<input checked="checked" data-val="true" data-val-required="The Checked field is required." id="z2__Checked" name="[2].Checked" type="checkbox" value="true" />
<label for="z2__Id">41" - 55"</label>
<!-- ...and so on ... -->
我在这里(至少)面临两个挑战：
语句
item.Products.Any(c => c.Id == productId);的计算结果应true，如果局部变量productId的值在导航属性中找到Products，这意味着此特定产品链接到该特定类别(通过item.Products)，但现在它正在检查父类别中的所有同级类别。我认为 HTML 输出不正确，至少对于
name属性：<input checked="checked" id="z0__Checked" name="[0].Checked" type="checkbox" value="true" />.它能被命名为[0].Checked吗？
我还没有编写控制器的POST-edit方法，所以我没有把它包括在这个问题中。在其中，我必须从一种模型转换为另一种模型，以及其他一些东西。如果我可以让表单正确呈现，我可以将其绑定到控制器。
是的，我希望呈现的 html 名称可能对模型绑定无效。您应该添加一个父模型以包含此类的列表：
public class ViewModelX
{
public List<ViewModelProductCategory> Categories = new List<ViewModelProductCategory>();
}
然后在您的视图和控制器中使用它：
@model ViewModelX
@Html.HiddenFor(model => model.Categories[i].Id)
@Html.CheckBoxFor(model => model.Categories[i].Checked)
// etc
_mapper.Map<ViewModelX> ...
然后，这将呈现在 html 中：
name="Categories[0].Id"