Why isn't the EditorTemplate showing the data?

2019-02-21 02:53发布

问题:

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.

回答1:

So with Darin's help, I got my partial view converted to editortemplates. Which, in this case, is a Good Thing (TM). However, I was only able to get the first row of the collection posted back. After some googling around, I ran across this page (which is also referenced by various stackoverflow questions). After implementing this bit of code, nothing was posting back. Then I ran across this post on StackOverflow. And saw that I referenced the wrong name for the collection. I needed to reference the property as opposed to the model name. Now everything is working as it should.

A big thanks to Darin for all the help directly and indirectly he has provided me (and others). Thanks!

For anyone, having a bit of trouble getting Steve's code to work, please look at this page. It's an overall solution to getting custom htmlhelpers to work in general.