按下按钮动态添加用户控件

时间:2011-10-20 22:32:02

标签: c# javascript asp.net user-controls page-lifecycle

我的问题是我在点击按钮后尝试动态地向页面添加用户控件。听起来很直接。基本上有一个文本字段旁边有一个添加按钮,在添加按钮上单击我想将文本框设置为只读并保留文本,将添加按钮更改为删除并添加新文本字段并在下面添加按钮。实质上,它可以将多个项目添加到列表中。

我提出的解决方案是在添加按钮上单击,我将文本框中的单词添加到包含用户已输入的所有单词的列表,然后将列表添加到会话中。当回发发生时,我只是从会话中获取列表并重新填充已添加的文本框。问题是,在ASP .NET页面生命周期中,按钮单击事件实际发生在页面加载事件之后,所以如果我尝试通过抓取会话中的列表来添加文本框,则它尚未填充。相反,如果我尝试在页面加载完成事件中添加文本框,则按钮事件在单击时不会触发(不完全确定为什么会这样,但可能是因为事件被绑定到这两个事件之间的某个按钮)

所以在稍微调整一下后,看起来只有ASP.NET和C#才能实现这一点,但是可能有一种方法可以用javascript来实现。任何人都有一些如何做到这一点的见解?我对C#非常熟悉,可以使用javascript,但我对ASP .NET很新,所以任何帮助都会受到赞赏。

1 个答案:

答案 0 :(得分:0)

您可以使用JQuery完成您的功能,如此jsFiddle

<强> HTML

<div id="myDiv">
    <div id="item1">
        <input id="txt1" name="txt1" type="text"></input><input id="cmdAdd1" type="button" value="Add"></input>
    </div>
</div>

<强>的Javascript

var itemCount = 1;
$('#cmdAdd1').click(function(){addNewItem();});

function addNewItem(){
    var thisItem = itemCount;
    // Make last text box readonly
    $('#txt' + itemCount).attr('readonly', 'readonly');
    // Change button to Remove button
    $('#cmdAdd' + itemCount).attr('value', 'Remove');
    $('#cmdAdd' + itemCount).unbind();
    $('#cmdAdd' + itemCount).click(function(){removeItem(thisItem );}); 

    // Add new line with text field and button
    itemCount++;
    var newItem = '<div id="item' + itemCount + '">'
    newItem += '<input id="txt' + itemCount + '" name="txt' + itemCount + '" type="text"></input>';
    newItem += '<input id="cmdAdd' + itemCount + '" type="button" value="Add"></input>';
    newItem += "</div>";

    $('#myDiv').append(newItem);
    $('#cmdAdd' + itemCount).click(function(){addNewItem();});    
}

function removeItem(i){
    $('#item' + i).remove();
}

将表单发回服务器后,您可以通过遍历表单控件来遍历字段。

<强> C#

int n=1;
while (Request["txt" + n] != null)
{
    Console.WriteLine(Request["txt" + n]);
    n++;
}