Bindung zur Liste ASP.NET MVC dynamischen jQuery Index

Question

Ich habe eine Reihe von Listenelementen, die ich dynamisch erstellen. Jedes dieser Listenelemente enthält einen Eingabetext, dessen Wert ich an den Controller übergeben möchte.

HTML

<ul id="list"></ul> 
<button id="add">Add</button> 

<script> 
    var counter = 1; 

    $('#add').click(function() { 
     var text = '<input type="text" name="(what should I put here?)"></input>'; 
     var li = '<li>' + text + '</li>'; 

     $(li).appendTo('#list'); 
     counter++; 
     return false; 
    }); 
</script> 

Ansicht Modell

public IEnumerable<string> list {get; set;} 
... 

Wie kann ich diese Werte an meine Viewmodel binden implizit? Ich habe versucht, die counter Variable zu verwenden, um einen Namen zu jedem Elemente erstellt (wie list[counter]) zuweisen, aber auf der Steuerungsseite die list Variable auf meinem Viewmodel kommt noch leer.

Answer 1

Weil Ihre Sammlung nur für Werttyp (string), dann kann einfach

$('#add').click(function() { 
    var text = '<input type="text" name="list"></input>'; 
    .... 
}); 

Es ist nur notwendig, Indexer einzuschließen, wenn die Eigenschaft ein Mitglied eines komplexen Objekts ist.

Wenn Sie den Indexer tun sind, muss es bei Null beginnen und fortlaufend sein (es sei denn, Sie auch einen speziellen versteckten Eingang zu identifizieren den Indexer enthalten). Ihr Versuch, bei list[counter] mit fehlgeschlagen, da der Wert von counter zu 1 initialisiert (es hat funktioniert hätte, wenn Sie es var counter = 0; initialisiert)

Answer 2

Zunächst möchte ich Ihren Zähler auf die Menge an Li in Ihrer ungeordnete Liste Basis mit:

$('#list > li').size() 

Dann, um das Modell Binder glücklich pre-fix Ihre Immobilie mit der Liste zu halten:

'<input type="text" name="list[' + counter + ']"></input>' 

Der vollständige Code wird dann:

$('#add').click(function() { 
    var counter = $('#list > li').size(); 
    var text = '<input type="text" name="list[' + counter + ']"></input>'; 
    var li = '<li>' + text + '</li>'; 

    $(li).appendTo('#list'); 
    return false; 
}); 

jsFiddle

Bitte beachten Sie, müssen Sie die Ansicht Modell-Eigenschaft auf eine IList oder List für die Indizierung arbeiten ändern: Sie

public IList <string> list {get; set;}