剃刀视图中的嵌套循环取消组合我的radiobuttons

时间:2018-04-01 11:01:21

标签: c# razor asp.net-core-mvc entity-framework-core model-binding

我在正确渲染表单方面遇到了一些困难。在我看来,一个产品有几个Properties,每个属性都有几个Options可供选择,如果允许多个选项则使用复选框,如果不允许,则使用单选按钮。

这个剃刀代码:

@for (int i = 0; i < Model.Type.Properties.Count(); i++)
{
    <div class="col-lg-3 col-md-4 col-sm-6">
        <strong>@Model.Type.Properties[i].Label</strong><br />
        @if (Model.Type.Properties[i].AllowMultipleSelections)
        { // Multiple selections are allowed - we need checkboxes:
            @for (var j = 0; j < Model.Type.Properties[i].Options.Count(); j++)
            {
                @Html.HiddenFor(m => m.Type.Properties[i].Id)
                @Html.CheckBoxFor(m => m.Type.Properties[i].Options[j].Selected)
                @Html.LabelFor(m => m.Type.Properties[i].Options[j].Selected,
                    Model.Type.Properties[i].Options[j].StringValue)
                <br />
            }
        }
        else
        { // Multiple selections are NOT allowed - we need radio buttons:
            @for (var j = 0; j < Model.Type.Properties[i].Options.Count(); j++)
            {
                @Html.HiddenFor(m => m.Type.Properties[i].Id)
                @Html.RadioButtonFor(m => m.Type.Properties[i].Options[j].SelectedId,
                    Model.Type.Properties[i].Options[j].Id)
                @Html.LabelFor(m => m.Type.Properties[i].Options[j].Selected,
                    Model.Type.Properties[i].Options[j].StringValue)
                <br />
            }
        }
    </div>
}

...将呈现此HTML:

<div class="col-lg-3 col-md-4 col-sm-6">
    <strong>Size</strong>
    <br />
    <input id="Type_Properties_0__Id" 
            name="Type.Properties[0].Id" type="hidden" value="1" />
    <input id="Type_Properties_0__Options_0__SelectedId" 
            name="Type.Properties[0].Options[0].SelectedId" type="radio" value="1" />
    <label for="Type_Properties_0__Options_0__Selected">20-24</label>
    <br />
    <input id="Type_Properties_0__Id" 
            name="Type.Properties[0].Id" type="hidden" value="1" />
    <input id="Type_Properties_0__Options_1__SelectedId" 
            name="Type.Properties[0].Options[1].SelectedId" type="radio" value="2" />
    <label for="Type_Properties_0__Options_1__Selected">25-29</label>
    <br />
    <input id="Type_Properties_0__Id" 
            name="Type.Properties[0].Id" type="hidden" value="1" />
    <input id="Type_Properties_0__Options_2__SelectedId" 
            name="Type.Properties[0].Options[2].SelectedId" type="radio" value="3" />
    <label for="Type_Properties_0__Options_2__Selected">30-34</label>
    <br />
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
    <strong>Suitable for</strong>
    <br />
    <input id="Type_Properties_3__Id" 
            name="Type.Properties[3].Id" type="hidden" value="1002" />
    <input id="Type_Properties_3__Options_0__Selected" 
            name="Type.Properties[3].Options[0].Selected" type="checkbox" value="true" />
    <label for="Type_Properties_3__Options_0__Selected">Women</label>
    <br />
    <input id="Type_Properties_3__Id" 
            name="Type.Properties[3].Id" type="hidden" value="1002" />
    <input id="Type_Properties_3__Options_1__Selected" 
            name="Type.Properties[3].Options[1].Selected" type="checkbox" value="true" />
    <label for="Type_Properties_3__Options_1__Selected">Men</label>
    <br />
</div>

问题在于,无线电按钮的idname将获得唯一值(id="Type_Properties_{i}__Options_{j}__SelectedId" name="Type.Properties[{i}].Options[{j}].SelectedId"),从而“取消组合”它们。当然,这意味着当我只想选择一个时,我能够选择组中的所有单选按钮。我该如何解决这个问题?

更新

我的模特:

public class ViewModelProductType
{
    public int Id { get; set; }
    public string Title { get; set; }
    public int SortOrder { get; set; }
    public IList<ViewModelProductProperty> Properties { get; set; }
    public ICollection<ViewModelProduct> Products { get; set; }
}

public class ViewModelProduct
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Info { get; set; }
    public string LongInfo { get; set; }
    public decimal Price { get; set; }
    public int Weight { get; set; }
    public ViewModelProductType Type { get; set; }

    public List<ViewModelPropertyForProduct> PropertiesForProduct { get; set; }
}

public class ViewModelPropertyForProduct
{
    public int Id { get; set; }
    public int ProductId { get; set; }
    public int ProductPropertyId { get; set; }

    public ViewModelProduct Product { get; set; }
    public ViewModelProductProperty Property { get; set; }
    public List<ViewModelPropertyOptionForProduct> SelectedPropertyOptions { get; set; }
}

public class ViewModelPropertyOptionForProduct
{
    public int Id { get; set; }
    public int ProductId { get; set; }
    public int ProductPropertyId { get; set; }
    public int ProductPropertyOptionId { get; set; }

    public ViewModelProduct Product { get; set; }
    public ViewModelProductPropertyOption PropertyOption { get; set; }
}

public class ViewModelProductPropertyOption
{
    public int Id { get; set; }
    public int ProductPropertyId { get; set; }
    public int SortOrder { get; set; }
    public bool Selected { get; set; } // Is this the selected option for that property? For checkbox
    public int SelectedId { get; set; } // The Id of the selected option for that property. For radiobutton

    public string StringValue { get; set; } // (Option - a string ("Green"))
    public ViewModelProductProperty Property { get; set; }
    public ICollection<ViewModelPropertyOptionForProduct> SelectedOptionsForProperties { get; set; }
}

public class ViewModelProductProperty
{
    public int Id { get; set; }
    public string Label { get; set; } // ("Color")
    public string Description { get; set; }
    public string Unit { get; set; }
    public bool AllowMultipleSelections { get; set; }
    public int SortOrder { get; set; }
    public bool AssignedToProductType { get; set; }

    public List<ViewModelProductPropertyOption> Options { get; set; }//("Red")
}

0 个答案:

没有答案