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>

当我用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="" />

思想？

Answer 1

使用Firebug验证所有帖子数据是通过“网络”标签从页面发送的。

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

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

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>

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

如果您在具有相同名称的字段上有多个值，则应该可以使用Request.Form.GetValues("key")在服务器端查看它们。

您应该注意，在克隆节点时，您创建具有相同ID的副本，这被视为无效此外，你有一个for循环，我不知道它做了什么（读取节点的名称并将其设置回来 - 这样做的原因是什么？应该是var theName = newField < strong> s [i].name？）

Answer 3

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

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

Answer 4

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

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

-Oisin

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

4 个答案: