I rewrote my page to use EditorTemplates. And they are very nice. However, when I postback only the first row posts back data. The other 4 rows come up as null. FormSection has a List of FormRowModels. And FormRows has a List of CtrlInputDataModels. My code below.
Index
@model InspectionWebFormsMVC.ViewModels.FormSection
@{
ViewBag.Title = "Testing Editor Templates";
}
<h2>Test Control for Webforms</h2>
@Html.EditorFor(x => x.sectionRows, "FormRowModel")
EditorTemplate/FormRowModel
@model InspectionWebFormsMVC.ViewModels.FormRowModel
@using (Html.BeginForm("Index", "TestEdit", FormMethod.Post))
{
int i = 0;
//var testCtrls = Model.Where(x => x.RowInput.Where(y => types.Contains(y.RowCtrl.Type)));
<div style="clear:both; padding:1%;">
<div class="section">
@Model.Section
</div>
<div class="number">
@Model.SectionNumber
</div>
<div class="desc">
@Model.Description
</div>
<div class="ctrl">
@{
List<string> types = new List<string>() { "dropdown", "text", "radio", "checkbox" }
@Html.EditorFor(y => y.RowInput.Where(z => types.Contains(z.RowCtrl.Type)), "CtrlInputDataModel")
}
</div>
EditorTemplate/CtrlInputDataModel
@model InspectionWebFormsMVC.ViewModels.CtrlInputDataModel
@{
var ddv = new SelectList(Model.RowCtrl.DefaultValues, "Value", "Label");
switch (Model.RowCtrl.Type)
{
case "dropdown":
//@Html.DropDownListFor(blah => Model.InputtedData, ddv)
//@Html.HiddenFor(blah => Model.InputtedDataID)
//@Html.HiddenFor(blah => Model.RowCtrl.CtrlTypeID)
@Html.DropDownList("InputtedData", ddv)
@Html.Hidden("InputtedDataID", Model.InputtedDataID)
@Html.Hidden("CtrlTypeID", Model.RowCtrl.CtrlTypeID)
<br />
break;
case "text":
//@Html.TextBoxFor(blah => Model.InputtedData)
//@Html.HiddenFor(blah => Model.InputtedDataID)
//@Html.HiddenFor(blah => Model.RowCtrl.CtrlTypeID) *@
@Html.TextBox("InputtedData", Model.InputtedData)
@Html.Hidden("InputtedDataID", Model.InputtedDataID)
@Html.Hidden("CtrlTypeID", Model.RowCtrl.CtrlTypeID)
<br />
break;
case "radio":
foreach (var sli in ddv)
{
//@Html.LabelFor(blah => Model.InputtedData, sli.Text)
//@Html.RadioButtonFor(blah => Model.InputtedData, sli.Value)
@Html.Label("InputtedData", sli.Text)
@Html.RadioButton("InputtedData", Model.InputtedData, sli.Value)
}
//@Html.HiddenFor(blah => Model.InputtedDataID)
//@Html.HiddenFor(blah => Model.RowCtrl.CtrlTypeID)
@Html.Hidden("InputtedDataID", Model.InputtedDataID)
@Html.Hidden("CtrlTypeID", Model.RowCtrl.CtrlTypeID)
<br />
break;
case "checkbox":
foreach (var sli in ddv)
{
//@Html.LabelFor(blah => Model.InputtedData, sli.Text)
//@Html.RadioButtonFor(blah => Model.InputtedData, sli.Value)
@Html.Label("InputtedDataID", sli.Text)
//@Html.CheckBox("InputtedData", false)
}
//@Html.HiddenFor(blah => Model.InputtedDataID)
//@Html.HiddenFor(blah => Model.RowCtrl.CtrlTypeID)
@Html.Hidden("InputtedDataID", Model.InputtedDataID)
@Html.Hidden("CtrlTypeID", Model.RowCtrl.CtrlTypeID)
<br />
break;
}
}
Resulting HTML
<form action="/TestEdit" method="post">
<div style="clear:both; padding:1%;">
<div class="section">
A
</div>
<div class="number">
1
</div>
<div class="desc">
First Row
</div>
<div class="ctrl">
<select id="sectionRows_0__RowInput_0__InputtedData" name="sectionRows[0].RowInput[0].InputtedData"><option value="1">Yes</option>
<option value="0">No</option>
</select><input data-val="true" data-val-number="The field InputtedDataID must be a number." data-val-required="The InputtedDataID field is required." id="sectionRows_0__RowInput_0__InputtedDataID" name="sectionRows[0].RowInput[0].InputtedDataID" type="hidden" value="1" /><input data-val="true" data-val-number="The field CtrlTypeID must be a number." data-val-required="The CtrlTypeID field is required." id="sectionRows_0__RowInput_0__RowCtrl_CtrlTypeID" name="sectionRows[0].RowInput[0].RowCtrl.CtrlTypeID" type="hidden" value="1" /> <br />
</div>
</form>
<form action="/TestEdit" method="post">
<div style="clear:both; padding:1%;">
<div class="section">
A
</div>
<div class="number">
2
</div>
<div class="desc">
Second Row of Halls
</div>
<div class="ctrl">
<select id="sectionRows_1__RowInput_0__InputtedData" name="sectionRows[1].RowInput[0].InputtedData"><option value="1">Accept</option>
<option value="0">Reject</option>
</select><input data-val="true" data-val-number="The field InputtedDataID must be a number." data-val-required="The InputtedDataID field is required." id="sectionRows_1__RowInput_0__InputtedDataID" name="sectionRows[1].RowInput[0].InputtedDataID" type="hidden" value="2" /><input data-val="true" data-val-number="The field CtrlTypeID must be a number." data-val-required="The CtrlTypeID field is required." id="sectionRows_1__RowInput_0__RowCtrl_CtrlTypeID" name="sectionRows[1].RowInput[0].RowCtrl.CtrlTypeID" type="hidden" value="2" /> <br />
<input id="sectionRows_1__RowInput_1__InputtedData" name="sectionRows[1].RowInput[1].InputtedData" type="text" value="UP, UP, DOWN, DOWN, LEFT, LEFT, RIGHT, RIGHT, B, A, B, A, START" /><input data-val="true" data-val-number="The field InputtedDataID must be a number." data-val-required="The InputtedDataID field is required." id="sectionRows_1__RowInput_1__InputtedDataID" name="sectionRows[1].RowInput[1].InputtedDataID" type="hidden" value="6" /><input data-val="true" data-val-number="The field CtrlTypeID must be a number." data-val-required="The CtrlTypeID field is required." id="sectionRows_1__RowInput_1__RowCtrl_CtrlTypeID" name="sectionRows[1].RowInput[1].RowCtrl.CtrlTypeID" type="hidden" value="6" /> <br />
</div>
</form>
<form action="/TestEdit" method="post">
<div style="clear:both; padding:1%;">
<div class="section">
A
</div>
<div class="number">
3
</div>
<div class="desc">
Third Row of fits and fixes and polishes
</div>
<div class="ctrl">
<input id="sectionRows_2__RowInput_0__InputtedData" name="sectionRows[2].RowInput[0].InputtedData" type="text" value="50" /><input data-val="true" data-val-number="The field InputtedDataID must be a number." data-val-required="The InputtedDataID field is required." id="sectionRows_2__RowInput_0__InputtedDataID" name="sectionRows[2].RowInput[0].InputtedDataID" type="hidden" value="3" /><input data-val="true" data-val-number="The field CtrlTypeID must be a number." data-val-required="The CtrlTypeID field is required." id="sectionRows_2__RowInput_0__RowCtrl_CtrlTypeID" name="sectionRows[2].RowInput[0].RowCtrl.CtrlTypeID" type="hidden" value="3" /> <br />
</div>
</form>
EDIT:
I've replaced the following -
<div class="ctrl">
@{
List<string> types = new List<string>() { "dropdown", "text", "radio", "checkbox" }
@Html.EditorFor(y => y.RowInput.Where(z => types.Contains(z.RowCtrl.Type)), "CtrlInputDataModel")
}
</div>
with
<div class="ctrl">
@{
//List<string> types = new List<string>() { "dropdown", "text", "radio", "checkbox" };
//var yy = Model.RowInput.Where(z => types.Contains(z.RowCtrl.Type));
@Html.EditorFor(y => y.RowInput)
}
</div>
and
@Html.EditorFor(x => x.sectionRows, "FormRowModel")
with
@Html.EditorFor(x => x.sectionRows)
Still get same result. Only the first row posts back data. The other rows come back null.