Question

我对如何实现我的想法感到困惑。我希望有人可以说明我将要做的事情。我有类别，主要和子类别。主要类别有多个子类别。我认为我的数据拉动不是问题，显示数据是我的问题。我的数据如下：

Foo（小学）
- Foo1（Sub）
- Foo2（Sub）
Faa
- FAA1
- FAA2
- Faa3
费
- FEE1
- 费用2
- 费用3
FUU

等等。

我的预期结果将类似于this

到目前为止，我的代码是

<div class="col-xs-4">
    @{
        foreach (var item in Model)
        {
            var isPrimary = item.IsPrimary ? "" : "col-xs-offset-1";
            var isHeader = item.IsPrimary ? "bolder" : "";
            <div class="checkbox checkbox-info @isPrimary">
                <input type="checkbox" id="@item.Key">
                <label for="@item.Key">
                    <span style="font-weight: @isHeader">@item.Name</span>
                </label>
            </div>
        }
    }
</div>

在我的Model中，如果项目是主要的，则会有一个布尔值IsPrimary的标记。我在<div class="col-xs-4">部分中对如何为每个具有相应子类别的主要循环感到困惑。

感谢您的帮助。

更新： 它现在使用以下代码进行相应显示：

<form role="form">
    @for (var i = 0; i < Model.Count(); i++)
    {
        <div class="col-xs-4">
            <div class="checkbox checkbox-info">
                @Html.CheckBoxFor(m => m[i].IsSelected, new {id = Model[i].Key})
                <label for="@Model[i].Key"><b>@Model[i].Name</b></label>
            </div>
            @for (var g = 0; g < Model[i].SubsCategories.Count(); g++)
            {
                <div class="checkbox checkbox-info col-xs-offset-1">
                    @Html.CheckBoxFor(m => m[i].SubsCategories[g].IsSelected, new {id = Model[i].SubsCategories[g].Key})
                    <label for="@Model[i].SubsCategories[g].Key">@Model[i].SubsCategories[g].Name</label>
                </div>
            }
        </div>
    }
</form>

注意：由于CheckBoxFor的自动生成隐藏输入字段，您也会遇到使用awesome-bootstrap-checkbox复选框无效的问题。只需更改css中的tilde ~即可。从checked + label:after到checked ~ label:after

Answer 1

首先，您可能希望在一些易于使用的结构中组织模型。例如：

public class Category
{
    public string Name {get; set;}
    public bool IsSelected {get; set;}
}

public class PrimaryCategory : Category
{        
    public IList<Category> SubCategories {get; set;}
}

然后在你看来：

@model IList<PrimaryCategory>

@for(var i = 0; i < Model.Count(); i++)
{
   @Html.LabelFor(m=>m[i].IsSelected, Model[i].Name) 
   @Html.CheckBoxFor(m=>m[i].IsSelected , new{@class="checkbox checkbox-info"}) 
   @for(var j = 0; j < Model[i].SubCategories.Count(); j++)
   {
      @Html.LabelFor(m=>m[i].SubCategories[j].IsSelected, Model[i].SubCategories[j].Name) 
      @Html.CheckBoxFor(m=>m[i].SubCategories[j].IsSelected, new{@class="checkbox checkbox-info col-xs-offset-1"}) 
   }
}

使用MVC中的Jquery检查/取消选中父/子复选框

1 个答案: