動態添加JavaScript的Asp.net C＃

我想asp.net C＃頁面上添加控件控件，當用戶點擊添加另一個。我正在使用表格，並希望在該表格中附加控件。另外讓我知道，一旦表單提交給服務器，我將如何在代碼中獲取控件值。動態添加JavaScript的Asp.net C＃

2012-12-21 Saghir A. Khatri

這裏有一個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 />"); 
      }); 
    } 
}

這裏的代碼是另一個，如果你想要做這種方法的server.Problem一切，當你動態添加控件他們消失後回來，你必須不斷重新創建它們在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; 
     } 
    } 
}

來源

2012-12-21 16:58:26

如果您要添加動態客戶端控件，它們將在的Request.Form對象的值。你可以遍歷這個集合的內容。請注意，該表必須包含在表單元素中，否則它們不會被髮布。

來源

2012-12-21 12:00:38

是有可能通過添加服務器，我曾經做過的客戶端。但在這裏我想在服務器端做，所以我可以得到代碼隱藏的所有值 –

僅作爲轉發的一部分，這是從用戶界面透視恕我直言笨重。通過使用Request.Form，您可以*獲取代碼隱藏中的值。 –

你可以使用更新面板，但他們實際上是一個dolvel-up轉發，並導致大量的浪費服務器端。 –

動態添加JavaScript的Asp.net C＃

回答

相關問題