I'm having a problem when generating groups of radio buttons dynamically. The radio buttons represent the 3 mutually exclusive outcomes of a sporting fixture. Each grouping of 3 is then meant to represent a different fixture. However when I generate them they are all behaving as one giant group.
I'm using the following partial view to generate the radio buttons:
@model Competition.Models.MatchModel
@Html.RadioButtonFor(p => p.Result, Result.Team1Win, new { id = Model.MatchID })
@Html.LabelFor(p => p.Result, Model.Team1.Name)
@Html.RadioButtonFor(p => p.Result, Result.Draw, new { id = Model.MatchID })
@Html.LabelFor(p => p.Result, "Draw")
@Html.RadioButtonFor(p => p.Result, Result.Team2Win, new { id = Model.MatchID })
@Html.LabelFor(p => p.Result, Model.Team2.Name)
These partial views are then embedded within a parent view as follows:
<div>
@Html.Partial("Match", Model.Groups[0].groupMatch1)
</div>
<div>
@Html.Partial("Match", Model.Groups[0].groupMatch2)
</div>
The model for the partial views looks like this:
public class MatchModel
{
public int MatchID { get; set; }
public Country Team1 { get; set; }
public Country Team2 { get; set; }
public Result Result { get; set; }
}
And finally Result is an enum representing the 3 possible outcomes:
public enum Result
{
Team1Win,
Draw,
Team2Win
}
The problem I'm having is that this produces multiple sets of radio buttons however, they're all classified as one giant group, i.e. I can only select one option out o all of them. I want to be able to make one selection per group.
The html generated is as follows:
<div>
<input checked="checked" data-val="true" data-val-required="The Result field is required." id="1" name="Result" type="radio" value="Team1Win" />
<label for="Result">USA</label>
<input id="1" name="Result" type="radio" value="Draw" />
<label for="Result">Draw</label>
<input id="1" name="Result" type="radio" value="Team2Win" />
<label for="Result">Brazil</label>
</div>
<div>
<input checked="checked" data-val="true" data-val-required="The Result field is required." id="2" name="Result" type="radio" value="Team1Win" />
<label for="Result">China</label>
<input id="2" name="Result" type="radio" value="Draw" />
<label for="Result">Draw</label>
<input id="2" name="Result" type="radio" value="Team2Win" />
<label for="Result">Germany</label>
</div>
I think the issue is that the Name attribute is identical for all of the radio buttons but I'm not sure how to have this be something different for each group.
