从动态生成的输入中读取服务器端的数据答案

【问题标题】：Read data on server side from dynamically generated inputs从动态生成的输入中读取服务器端的数据
【发布时间】：2014-03-30 11:14:34
【问题描述】：

就我而言，我有
<input type="text"/>
和按钮，单击时将附加输入添加到页面。
要添加输入，我使用此 JavaScript：

    var myBtn = document.getElementById('myBtn');
    var qtyOfAdds = 0;
    myBtn.addEventListener('click', function (event) 
    {
        addField();
    });

    var form = document.getElementById('form1');

    function addField() 
    {
        var input = document.createElement('input');
        input.id = qtyOfAdds;
        input.name = qtyOfAdds;
        input.type = "Text";
        form.insertBefore(input, myBtn);
        qtyOfAdds++;
        document.getElementById('AddedFieldsCount').value = qtyOfAdds;
    }

在服务器端，我读取发布数据，以获取所有字段数据输入。
使用此 C# 代码：

var context = HttpContext.Current; List<string> fieldsList = new List<string>(); string hiddenFieldData = context.Request["AddedFieldsCount"]; int addedFieldsCount = 0; Int32.TryParse(hiddenFieldData, out addedFieldsCount); for (int i = 0; i < addedFieldsCount; i++) { fieldsList.Add(context.Request[i.ToString()]); }

所以，.aspx 页面上的 html：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="StyleSheet.css" rel="stylesheet" />
<script src="JavaScript.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>

<body>
    <form id="form1" runat="server">
    <input type="text"/>
    <button type="button" id="myBtn">ADD</button>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Submit" />
        <br />
        <input id="AddedFieldsCount" name="AddedFieldsCount" type="hidden" />
    </form> 
    <script src="JavaScript.js"></script>

</body>
</html>

请告诉我，您能提供更好的方法吗？

【问题讨论】：

标签： javascript asp.net post http-post

【解决方案1】：

在我使用 jQuery 和 Asp.Net MVC 的情况下，我会按如下方式处理它（注意，这是未经测试的，因此可能会有一些错误），我也不确定文本框将用于什么以及他们将支持哪些文本。

客户端

$(document).ready(function(){
    $('#myBtn').click(function(){
        var $this = $(this),
            $form = $('#form1'),
            $inputs = $('input.tb');
            $newInput = $('<input/>', { type: 'text', name: 'tb' + $inputs.length, class: 'tb' }),

        $inputs.last().after($newInput);
   }
});

服务器端

HttpContext context = HttpContext.Current;
// Retrieve all keys
List<string> keys = from key in context.Request.Form.AllKeys
                    where key.StartsWith("tb")
                    select key;

在不知道您的确切要求和最终用途的情况下，有很多方法可以实现您想要的，并且您当前处理它的方式很好，但也可以使用上述方式。

【讨论】：