Почему данные из моей HTML-формы не отправляются?

Question

Я занимаюсь разработкой приложения asp.net mvc. У меня есть раздел в форме, где я динамически добавляю несколько текстовых полей, когда пользователь нажимает кнопку «Добавить новую деталь». Проблема в том, что при отправке формы я не получаю данные из полей, которые я добавил динамически. Я передаю FormCollection своему контроллеру и перебираю код в отладчике, а эти поля отсутствуют. Если я смотрю на них в клопе, я вижу их очень хорошо. Есть идеи?

Вот javascript для добавления текстовых полей на страницу:

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);
    }

Вот 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>

Когда я проверяю html с помощью firebug, он выглядит нормально для меня:

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="" />

Мысли

Answer 1

Проверьте с помощью Firebug, что все почтовые данные отправляются со страницы через вкладку «Сеть».

Кроме того, я согласен с Коби: вам нужно увеличить идентификаторы на клонированных элементах, чтобы они были уникальными.

Я бы посоветовал вам изучить jQuery для динамического создания html-элементов. Я только начал изучать jQuery, и это очень просто. Следующий код демонстрирует простую форму загрузки файла, которая позволяет пользователю динамически добавлять дополнительные элементы ввода. Каждый раз, когда jQuery добавляет новый элемент ввода, я добавляю chr к атрибуту id, чтобы они все были уникальными. Надеюсь, это поможет вам:

Блок сценария для jQuery. Обратите внимание, что последняя часть предназначена для анимации ajax. Фактический код копирования - это только те 4 строки из $ ("# moreFiles"). Нажмите

    <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>  

.. и разметка aspnet:

    <% 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>

.. все это сводится к нескольким строкам html и jQuery.

Answer 2

Я работал с простым HTML, когда моя форма работала нормально, если все поля оставлены пустыми, но она не будет отправлена, если я заполню форму.

Позже я понял, что это из-за записи в текстовом поле «Электронная почта», в которой я вводил адрес электронной почты, содержащий символ «@». Когда я удалил символ @, форма снова начала отправляться.

Answer 3

Если у вас есть несколько значений в полях с одинаковыми именами, вы сможете увидеть их на стороне сервера, используя Request.Form.GetValues("key").

Следует отметить, что при клонировании узлов вы создаете копии с одинаковыми идентификаторами, что считается недействительным.
Кроме того, у вас есть цикл for, и я не совсем понимаю, что он делает (читает имя узла и устанавливает его обратно - что является причиной для этого? Должно ли это быть var theName = newField s [i].name?)

Answer 4

Нельзя просто добавить текстовые поля на стороне клиента без наличия соответствующих серверных элементов управления, готовых для чтения данных из обратной передачи. Однако вы должны быть в состоянии прочитать необработанные данные из HttpRequest.Form.

обновление: упс! это MVC. Я не читал ^ H ^ H ^ H ^ H вижу это. не бери в голову.

-Oisin