我在正确渲染表单方面遇到了一些困难。在我看来,一个产品有几个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>
问题在于,无线电按钮的id
和name
将获得唯一值(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")
}