简体   繁体   English

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

[英]Read data on server side from dynamically generated inputs


In my case i have 就我而言
<input type="text"/>
And button, that on click add additinal inputs to page. 然后单击按钮,将附加输入添加到页面。
To add inputs i use this JavaScript: 要添加输入,我使用以下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;
    }

On server side i read post data, to get all field data input. 在服务器端,我读取发布数据,以获取所有现场数据输入。
Using this C# code: 使用此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()]); }

So, and html on .aspx page: 因此,在.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>

Tell me please, can you advice more better way? 请告诉我,您能提供更好的建议吗?

In my case using jQuery and Asp.Net MVC I'd approach it as follows (note, this is untested so there may be a few mistakes), I'm also unsure as to what the text boxes will be used for and what text they'll support. 在我使用jQuery和Asp.Net MVC的情况下,我将按以下方式进行处理(请注意,这未经测试,因此可能存在一些错误),我也不确定该文本框将用于什么文本。他们会支持。

Client side 客户端

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

Server side 服务器端

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

Without knowing your exact requirements and end use there are as always many ways to achieve what you want and the way you've currently handled it is fine but the way above could also be used. 在不知道您的确切要求和最终用途的情况下,总是有许多方法可以实现所需的功能,并且您当前处理该方法的方式还不错,但是也可以使用上述方法。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM