Multiple Buttons not binding in MVC. Return nulls once form submitted

Question

I am trying to create this MVC form for data capturing. In one of the requirement we need to capture value from multiple Radio buttons. I am able to display multiple radio buttons on view but not able to capture selected value once form is submitted.

Here is the screenshot:

Second Tab

Here is Model

 public class DemoModel
{
    [Required]
    [StringLength(150, ErrorMessage = "Name cannot be longer than 150 characters.")]
    [Display(Name = "Name")]
    public string Name { get; set; }
    [Required]
    [DataType(DataType.EmailAddress)]
    [Display(Name = "Email")]
    public string Email { get; set; }
    public List<LocationDetail> Locations { get; set; }
}


public class LocationDetail
{
    public string LocatioName { get; set; }
    public string LocatioDesc{ get; set; }
    public List<Position> Positions { get; set; }
}

public class Position
{
    public string ID { get; set; }
    public string Type { get; set; }
}

Here is Controller

public ActionResult Contact()
    {
        DemoModel model = new DemoModel();
        model.Name = "Enter your name here";
        model.Email = "Enter your email here";
        model.Locations = GetLocations();

       return View(model);
    }

    List<LocationDetail> GetLocations()
    {
        List<Position> itms = new List<Position>{
                new Position{ID="1", Type="position1"},
                new Position{ID="2", Type="position2"},
                new Position{ID="3", Type="position3"},
                new Position{ID="4", Type="position4"},
                new Position{ID="5", Type="position5"}
        };

        return new List<LocationDetail>
        {
            new LocationDetail() { LocatioName="Location Name goes here",LocatioDesc="Location Desc Goes here",Positions=itms}
        };

    }

    [HttpPost]
    public ActionResult Contact(DemoModel model)
    {
        if (ModelState.IsValid)
        {
            return View("FormSuccess");
        }
        // Just for testing in order to know when it is the serverside validation that has failed
        ModelState.AddModelError("", "Server-side validation failed.");
        // If we got this far something failed, redisplay form
        return View("Contact", model);
    }

Here is View

 @using (Html.BeginForm())
{
    <div id="wizard" class="swMain">
        <ul>
            <li>
                <a href="#step-1">
                    <span class="stepDesc"> Personal Details </span>
                    @*<label class="stepNumber">1</label>
                        <span class="stepDesc">
                            Step 1<br />
                            <small>Step 1 description</small>
                        </span>*@
                </a>
            </li>
            <li>
                <a href="#step-2">
                    <span class="stepDesc"> Location Details </span>
                    @*<label class="stepNumber">2</label>
                        <span class="stepDesc">
                            Step 2<br />
                            <small>Step 2 description</small>
                        </span>*@
                </a>
            </li>
            <li>
                <a href="#step-3">
                    <span class="stepDesc"> Others </span>
                    @*<label class="stepNumber">3</label>
                        <span class="stepDesc">
                            Step 3<br />
                            <small>Step 3 description</small>
                        </span>*@
                </a>
            </li>
                    </ul>
        <div id="step-1">
            <h2 class="StepTitle">Step 1 Content</h2>
            <!-- step content -->
            <table>
                <tr>
                    <td>
                        @Html.LabelFor(model => model.Name)
                    </td>
                    <td>
                        @Html.EditorFor(model => model.Name)
                    </td>
                    <td>
                        @Html.ValidationMessageFor(model => model.Name)
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.LabelFor(model => model.Email)
                    </td>
                    <td>
                        @Html.EditorFor(model => model.Email)
                    </td>
                    <td>
                        @Html.ValidationMessageFor(model => model.Email)
                    </td>
                    <td>
                        <input type="submit" value="Create" />
                        </td>
                </tr>



            </table>
        </div>
        <div id="step-2">
            <h2 class="StepTitle">Step 2 Content</h2>
            <!-- step content -->
            <table>
                <tr>
                    <td>
                        @Html.LabelFor(model => model.Locations[0].LocatioName)
                    </td>
                    <td>
                        @Html.EditorFor(model => model.Locations[0].LocatioName)
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td>
                        @Html.LabelFor(model => model.Locations[0].LocatioDesc)
                    </td>
                    <td>
                        @Html.EditorFor(model => model.Locations[0].LocatioDesc)
                        <br />

                    </td>
                </tr>
                <tr>
                    <td>
                        @{
                        foreach (var itm in Model.Locations[0].Positions)
                        {
                            <div>
                                @Html.RadioButton(itm.Type, new { id = "ID_" + itm.ID })
                                @Html.Label("Location" + itm.ID, itm.Type)
                            </div>
                        }
                        }

                    </td>
                    <td>
                        @*@for (int i = 0; i <  Model.MobileSite[0].MobileHomePageHeroBannerLocation1.Count; i++)
                            {
                                 @Html.CheckBoxFor(m => m.MobileSite[0].MobileHomePageHeroBannerLocation1[i].Checked, new { id = "Hero" })
                                 @Html.DisplayFor(m => m.MobileSite[0].MobileHomePageHeroBannerLocation1[i].Text)

                                <br />
                            }*@

                    </td>
                </tr>
            </table>




            @*@Html.LabelFor(model => model.MobileSite[0].MobileHomePageHeroBannerLocation[0].Items.Count.ToString())*@
        </div>
        <div id="step-3">
            <h2 class="StepTitle">Step 3 Title</h2>
            <!-- step content -->
        </div>

    </div>
    <input type="button" id="wizard-submit" value="Submit" />

}

Following code in view used to create radio buttons

                            @{
                        foreach (var itm in Model.Locations[0].Positions)
                        {
                            <div>
                                @Html.RadioButton(itm.Type, new { id = "ID_" + itm.ID })
                                @Html.Label("Location" + itm.ID, itm.Type)
                            </div>
                        }
                        }

Here is form after submission.

Any comments here please? Positions passed back as null. I would like to pass all the options and position3 as selected (true)

Cheers Harry

Answer 1

As per my understanding you will only get selected radio button value when form submit because you are using similar like radiobutton list.

For get that selected radiobutton value you need to define one property in LocationDetail class.

public class LocationDetail
{
  public string LocatioName { get; set; }
  public string LocatioDesc{ get; set; }
  public List<Position> Positions { get; set; }
  public int SelectedPosition{get;set;}
}

Now use this property in view like this

 @{
   foreach (var itm in Model.Locations[0].Positions)
   {
      <div>
          @Html.RadioButtonFor(m=>Model.Locations[0].SelectedPosition,itm.ID ,new { id = "ID_" + itm.ID })
          @Html.Label("Location" + itm.ID, itm.Type)
      </div>
   }
  }

Now you should get selected radio button value from model.Location.SelectedPosition.

Answer 2

I think the problem is with the way you are configuring your Position list (the Type is different):

List<Position> itms = new List<Position>{
                new Position{ID="1", Type="position1"},
                new Position{ID="2", Type="position2"},
                new Position{ID="3", Type="position3"},
                new Position{ID="4", Type="position4"},
                new Position{ID="5", Type="position5"}
        };

And on view you are using

<div>
      @Html.RadioButton(itm.Type, new { id = "ID_" + itm.ID })
      @Html.Label("Location" + itm.ID, itm.Type)
</div>

Once HTML is generated, when the form is posted the values will not not be attached as it do not have a link with model.

You should use RadioButtonFor or even better in your case RadioButtonListFor