如何在单击按钮时调用新的Web用户控件

时间:2015-05-19 10:13:11

标签: c# asp.net

我在aspx页面上添加了一个按钮,我想要点击该按钮进行新的Web用户控制。例如。如果一个人有多个地址,他可以点击该按钮,并可以添加address1,address2,address3

 
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table>
        <tr>
            <td>
                <asp:Label ID="Lbl_name" runat="server" Text="Name"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="Lbl_age" runat="server" Text="Age"></asp:Label>
            </td>
            <td>
                 <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            </td>

        </tr>
    </table>
<!-- Add the web user control in asp -->
<WebUserControl:WebTag id="MyControl" runat="server"/>
        <asp:Button ID="Btn_add" runat="server" Text="Add" />
        <br /> 
        <td>
                <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
            </td>
<br /><br  />

    </div>
    </form>
</body>
</html>

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++;
}