Pourquoi les données de mon formulaire html ne sont-elles pas soumises?

Question

Je développe l'application asp.net mvc. J'ai une section sur le formulaire où j'ajoute dynamiquement des zones de texte lorsque l'utilisateur clique sur un bouton "Ajouter une nouvelle partie". Le problème est quand je soumets le formulaire je ne reçois pas les données des champs que j'ai ajoutés dynamiquement. Je passe la FormCollection à mon contrôleur et je passe le code dans le débogueur et ces champs ne sont pas là. Si je les regarde dans firebug, je les vois très bien. Des idées?

Voici le javascript pour ajouter les champs de texte à la page:

function moreFields() { 
     var newFields = document.getElementById('readrootpu').cloneNode(true); 
     newFields.id = ''; 
     newFields.style.display = 'block'; 
     var newField = newFields.childNodes; 
     for (var i = 0; i < newField.length; i++) { 
      var theName = newField[i].name 
      if (theName) 
       newField[i].name = theName; 
     } 
     var insertHere = document.getElementById('newpartusageitems'); 
     insertHere.parentNode.insertBefore(newFields, insertHere); 
    } 

Voici le code html:

<div id="readrootpu" class="usedparts" style="display: none"> 
    <% var fieldPrefix = "PartUsage[]."; %> 
    Part ID: 
    <%= Html.TextBox(fieldPrefix + "ID", "")%> 
    Serial Number: 
    <%= Html.TextBox(fieldPrefix + "Serial", "")%> 
    Quantity: 
    <%= Html.TextBox(fieldPrefix + "Quantity", "") %> 
    <input type="button" value="Remove" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /> 
</div> 

Lorsque j'inspecte le code html avec Firebug il semble bien me:

Part ID: <input type="text" name="PartUsage[].ID" id="PartUsage[]_ID" value="" /> 
Serial Number: <input type="text" name="PartUsage[].Serial" id="PartUsage[]_Serial" value="" /> 
Quantity: <input type="text" name="PartUsage[].Quantity" id="PartUsage[]_Quantity" value="" /> 

Pensées?

Answer 1

Vous ne pouvez pas simplement ajouter des zones de texte côté client sans que les contrôles côté serveur correspondants ne soient prêts à lire les données de la publication. Cependant, vous devriez être capable de lire les données brutes de HttpRequest.Form.

mise à jour: oops! c'est MVC. Je n'ai pas lu^H^H^H^H voir ça. ça ne fait rien.

-Oisin

Answer 2

Lorsque vous avez plusieurs valeurs sur les champs avec même nom, vous devriez être en mesure de les voir sur le côté serveur à l'aide Request.Form.GetValues("key").

Vous devez noter que lorsque vous clonez les noeuds, vous créez des copies avec les mêmes ID, ce qui est considéré comme non valide.
En outre, vous avez une boucle for là-bas, et je ne comprends pas bien ce qu'il fait (lit le nom et fixe en arrière du nœud - quelle est la raison pour le faire Si tel était var theName = newFields[i].name?)

Answer 3

Vérifiez auprès de Firebug que toutes les données de poste sont envoyées à partir de la page via l'onglet "Net".

Aussi, je suis d'accord avec Kobi: vous devez incrémenter les ID sur les éléments clonés afin qu'ils soient uniques.

Je vous suggère de regarder dans jQuery pour créer dynamiquement des éléments html. Je viens juste de commencer à apprendre jQuery et c'est très facile. Le code suivant illustre un formulaire de téléchargement de fichier simple qui permet à l'utilisateur d'ajouter dynamiquement plus d'éléments d'entrée. Chaque fois que le jQuery ajoute un nouvel élément d'entrée, j'ajoute un chr à l'attribut id afin qu'ils soient tous uniques. Espérons que cela vous aide:

Le bloc de script pour le jQuery .. notez que la dernière partie est pour l'animation ajax. Le code de copie réelle est que les 4 lignes de $ ("#") MoreFiles cliquez

<script type="text/javascript"> 
     var counter = "oneFile"; 
     $(document).ready(function() { 
      $("#moreFiles").click(function() { 
       var newCounter=counter+"1"; 
       $("p#"+counter).after("<p id='"+newCounter+"'><input type='file' name='"+newCounter+"' id='"+newCounter+"' size='60' /></p>"); 
       counter=newCounter; 
      }); 
      $("#submitUpload").click(function() { 
       $("#submitUpload").val("Uploading..."); 
       $("img.uploadingGif").show(); 
      }); 
     }); 
    </script> 

..et le balisage réSEAU.

<% string postUrl = Model.PostUrl + (Model.ModelID > 0 ? "/" + Model.ModelID.ToString() : ""); %> 
    <form id="uploadForm" class="uploadForm" action="<% =postUrl %>" 
     method="post" enctype="multipart/form-data"> 
     <label>Select file(s) for upload (size must not exceed 
      <% =Html.Encode(ServiceConstants.MAX_FILE_UPLOAD_SIZE_INBYTES) %> bytes):</label> 
     <p id="oneFile"><input type="file" name="oneFile" id="oneFile" size="60" /></p> 
     <% if(Model.MultipleFiles) { %> 
      <p><a id="moreFiles" href="#">add more files</a></p> 
      <input id="MultipleFiles" type="hidden" name="MultipleFiles" value="true" /> 
     <% } %> 
     <p><%--<input id="submitUpload" type="submit" value="Upload" />--%> 
     <% =Html.InputSubmit("Upload","submitUpload") %> 
      <% =Html.LoadingImage("uploadingGif") %> 
    </form> 

..ce tout se résume uniquement jusqu'à quelques lignes de html et jQuery.

Answer 4

Je travaillais avec du HTML brut lorsque mon formulaire fonctionnait correctement si tous les champs étaient laissés en blanc, mais il ne serait pas soumis si je remplissais le formulaire. Plus tard, j'ai réalisé que c'était à cause d'une entrée de champ de texte 'Email' dans laquelle j'entrais une adresse email contenant le caractère '@'. Lorsque j'ai supprimé le '@', le formulaire a recommencé à soumettre.