動態添加控件javascript Asp.net C＃

Question

我試圖在asp.net c＃頁面上添加控件，當用戶點擊時添加另一個。 我正在使用表，並希望在該表中追加控件。 另請告訴我，一旦將表單提交給服務器，我將如何在代碼中獲取控件值。

Answer 1

這是一個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>

代碼背后

protected void Process(object sender, EventArgs e)
{
    var parameters = Request.Form["parameters"];
    if (parameters != null && parameters.Count() > 0)
    {
        //Now you have access to the textbox values,perform any additional processing
        parameters.Split(',').ToList().
            ForEach(p =>
            {
                Response.Write(p + "<br />");
            });
    }
}

如果你想在服務器上做所有事情，這是另一個。使用這種方法的問題是，當你動態添加控件時，它們會在回發后消失，你必須在Page_Load重新創建它們，這將為你的服務器增加大量處理，我建議堅持使用jQuery選項

ASPX：

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

Answer 2

如果要添加動態客戶端控件，它們將作為值位於Request.Form對象中。 您可以迭代此集合的內容。 請注意，該表必須包含在表單元素中，否則將不會發布。

動態添加控件javascript Asp.net C＃

問題描述

2 個解決方案

解決方案1
8 已采納 2012-12-21 16:58:26

解決方案2
1 2012-12-21 12:00:38

動態添加控件javascript Asp.net C＃

問題描述

2 個解決方案

解決方案1 8 已采納 2012-12-21 16:58:26

解決方案2 1 2012-12-21 12:00:38

解決方案1
8 已采納 2012-12-21 16:58:26

解決方案2
1 2012-12-21 12:00:38