Лучшие практики для списков сложных типов в ASP.NET MVC 3

Question

Это мой первый ТАК вопрос, и это скорее не «как мне это сделать», а скорее «какой самый чистый способ сделать это», потому что я вижу несколько подходов, но ни один из них не кажется оченьобращаясь ко мне.

Это немного сложная проблема для описания.По сути, у меня есть представление Add / Edit, которое позволяет пользователю редактировать поля какого-либо объекта.Этот объект довольно сложный: у него есть несколько полей и подсписок сложных объектов.Каждый сложный объект имеет около 40 полей (в основном это флажки, переключатели и даты / время).Я представлял это как список выбора:

http://fortheloot.com/public/pictures/sub-items.png

Кнопка Добавить порождает диалог с различными полями.

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

Наиболее очевидноеспособ сделать это - создать набор скрытых полей для каждого подобъекта.Таким образом, добавление подпункта приведет к добавлению 40 скрытых элементов к элементу <form>.Добавьте 10 подпунктов, и у вас будет 400 скрытых полей.Это будет нормально работать и будет привязываться к этой модели, если поля будут иметь правильные имена:

public class AddEditModel
{
  [Display(Name = "ID")]
  public int? Id { get; set; }

  [Display(Name = "Name")]
  [Required]
  [StringLength(100)]
  public string Name { get; set; }

  public IList<EntryModel> Entries { get; set; }
  public class EntryModel { /* fields */ }
}

На стороне привязки модели это выглядит довольно хорошо, но со стороны клиента яМне нужно отслеживать сотни элементов DOM, и это кажется мне громоздким.Загрузка и выгрузка различных элементов формы диалога из 40 других элементов кажется ... как будто это могло бы быть лучше.

В идеале, я хотел бы иметь возможность просто хранить данные в виде объекта javascript на <option> элемент, использующий либо data- атрибуты HTML 5, либо функцию data() jQuery, которые на самом деле одинаковы.Это сделало бы аспекты JavaScript более понятными, но это не привело бы к автоматической привязке к модели при обратной передаче.

Если бы был способ получить лучшее из обоих миров - сохранить один объект JS наэлемент <option> или даже один элемент <input type="hidden" /> (для каждого подпункта) - который все еще будет правильно привязан к модели при обратной передаче, я бы чувствовал, что эта проблема решена.

Answer 1

Рассматривали ли вы использование javascript-фреймворка, такого как магистраль или нокаут?https://stackoverflow.com/questions/5112899/knockout-js-vs-backbone-js-vs

Answer 2

Вам все еще понадобится html-поле (type = hidden), чтобы отправить эти данные обратно на сервер.(Вы можете использовать пост ajax, но это, вероятно, не очень хорошая идея)

Я бы предложил разработать разумную объектную модель, содержащую эти структуры данных, и сериализовать объектную модель каждый раз, когда вы вносите ее вJSON с stringify

Затем, когда вы отправляете обратно форму, JSON будет отправлен на сервер, и вы можете десериализовать всю объектную модель в набор классов, написанных на C # (что можетимитируйте объектную модель, которая была у вас в javascript) с помощью классов JavaScriptSerializer

Edit:

Для десериализации строки json вы можете использовать следующий код:

JavaScriptSerializer js = new JavaScriptSerializer(); 
var c = js.Deserialize<MyClass>(json);
return View(c);

Есливы отправляете обратно json как тело сообщения (например, метод $ .ajax или $ .post), тогда привязка будет происходить автоматически с MVC3, вам просто нужно указать правильный тип контента: application / json в посте;перейдите по ссылке в моем комментарии ниже для более подробной информации о том, как это работает.

Martin

Answer 3

Поскольку мы полностью разбираемся с javascript, я бы придерживался поведения javascript и для обратной передачи.Когда вы вводите новые элементы в список, я буду продолжать создавать многомерный массив javascript, а затем преобразовывать массив в json, а затем отправлять его через сообщение ajax на ваш маршрут MVC.

Пока объект json соответствует стандартам именования вашей модели, MVC уже будет выполнять неявное связывание модели, прежде чем перейдет к методу действия.

Какой самый простой и элегантный способсделать это? Knockout.js! В нокауте вы создаете наблюдаемую коллекцию и добавляете ее в свою коллекцию без грубого синтаксиса массивов javascript.Затем вы вызываете метод toJSON с нокаутом, чтобы преобразовать коллекцию в json перед выпуском сообщения ajax.

Я бы настоятельно рекомендовал посмотреть видео PluralSight на Knockout и затем загрузить исходный код.

Я бы написал пример, но мне нужно вернуться к работе:)