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: enter image description here

Second Tab enter image description here

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. enter image description here

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

Cheers Harry

"Type" of class Position will have radiobutton value.. – Kartikeya Khosla Aug 05 '14 at 09:01 — Kartikeya Khosla, Aug 05 '14 at 09:01

score 1 · Answer 1 · answered Aug 05 '14 at 09:27

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.

Thanks Manish. It gets the value inside SelectedPostion. Once form will be edited we need to show the selected value as checked. How that will be possible. — user2739418, Aug 05 '14 at 09:45
If you assign value of SelectedPosition property from controller then that radio button should get selected. — Manish Parakhiya, Aug 05 '14 at 09:50

score 0 · Answer 2 · edited May 23 '17 at 10:26

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

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

2 Answers2