Бритва MVC3: добавьте пользовательский класс в список с помощью jQuery

Question

У меня есть настройки класса, как это

 public class MyCLass
 {
     //...
     public IList<MyInnerClass> InnerClass { get; set;}
 }

 public class MyInnerClass
 {
    public string A { get; set;}
    public string B { get; set;}
    //....
 }

в моей форме cshtml я могу поместить ее на всю страницу и опубликовать обратно, например,

for(int i=0; i< Model.InnerClass.Count; i++)
{
  @Html.EditorFor(m => m.InnerClass[i].A);
  @Html.EditorFor(m => m.InnerClass[i].B);
}

Но теперь мне нужна кнопка, которая может динамически с помощью javascript добавлять новый экземпляр входных данных MyInnerCLass ниже существующих и все еще правильно связывать все обратно, когда я публикую страницу. Как бы я это сделал? JQuery предпочтительнее, но я могу использовать все, что работает

Answer 1

Один из способов - заключить каждую строку цикла for в какой-либо HTML-тег, такой как div или tr, чтобы на него можно было ссылаться с помощью jQuery.Затем вы можете использовать одну из сгенерированных строк в качестве строки шаблона.Индексы должны быть заменены на соответствующие значения.Предположим, у вас есть вывод HTML:

Вы можете выбрать первую строку с помощью jQuery, а затем клонировать ее, заменить индексы с помощью регулярных выражений, а затем добавить строку:

var newRowIndex = x; // determine row index
var newRow = $("#rows .row").eq(0).clone(true);
newRow.find(":input").each(function() {
  var name = $(this).attr("name").replace(/\[\d+\]/, "[" + rowIndex.toString() + "]");
  var id = name.replace(/[.\]\[]/g, "_");
  $(this).attr("name", name);
  $(this).attr("id", id);
});
$("#rows").append(newRow);

Answer 2

Ознакомьтесь с блогом Phil Haacked Привязка модели к списку .Он публикует почти все о том, как связыватель модели по умолчанию работает со списками.

Пока вы используете метод Non-Sequential Indices, вы можете делать то, что вы хотите динамически.