使用把手显示mvc中的对象列表

时间:2014-07-03 17:54:36

标签: jquery asp.net-mvc-4 mobile handlebars.js

我有一个模型,其中有一个对象列表作为其属性之一,我正在试图弄清楚如何让它们正确发布。这是一个带有MVC 4的jQuery Mobile项目,但是我想弄清楚Handlebars是否是显示列表的方式,或者是否有办法使用html助手。

正在发生的事情是,用户将选择他们有多少孩子,并且每个孩子需要有一个年龄下拉列表,以及一个18岁或以上的烟草使用复选框。我有两个类,Person和Child来封装这些数据,它们之间的唯一区别是年龄范围。

这是Handlebars方法:

<script type="text/x-handlebars-template" id="ChildTemplate">

         <div class="childWrapper">
            <label for="Children[{{id}}].Age">Child Age:</label>
            <select name="Children[{{id}}].Age" id="Children[{{id}}].Age" class="childDropdown">
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
                <option>13</option>
                <option>14</option>
                <option>15</option>
                <option>16</option>
                <option>17</option>
                <option>18</option>
                <option>19</option>
                <option>20</option>
                <option>21</option>
                <option>22</option>
                <option>23</option>
                <option>24</option>
                <option>25</option>
            </select>

            <div class="childSmoker">
                <label for="Children[{{id}}].Smoker">Tobacco User?</label>
                <input type="checkbox" name="Children[{{id}}].Smoker" id="Children[{{id}}].Smoker" />
                <input type="hidden" name="Children[{{id}}].Smoker" value="false" />

            </div>
        </div>

    </script>

这适用于添加和提交可变数量的子项,但在发布时,复选框值始终为false,我无法找到解决方法。我已经尝试过,有没有隐藏字段,但我似乎无法连接到复选框更改事件,我认为jQuery Mobile在某种程度上干扰。

我尝试的另一种方法是创建一个编辑器模板,其模型是Child对象的列表,但我不断收到运行时错误。这是模板中的代码。

<script type="text/x-handlebars-template" id="ChildTemplate">
    <div class="childWrapper">
        @Html.EditorFor(m => m.Children)
    </div>
</script>

这是我创建的模板。它位于Shared / EditorTemplates / Child.cshtml下

@model List<MyCompany.Models.Child>

@foreach(var c in Model)
{
@Html.LabelFor(m => c.Age)
@Html.DropDownListFor(m => c.Age, c.Ages)

@Html.LabelFor(m => c.Smoker)
@Html.CheckBoxFor(m => c.Smoker)
}

它给我的错误是:传递到字典中的模型项是'PreferredOneMobileMVC.Models.Child'类型,但是这个字典需要一个类型为'System.Collections.Generic.List`1的模型项。除了让它成为单个实例的编辑器之外,我还没有弄清楚如何绕过它,但这让我回到了我开始的地方。以下是页面最初绑定的模型:

    public Person Self  { get; set; }
    public Person Spouse { get; set; }
    public List<Child> Children { get; set; }
    public string County { get; set; }

    [Display(Name = "Coverage Begin Date:")]
    public virtual string CoverageDate { get; set; }

    [Display(Name = "Covered Members:")]
    public virtual string CoverageSelection { get; set; }


    public SelectList EffectiveDates { get; set; }


    public SelectList CoveredMembers { get; set; } 

    public SelectList Counties { get; set; }

我认为如果我不能使用编辑器模板,那么下一个最佳解决方案就是弄清楚如何使用html助手的把手语法。我的初步方法是

@html.LabelFor(m => m.Children[{{id}}].Age)
@Html.DropDownListFor(m => m.Children[{{id}}].Age, Model.Children[{{id}}].Ages)

但是html助手不想使用Handlebars,我无法让它构建。有关最佳方法的任何建议吗?感谢。

1 个答案:

答案 0 :(得分:2)

我明白了。如果我在模板中使用不使用lambdas的帮助程序,它就可以工作。这是新模板。

<script type="text/x-handlebars-template" id="ChildTemplate">

     @Html.Label("p[{{id}}].Age")
    <select name="p[{{id}}].Age" id="p[{{id}}].Age">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
    <div>
        @Html.Label("p[{{id}}]].Smoker")
        @Html.CheckBox("p[{{id}}].Smoker")
    </div>

</script>

只要我保持id顺序,我可以添加/删除尽可能多的ID。我的控制器方法接受List<Person>,现在所有内容都正确发布。