Fatal编程技术网
  • javascript/
  • 动态添加控件javascript Asp.net C#

动态添加控件javascript Asp.net C#

javascript asp.net

动态添加控件javascript Asp.net C#,javascript,asp.net,Javascript,Asp.net,我试图在asp.net c#页面上添加控件，当用户单击“添加另一个”时。我正在使用表，并希望在该表中附加控件。还请让我知道，一旦表单提交到服务器，我将如何在代码中获取控件值 如果要添加动态客户端控件，它们将作为值出现在Request.Form对象中。您可以迭代此集合的内容。请注意，该表必须包含在表单元素中，否则它们将无法发布。这里是一个jQuery示例，希望对您有所帮助 ASPX: <head id="Head1" runat="server"> <title>

我试图在asp.net c#页面上添加控件，当用户单击“添加另一个”时。我正在使用表，并希望在该表中附加控件。还请让我知道，一旦表单提交到服务器，我将如何在代码中获取控件值

如果要添加动态客户端控件，它们将作为值出现在Request.Form对象中。您可以迭代此集合的内容。请注意，该表必须包含在表单元素中，否则它们将无法发布。

这里是一个jQuery示例，希望对您有所帮助

ASPX:

 <head id="Head1" runat="server">
    <title>Controls</title>
    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnAdd").click(function () {
                var field = $("#field").val();
                var input = "<input name='parameters' id='field' type='text' />";
                var newRow = "<tr><td>" + field + "</td><td>" + input + "</td></tr>";
                $('#controls').append(newRow);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="field" type="text" />
        <input id="btnAdd" type="button" value="Add" />
        <table id="controls" cellpadding="10" cellspacing="10">
        </table>
        <asp:Button ID="btnProcess" runat="server" Text="Process" OnClick="Process" />
    </div>
    </form>
</body>

<asp:TextBox ID="txtFieldName" runat="server"></asp:TextBox>
<asp:Button ID="btnAddControl" runat="server" Text="Add" OnClick="Add" />
<asp:Table EnableViewState="true" CellPadding="2" CellSpacing="2" BorderWidth="2" BorderStyle="Solid" GridLines="Both" ID="table"
    runat="server">
    <asp:TableHeaderRow>
        <asp:TableHeaderCell Text="Field" />
        <asp:TableHeaderCell Text="Value" />
    </asp:TableHeaderRow>
</asp:Table>
<asp:Button ID="btnPost" runat="server" Text="Post" OnClick="Post" />

public List<string> rows = new List<string>();

protected void Page_Load(object sender, EventArgs e)
{
    if (ViewState["Rows"] != null)
    {
        rows = (List<string>)ViewState["Rows"];
        if (rows.Count > 0)
        {
            foreach (var row in rows)
            {
                TextBox textbox = new TextBox();
                textbox.Width = 300;
                table.Rows.Add(GetRow(row,textbox));
            }
        }
    }
}

protected void Add(object sender, EventArgs e)
{
    string row = txtFieldName.Text;
    if (!String.IsNullOrEmpty(row))
    {
        rows.Add(txtFieldName.Text);

        TextBox textbox = new TextBox();
        textbox.Width = 300;
        table.Rows.Add(GetRow(row, textbox));
        ViewState["Rows"] = rows;
    }
}

private TableRow GetRow(string text, WebControl txtName)
{
    TableRow tr = new TableRow();

    TableCell cell1 = new TableCell();
    cell1.Text = text;

    TableCell cell2 = new TableCell();
    cell2.Controls.Add(txtName);

    tr.Cells.Add(cell1);
    tr.Cells.Add(cell2);

    return tr;
}

protected void Post(object sender, EventArgs e)
{
    if (table.Rows.Count > 0)
    {
        System.Diagnostics.Debugger.Break();
        //i=1 because we want to skip the header row
        for (int i = 1; i < table.Rows.Count; i++)
        {
            //Examine the values and do further processing...
            string field = table.Rows[i].Cells[0].Text;
            string value = ((TextBox)table.Rows[i].Cells[1].Controls[0]).Text;
        }
    }
}
代码隐藏：

 <head id="Head1" runat="server">
    <title>Controls</title>
    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnAdd").click(function () {
                var field = $("#field").val();
                var input = "<input name='parameters' id='field' type='text' />";
                var newRow = "<tr><td>" + field + "</td><td>" + input + "</td></tr>";
                $('#controls').append(newRow);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="field" type="text" />
        <input id="btnAdd" type="button" value="Add" />
        <table id="controls" cellpadding="10" cellspacing="10">
        </table>
        <asp:Button ID="btnProcess" runat="server" Text="Process" OnClick="Process" />
    </div>
    </form>
</body>

<asp:TextBox ID="txtFieldName" runat="server"></asp:TextBox>
<asp:Button ID="btnAddControl" runat="server" Text="Add" OnClick="Add" />
<asp:Table EnableViewState="true" CellPadding="2" CellSpacing="2" BorderWidth="2" BorderStyle="Solid" GridLines="Both" ID="table"
    runat="server">
    <asp:TableHeaderRow>
        <asp:TableHeaderCell Text="Field" />
        <asp:TableHeaderCell Text="Value" />
    </asp:TableHeaderRow>
</asp:Table>
<asp:Button ID="btnPost" runat="server" Text="Post" OnClick="Post" />

public List<string> rows = new List<string>();

protected void Page_Load(object sender, EventArgs e)
{
    if (ViewState["Rows"] != null)
    {
        rows = (List<string>)ViewState["Rows"];
        if (rows.Count > 0)
        {
            foreach (var row in rows)
            {
                TextBox textbox = new TextBox();
                textbox.Width = 300;
                table.Rows.Add(GetRow(row,textbox));
            }
        }
    }
}

protected void Add(object sender, EventArgs e)
{
    string row = txtFieldName.Text;
    if (!String.IsNullOrEmpty(row))
    {
        rows.Add(txtFieldName.Text);

        TextBox textbox = new TextBox();
        textbox.Width = 300;
        table.Rows.Add(GetRow(row, textbox));
        ViewState["Rows"] = rows;
    }
}

private TableRow GetRow(string text, WebControl txtName)
{
    TableRow tr = new TableRow();

    TableCell cell1 = new TableCell();
    cell1.Text = text;

    TableCell cell2 = new TableCell();
    cell2.Controls.Add(txtName);

    tr.Cells.Add(cell1);
    tr.Cells.Add(cell2);

    return tr;
}

protected void Post(object sender, EventArgs e)
{
    if (table.Rows.Count > 0)
    {
        System.Diagnostics.Debugger.Break();
        //i=1 because we want to skip the header row
        for (int i = 1; i < table.Rows.Count; i++)
        {
            //Examine the values and do further processing...
            string field = table.Rows[i].Cells[0].Text;
            string value = ((TextBox)table.Rows[i].Cells[1].Controls[0]).Text;
        }
    }
}

public List rows=new List（）；
受保护的无效页面加载（对象发送方、事件参数e）
{
如果（ViewState[“行”！=null）
{
行=（列表）视图状态[“行”]；
如果（rows.Count>0）
{
foreach（行中的变量行）
{
TextBox TextBox=新建TextBox（）；
textbox.Width=300；
table.Rows.Add（GetRow（row，textbox））；
}
}
}
}
受保护的无效添加（对象发送方，事件参数e）
{
字符串行=txtFieldName.Text；
如果（！String.IsNullOrEmpty（行））
{
添加（txtFieldName.Text）；
TextBox TextBox=新建TextBox（）；
textbox.Width=300；
table.Rows.Add（GetRow（row，textbox））；
视图状态[“行”]=行；
}
}
private TableRow GetRow（字符串文本，WebControl txtName）
{
TableRow tr=新的TableRow（）；
TableCell cell1=新的TableCell（）；
单元格1.文本=文本；
TableCell cell2=新的TableCell（）；
cell2.Controls.Add（txtName）；
tr.Cells.Add（cell1）；
tr.Cells.Add（cell2）；
返回tr；
}
受保护的无效帖子（对象发送者、事件参数）
{
如果（table.Rows.Count>0）
{
System.Diagnostics.Debugger.Break（）；
//i=1，因为我们想跳过标题行
对于（int i=1；i
是否可以通过服务器添加，我曾经在客户端添加过。但在这里，我想在服务器端这样做，这样我就可以将codebehindOnly中的所有值作为repost的一部分来获取，从UI的角度来看，这很笨拙。通过使用Request.Form，您可以获得代码隐藏中的值。您可以使用更新面板，但它们实际上是一个装饰好的重新发布，造成了大量服务器端的浪费。是的，这就是我想到的javascript。