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
