Блог

У меня есть модель, которая имеет список объектов в качестве одного из своих свойств, и я пытаюсь выяснить, как заставить их правильно публиковать. Это мобильный проект jQuery с MVC 4, но я пытаюсь выяснить, подходят ли 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 каким-то образом вмешивается.

Другим способом, который я пробовал, было создание шаблона редактора, в котором модель является списком дочерних объектов, но я продолжаю получать ошибку времени выполнения. Вот код в шаблоне.

 <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.Модели.Дочерний’, но для этого словаря требуется элемент модели типа ‘System.Коллекции.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; }
  

Я думаю, что если я не могу использовать шаблон редактора, следующим лучшим решением было бы выяснить, как использовать синтаксис handlebars с помощниками html. Мой первоначальный подход был

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

но html-помощники не хотят работать с Handlebars, и я не могу заставить его работать. Есть предложения по наилучшему подходу? Спасибо.

Я понял это. Если я использую помощники в шаблоне, которые не используют лямбды, это работает. Вот новый шаблон.

 <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>
  

Пока я сохраняю идентификатор последовательным, я могу добавлять / удалять столько объектов, сколько захочу. Мой метод контроллера принимает List<Person> , и теперь все публикуется правильно.