ASP.NET MVC 3 - Добавить / удалить из коллекции перед публикацией - PullRequest
Новая
       6

ASP.NET MVC 3 - Добавить / удалить из коллекции перед публикацией

7 голосов
/ 21 декабря 2010

У меня есть модель, которая содержит коллекцию, например: 

class MyModel
{
    public List<MySubModel> SubModels { get; set; }
}

По мнению, я хочу динамически добавлять / удалять из этого списка, используя Javascript перед отправкой. Прямо сейчас у меня есть это: 

$("#new-submodel").click(function () {
    var i = $("#submodels").children().size();
    var html = '<div>\
                    <label for="SubModels[' + i + '].SomeProperty">SomeProperty</label>\
                    <input name="SubModels[' + i + '].SomeProperty" type="textbox" />\
                </div>'
    $("#submodels").append(html);
});

Это работает, но уродливо. И, если я хочу показать эти ярлыки / текстовые поля для существующих элементов, то нет чистого способа сделать это (без дублирования).

Я чувствую, что должен быть в состоянии использовать помощников Razor или что-то еще для этого. Есть идеи? Помоги мне остаться сухим.

Ответы [ 2 ]

7 голосов
/ 22 декабря 2010

Ваш подход может привести к неожиданным ошибкам при удалении или добавлении элементов div. Например, у вас есть 4 элемента, вы удаляете первый элемент, затем $('#submodels').children().size() вернет 3, но ваш последний вставленный div имеет значение атрибута имени, установленное SubModels[3].SomeProperty, что приводит к конфликту. И если ваши опубликованные значения содержат SubModels[1], но не SubModels[0], связыватель модели по умолчанию не сможет связать список (он свяжет его как ноль). Я должен был выучить это трудным путем ...

Чтобы устранить вышеупомянутую проблему (и вашу), я предлагаю вам сделать что-то вроде этого: 

$("#addBtn").click(function() {
  var html = '<div class="submodel">\
                <label>SomeProperty</label>\
                <input type="textbox" />\
              </div>'; // you can convert this to a html helper!
  $("#submodels").append(html);
  refreshNames(); // trigger after html is inserted
});

$(refreshNames); // trigger on document ready, so the submodels generated by the server get inserted!

function refreshNames() {
  $("#submodels").find(".submodel").each(function(i) {
     $(this).find("label").attr('for', 'SubModels[' + i + '].SomeProperty');
     $(this).find("label").attr('input', 'SubModels[' + i + '].SomeProperty');
  });
}

Тогда ваше представление (или, что еще лучше, EditorTemplate для типа SubModel) также может генерировать код, подобный: 

 <div class="submodel">
    @Html.LabelFor(x => x.SomeProperty);
    @Html.EditorFor(x => x.SomeProperty);
 </div>

Можно также преобразовать генерацию кода в вспомогательный html-класс и использовать его в EditorTemplate и в коде JavaScript

3 голосов
/ 22 декабря 2010

Я бы порекомендовал вам просмотреть следующую запись в блоге .

...