为什么我的html表单中的数据没有提交？

I am developing asp.net mvc application. I have a section on the form where I add some text boxes dynamically when the user clicks a "Add New Part" button. The problem is when I submit the form I don't get the data from the fields I added dynamically. I am passing the FormCollection to my controller and stepping through the code in the debugger and those fields are not there. If I look at them in firebug I see them just fine. Any ideas?

我正在开发asp.net mvc应用程序。我在表单上有一个部分,当用户单击“添加新部件”按钮时,我会动态添加一些文本框。问题是,当我提交表单时,我没有从动态添加的字段中获取数据。我将FormCollection传递给我的控制器并逐步调试调试器中的代码,这些字段不在那里。如果我用萤火虫看他们,我看他们就好了。有任何想法吗?

Here is the javascript for adding the text fields to the page:

这是用于将文本字段添加到页面的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);
    }

Here is the html:

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

When I inspect the html with firebug it looks fine to me:

当我用firebug检查html时,它看起来很好:

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

Thoughts?

4 个解决方案

#1

Verify with Firebug that all the post data is being sent from the page via the "Net" tab.

使用Firebug验证是否通过“网络”选项卡从页面发送了所有发布数据。

Also, i agree with Kobi: you need to increment the ID's on the cloned elements so they are unique.

此外,我同意Kobi:您需要增加克隆元素的ID,以便它们是唯一的。

I would suggest you look into jQuery for dynamically creating html elements. I have only just started learning jQuery and its very easy. The following code demonstrates a simple file upload form that allows the user can add more input elements dynamically. Each time the jQuery adds a new input element, i append a chr to the id attribute so they are all unique. Hopefully this helps you:

我建议你研究jQuery来动态创建html元素。我刚刚开始学习jQuery,它非常简单。以下代码演示了一个简单的文件上载表单,允许用户动态添加更多输入元素。每次jQuery添加一个新的输入元素时,我都会将一个chr附加到id属性,因此它们都是唯一的。希望这可以帮助你:

The script block for the jQuery.. notice the last part is for the ajax animation. The actual copying code is only those 4 lines from $("#moreFiles").click

jQuery的脚本块..请注意最后一部分是针对ajax动画。实际的复制代码只是来自$(“#moreFiles”)的那4行。点击

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

..and the aspnet markup:

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

..this all only boils down to a few lines of html and jQuery.

..这一切只归结为几行html和jQuery。

#2

When you have multiple values on fields with same names, you should be able to see them on the server side using Request.Form.GetValues("key").

如果在具有相同名称的字段上有多个值,则应该能够使用Request.Form.GetValues(“key”)在服务器端看到它们。

You should note that when you clone the nodes, you create copies with the same IDs, which is considered invalid.
Also, you have a for loop there, and I don't quite get what it does (reads the node's name and sets it back - what is the reason for doing that? Should that be var theName = newFields[i].name ?)

您应该注意,在克隆节点时,您将使用相同的ID创建副本,这被视为无效。此外,你有一个for循环,我不知道它做了什么(读取节点的名称并将其设置回来 - 这样做的原因是什么?应该是var theName = newFields [i] .name? )

#3

I was working with plain HTML when my form worked fine if all the fields were left blank, but it would not submit if I filled out the form.

如果我的表单工作正常,如果所有字段都留空,我正在处理纯HTML,但如果我填写表单则不会提交。

Later I realized that it was because of a text-field entry 'Email' in which I was entering an email-address containing the character '@'. When I removed the '@', the form started submitting again.

后来我意识到这是因为我在输入一个包含字符'@'的电子邮件地址的文本字段条目'Email'。当我删除'@'时,表单开始再次提交。

#4

You cannot just aribtrarily add text boxes client-side without having the corresponding server-side controls ready to read the data from the postback. However, you should be able to read the raw data from HttpRequest.Form.

您无法在客户端无意中添加文本框,而无需准备好相应的服务器端控件来从回发中读取数据。但是,您应该能够从HttpRequest.Form读取原始数据。

update: oops! it's MVC. I didn't read^H^H^H^H see that. never mind.

更新:哎呀!这是MVC。我没看过^ H ^ H ^ H ^ H看到了。没关系。

-Oisin

#1