Confusion about binding a radio button to a model in MVC

Question

I'm new to MVC. I'm trying to build a small website for people to pick winners in NFL games. I am confused on how to translate what a user picks in the view to the data in my database. I am using MVC 5 and Entity Framework 6.

I want the view to list each game, displaying the home team and the away team. Next to each team there is a radio button. The user selects the radio button next to each selection, and then clicks a Submit button. For each game, I want to read which of the two radio buttons has been selected, and then write the name of the related team to a database table for Picks. The database is already built and I can't change it.

So I have a model for Picks (id, week_number, game1, game2, etc). I have a model for Schedule, which is all of the NFL games this season (id, week_number, game_number, home, away). I have the basic controller from scaffolding it out, and I am trying to create a ViewModel to combine the two models for my what my view needs.

What I do not know how to do is add a radio button so that it is tied to the team name it is next to, so that when I submit it will be determined if that button is checked, and if so, to write that team name to the database. Am I supposed to make 32 boolean properties for each radio button and then if it is checked look up the team name in a list of all the games? It seems like this should be much easier, but I am stumped with the whole MVC structure.

Also, is this supposed to happen in the controller, and not the view model? How do I access which radio button is selected?

UPDATE

I followed the suggestions here as best I could, and I am closer. But the problem now is that all of the radio buttons on the page are in one radio button group - that is, only one button can be selected. I want to have each row in the table be a group, so that ultimately there will be 16 buttons selected. Here are the models and view I am using:

public class GameViewModel
{
    public string AwayTeam { get; set; }
    public string HomeTeam { get; set; }
    public string SelectedTeam { get; set; }

    public GameViewModel()
    {
        AwayTeam = string.Empty;
        HomeTeam = string.Empty;
        SelectedTeam = string.Empty;
    }

    public GameViewModel(string away, string home)
    {
        AwayTeam = away;
        HomeTeam = home;
        SelectedTeam = string.Empty;
    }
}


public class WeeklyPicksViewModel
{
    private NFLEntities db = new NFLEntities();

    public int MNFscore { get; set; }
    public List<GameViewModel> WeeklySchedule { get; set; }
    public int WeekNumber { get; set; }

    public WeeklyPicksViewModel(List<schedule> weeklySchedule, int userid)
    {
        List<GameViewModel> week = new List<GameViewModel>();
        foreach (var game in weeklySchedule)
        {
            GameViewModel g = new GameViewModel(game.away, game.home);
            week.Add(g);
        }
        WeeklySchedule = week;
    }
}


@model FootballPickEm.ViewModels.WeeklyPicksViewModel

<h2>Picks Page</h2>
<hr />

<div>
    <table>
        @foreach (var game in Model.WeeklySchedule) {
            <tr>
                <td>
                    @Html.RadioButtonFor(m => game.SelectedTeam, game.AwayTeam)
                </td>
                <td>
                    <img src="~/images/@(game.AwayTeam.ToLower()).gif" />
                </td>
                <td>
                    @Html.DisplayFor(m => game.AwayTeam)
                </td>
                <td>
                    AT
                </td>
                <td>
                    @Html.RadioButtonFor(m => game.SelectedTeam, game.HomeTeam)
                </td>
                <td>
                    <img src="~/images/@(game.HomeTeam.ToLower()).gif" />
                </td>
                <td>
                    @Html.DisplayFor(m => game.HomeTeam)
                </td>
            </tr>
        }
    </table>
</div>

Answer 1

Good news. You don't need to create 32 bools. You can just create one string (or enum or whatever else) that represents the team. If you call the property team, you can generate radio buttons like this.

<label><input type="radio" name="team" value="piggers">The Piggers</label>
<label><input type="radio" name="team" value="dogcatchers">The Dogcatchers</label>

Then when you submit the form, your team property will contain a value like "piggers".