Comment fonctionne MVC 4 List Model Binding?

Si je souhaite qu’un ensemble d’entrées dans un formulaire soit lié à une List dans MVC 4, je sais que la convention de dénomination suivante pour input atsortingbuts de name input fonctionnera:

Mais je suis curieux de savoir à quel point le modèle de classeur est indulgent. Par exemple, qu’en est-il des éléments suivants:

Comment le classeur modèle pourrait-il gérer cela? Serait-il lié à une List de longueur 9 avec des valeurs nulles? Ou serait-il toujours lié à une List de longueur 3? Ou serait-ce étouffer complètement?

Pourquoi je m’inquiète

Je souhaite implémenter un formulaire dynamic dans lequel l’utilisateur peut append des lignes au formulaire et peut également supprimer des lignes du formulaire. Donc, si un utilisateur supprime la ligne 2 sur 8 lignes au total, je veux savoir si je dois renuméroter toutes les entrées suivantes.

Il existe un format de fil spécifique à utiliser avec les collections. Ceci est discuté sur le blog de Scott Hanselman ici:

http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx

Un autre article de Phil Haack parle de ceci:

http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx

Enfin, une entrée de blog qui fait exactement ce que vous voulez ici:

http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/

J’ai suivi cette approche liée aux blogs ci-dessus et ajouté quelques détails qui pourraient être utiles à certains – d’autant plus que je voulais append dynamicment un nombre quelconque de lignes mais ne souhaitais pas utiliser AJAX pour le faire (je voulais que le formulaire ne soumette que dans la poste). Je ne voulais pas non plus me soucier du maintien des identifiants séquentiels. Je capturais une liste de dates de début et de fin:

Voir le modèle:

 public class WhenViewModel : BaseViewModel { public List Dates { get; set; } //... Other properties }

Modèle de date de début / de fin:

 public class DateViewModel { public ssortingng DateID { get; set; } public DateTime? StartDate { get; set; } public DateTime? EndDate { get; set; } }

Puis en les utilisant dans la page (avec datepicker):

  @{ foreach (DateViewModel d in Model.Dates) { @: @Html.Hidden("Dates.Index", d.DateID) @Html.Hidden("Dates[" + d.DateID + "].DateID", d.DateID) //ID again to populate the view model @Html.TextBox("Dates[" + d.DateID + "].StartDate", d.StartDate.Value.ToSsortingng("yyyy-MM-dd")) @:
 @: @Html.TextBox("Dates[" + d.DateID + "].EndDate", d.EndDate.Value.ToSsortingng("yyyy-MM-dd")) @:
  } } 
 Add Dates

Comme le décrit l’article de blog lié dans la publication @ErikTheVikings ci-dessus, la collection est créée par l’élément caché répété: @Html.Hidden("Dates.Index", d.DateID) pour chaque entrée de la collection de la page.

Je voulais append arbitrairement des lignes sans utiliser AJAX pour publier des données sur le serveur, ce que j’ai fait en créant une division cachée contenant un modèle d’une “ligne” / élément dans la collection:

Ligne cachée “Template”:

   @Html.Hidden("Dates.Index", "REPLACE_ID") @Html.Hidden("Dates[REPLACE_ID].DateID", "REPLACE_ID") @Html.TextBox("Dates[REPLACE_ID].StartDate", "") 
  @Html.TextBox("Dates[REPLACE_ID].EndDate", "")

Puis utilisé jQuery qui clone le modèle, fournit un identifiant aléatoire à utiliser pour une nouvelle ligne et ajoute la ligne clonée maintenant visible à la div contenant ci-dessus:

jQuery pour terminer le processus:

Exemple JSFiddle du résultat: http://jsfiddle.net/mdares/7JZh4/

J’ai une liste dynamic qui ressemble à ceci:

    --//--

donc quand je ajoute ou supprime la ligne (élément li) je dois réorganiser les éléments

  this.reorderItems = function () { var li = this.el_list.find('li'); for (var i = 0; i < li.length; i++) { var inputs = $(li[i]).find('input'); $.each(inputs, function () { var input = $(this); var name = input.attr('name'); input.attr('name', name.replace(new RegExp("\\[.*\\]", 'gi'), '[' + i + ']')); var id = input.attr('id'); input.attr('id', id.replace(new RegExp('_.*__', 'i'), '_' + i + '__')); }); } };

cette liste placée dans Html.BeginFrom simple à partir de clientside et comme paramètre List in action sur le serveur

J’ai également fait face à un problème similaire dans le passé, et j’utilise KnockoutJS pour gérer un tel scénario.

En gros, Knockout envoie la collection dans une chaîne JSON et je les désérialise dans mon contrôleur.

Pour plus d’informations: http://learn.knockoutjs.com/#/?tutorial=collections

J’ai eu peu de problèmes lorsque j’utilisais Chrome Browser et que je cliquais sur le bouton Retour et que je trouve l’entrée avec type = “caché” lorsque les valeurs définies par le navigateur Chrome ne sont pas correctement définies.

peut-être que nous pouvons changer

Formater plus d’informations: Chrome ne met pas en cache les valeurs de champs de formulaire masqués à utiliser dans l’historique du navigateur http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/