Read data on server side from dynamically generated inputs

StackOverflow https://stackoverflow.com/questions/22743302

Pergunta


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:

    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:

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:

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

Foi útil?

Solução

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.

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.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top