Question

在我的aspx页面上，我使用javascript在客户端动态创建html控件。例如，在页面加载后，您可以在浏览器中单击按钮，通过单击按钮html 输入并显示选择元素。您可以再次单击，此元素（输入和选择）将再次添加。因此，您可以根据需要创建这么多输入和选择（所有这些都使用javascript，没有回发）

用户创建了一些输入并选择并输入了一些信息后，他发布了表格。我希望在服务器端找到所有这些动态添加的元素，并执行一些操作取决于此控件中的值。

如何找到动态添加的元素，以及实现此目的的最佳和最佳方式是什么？

提前致谢。

Answer 1

创建一个循环遍历每个input和select对象的循环，该循环抓取当前对象的名称/ id及其对应的值。然后将这些项添加到数组中，一旦完成循环，将这些值传递给您的aspx文件。

您可以在http://jsfiddle.net/euHeX/查看使用此方法的示例。它目前只是警告值，但您可以轻松修改它以通过ajax将值作为参数传递给您的处理程序aspx文件。代码将根据提供的输入添加新输入或选择框。这当然会被修改以反映您当前的设置。

<强> HTML：

<div id="dynamic"></div>
<input type="button" id="submit-form" value="Submit>>">

JavaScript（使用jQuery）：

function createInput(type){
    for(var i=0; i<5; i++){
        if(type==0){
            var obj = '<input type="text" id="'+i+'" class="dynamicContent">';
        }else if(type==1){
            var obj = '<select id="'+i+'" class="dynamicContent"><option>--Select--</option></select>';
        }
        $("#dynamic").append(obj);
    }
}

function getContent(){
    var inputArray = [];
    $(".dynamicContent").each(function(k,v){
        var o = $(this);
        var oType;
        if(o.is("input")){ oType = "input"; }
        if(o.is("select")){ oType = "select"; }        
        var oID = oType+o.attr("id");
        var oValue = o.val();
        inputArray.push(oID+'='+oValue);
    });
    alert(inputArray);
}

$("#submit-form").click(function(){
    getContent();    
});

// Set type to 0 for input or 1 for select
var type = '1';
createInput(type);

Answer 2

在创建新元素的Javascript中，每次创建元素时都会递增计数器。将计数器的值添加到input元素的名称，以便每个元素都具有唯一的名称。

在发布表单时，将计数器的最终值添加到隐藏的表单字段中。

在服务器端代码中，创建一个从零开始的循环，并一直持续到达到计数器的值。在循环内，获取相应表单字段的已发布值。

Answer 3

添加元素时，为它们分配唯一ID，然后使用Request.Form [“UniqueIdHere”]（C＃）或Request.Form（“UniqueIdHere”）（VB.NET）检索它们的值。

Answer 4

如果你正在使用jQuery，你可以使用.live()来实现这一点，就像蛋糕一样平和！ http://api.jquery.com/live/

Answer 5

我不知道你的控件是否能够像你创建它们一样在回发中存活，但是一种用于访问动态生成的控件的好方法（假设你已经弄清楚如何保留它们）就是做类似的事情。以下内容：

在页面中添加面板。将动态创建的控件添加到此面板。

在OnClick事件处理程序（或其他方法）中，执行以下操作：

foreach (DropDownList ddl in Panel1.Controls.OfType<DropDownList>())
{
    //put code here
}

foreach (TextBox txt in Panel1.Controls.OfType<TextBox>())
{
   //put code here
}

如何从动态添加（使用javascript）元素获取值？

5 个答案: