Unable to pass RadioButton group selected value to Controller

Question

I have a ViewModel defined as:

    public class Fixtures
    {
        public int Id { get; set; }
        public string HomeTeam { get; set; }
        public string AwayTeam { get; set; }
        public string HomeTeamCode { get; set; }
        public string AwayTeamCode { get; set; }
        public string League { get; set; }
        public bool Home { get; set; }
        public bool Draw { get; set; }
        public bool Away { get; set; }
        public string FixturePrediction { get; set; }
    }

My view displays a list of these fixtures and for each fixture, I have a radio button grouping. I need some way of passing the selected radio button for each fixture to my Post method. My View and controller are as below:

View:

<div class="container">
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        for (int i = 0; i < Model.Count(); i++)
        {
            @Html.HiddenFor(model => model[i].Id)

            <div class="col-sm-6">
                <div class="panel panel-primary panel-fixture">
                    <div class="panel-heading text-center fixturetitle">
                        @Html.DisplayFor(model => model[i].HomeTeam) v @Html.DisplayFor(model => model[i].AwayTeam)
                        @Html.HiddenFor(model => model[i].HomeTeam)
                        @Html.HiddenFor(model => model[i].AwayTeam)
                    </div>
                    <div class="panel-body">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-xs-4 text-center">
                                    <img src="~/Content/Images/@string.Concat(Model[i].HomeTeamCode, ".png")" class="fixturecrest" />
                                    <div class="text-center">
                                        @Html.DisplayFor(model => model[i].HomeTeamCode)
                                        @Html.HiddenFor(model => model[i].HomeTeamCode)
                                    </div>
                                </div>
                                <div class="col-xs-4 text-center">
                                    <label class="text-center">
                                        V <br />
                                    </label>
                                </div>
                                <div class="col-xs-4 text-center">
                                    <img src="~/Content/Images/@string.Concat(Model[i].AwayTeamCode, ".png")" class="fixturecrest" />
                                    <div class="text-center">
                                        @Html.DisplayFor(model => model[i].AwayTeamCode)
                                        @Html.HiddenFor(model => model[i].AwayTeamCode)
                                    </div>
                                </div>
                            </div>
                            <hr />
                            <div class="row">
                                <div class="text-center" role="group" aria-label="Fixture Prediction">
                                    <div class="col-xs-4 text-center">
                                        <button type="button" class="btn btn-xs btn-default">
                                            HOME
                                            @Html.RadioButtonFor(model => model[i].FixturePrediction, Model[i].Home, new { @Name = Model[i].Id })
                                            @Html.HiddenFor(model => model[i].FixturePrediction)
                                            <span class="glyphicon glyphicon-check"></span>
                                        </button>
                                    </div>
                                    <div class="col-xs-4 text-center">
                                        <button type="button" class="btn btn-xs btn-default">
                                            DRAW
                                            @Html.RadioButtonFor(model => model[i].FixturePrediction, Model[i].Draw, new { @Name = Model[i].Id })
                                            @Html.HiddenFor(model => model[i].FixturePrediction)
                                            <span class="glyphicon glyphicon-check"></span>
                                        </button>
                                    </div>
                                    <div class="col-xs-4 text-center">
                                        <button type="button" class="btn btn-xs btn-default">
                                            AWAY
                                            @Html.RadioButtonFor(model => model[i].FixturePrediction, Model[i].Away, new { @Name = Model[i].Id })
                                            @Html.HiddenFor(model => model[i].FixturePrediction)
                                            <span class="glyphicon glyphicon-check"></span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        }
        <input type="submit" value="Confirm Predictions" class="btn btn-success" />
    }
</div>

Post Method in Controller:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Test(IEnumerable<Fixtures> test)
{
    if (ModelState.IsValid)
    {

    }

    return RedirectToAction("Test");
}

My field FixturePrediction is always null and I have attempted several variations of the 'radiobuttonfor' shown above.

All I need is to assign a value to FixturePrediction based on which radiobutton is selected. What am I missing?

Thanks in advance.

Answer 1

I think what you are trying to do is this, I am not sure why you are doing it the way you are doing it, but this is how you would implement Html.RadioButtonFor, it takes the model prop, and the value, you can add as many buttons as you want, and the selected radio value will be passed as the value for your model prop

@Html.RadioButtonFor(model => model[i].FixturePrediction, "Home")
 @Html.RadioButtonFor(model => model[i].FixturePrediction, "Draw")
 @Html.RadioButtonFor(model => model[i].FixturePrediction, "Away")

Another example