2012-12-21 16 views
6

Sto provando ad aggiungere controlli sulla pagina C# di asp.net, quando l'utente fa clic su aggiungi un altro. Sto usando la tabella e voglio aggiungere i controlli in quella tabella. Fammi sapere anche come ottenere i valori dei controlli nel codice una volta che il modulo è stato inviato al server.Aggiunge dinamicamente i comandi javascript Asp.net C#

risposta

8

Ecco un esempio di jQuery, spero che sia d'aiuto!

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> 

codice dietro

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 />"); 
      }); 
    } 
} 

Ed ecco un altro se si vuole fare tutto sul server.Problem con questo approccio è che quando si aggiungono i controlli in modo dinamico scompaiono al postback e devi continuare a ricrearli nel Page_Load che aggiungerà un'elaborazione sostanziale al tuo server, suggerirei di attaccare con l'opzione 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" /> 

codice dietro:

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

Se si aggiungono controlli lato client dinamici, saranno inclusi nell'oggetto Request.Form come valori. Si può iterare sul contenuto di questa raccolta. Si prega di notare che la tabella dovrebbe essere contenuta all'interno di un elemento del modulo altrimenti non verranno pubblicati.

+0

è possibile aggiungere tramite server, una volta ho fatto al lato client. ma qui voglio farlo su serveride, così come posso ottenere tutti i valori in codebehind –

+0

Solo come parte di un repost, che è goffo da una prospettiva UI IMHO. Usando Request.Form * puoi * ottenere i valori nel codebehind. –

+0

È possibile utilizzare i pannelli di aggiornamento, ma sono effettivamente ripubblicati e causano molti sprechi sul lato server. –

Problemi correlati