Usuário com melhor resposta
Criar textbox dinamicamente em vertical (exemplo de código que gera horizontalmente aqui)

Pergunta
-
Prezados colegas,
Estou querendo gerar textbox`s dinamicamente, onde o usuário vai digitar a quantidade de textbox que vai precisar, conforme exemplo no site abaixo.
http://www.codeproject.com/Articles/14450/Dynamic-creation-of-ASP-NET-server-controls-on-fly
Fiz os testes e funciona perfeitamente como eu quero, com apenas um detalhe, ele gera os textbox na horizontal, um do lado do outro, quero fazer exatamente as mesmas coisas porém na vertical, gerar um textbox em baixo do outro.
Se alguém puder me ajudar, não consegui manipular o código.
Desde já Obrigado.
- Editado Angelo.Net quinta-feira, 8 de agosto de 2013 19:12 correção ortografica
Respostas
-
Uma outra forma de gerar Textbox dinamicamente é usando o Repeater e dessa forma você consegue usar um css para montar o layout da forma que quiser:
<asp:Repeater ID="rpTextBox" runat="server"> <ItemTemplate> <div class="meuCss"> <p><%# Eval("Title") %></p> <asp:TextBox runat="server" ID="TextId" OnTextChanged="TextId_TextChanged" AutoPostBack="true" /> <asp:HiddenField Value='<%# Eval("ID") %>' ID="hfID" runat="server" /> </div> </ItemTemplate> </asp:Repeater> <asp:Label ID="Label1" runat="server" />
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) MontaTextBox(5); } private void MontaTextBox(int p) { List<MyTexBox> itens = new List<MyTexBox>(); for (int i = 0; i < p; i++) { itens.Add(new MyTexBox() { ID = i, Title = string.Format("Item {0}", i.ToString()) }); } rpTextBox.DataSource = itens; rpTextBox.DataBind(); } protected void TextId_TextChanged(object sender, EventArgs e) { TextBox txt = (TextBox)sender; RepeaterItem obj = ((RepeaterItem)txt.NamingContainer); Label1.Text = ((HiddenField)obj.FindControl("hfID")).Value; } } public class MyTexBox { public int ID { get; set; } public string Title { get; set; } }
- Editado Pedro Ogm sexta-feira, 9 de agosto de 2013 16:22
- Marcado como Resposta Angelo.Net sexta-feira, 9 de agosto de 2013 17:30
- Não Marcado como Resposta Angelo.Net sexta-feira, 9 de agosto de 2013 17:54
- Marcado como Resposta Angelo.Net segunda-feira, 12 de agosto de 2013 20:17
-
Tente esse código
protected void Button1_Click(object sender, EventArgs e) { for (int i = 0; i < rpTextBox.Items.Count; i++) { TextBox tb = (TextBox)rpTextBox.Items[i].FindControl("TextId"); Label1.Text += ", " + tb.Text; } }
- Sugerido como Resposta Seilor Bonancio JuniorModerator sexta-feira, 9 de agosto de 2013 18:56
- Marcado como Resposta Angelo.Net segunda-feira, 12 de agosto de 2013 13:08
-
Fiz umas alterações no exemplo, olha como ficou
<asp:Repeater ID="rpTextBox" runat="server"> <ItemTemplate> <div style="clear:both"> <div style="width:200px; float:left"> <p><%# Eval("Title") %></p> <asp:TextBox runat="server" ID="TextId" OnTextChanged="TextId_TextChanged" AutoPostBack="true" /> <asp:HiddenField Value='<%# Eval("ID") %>' ID="hfID" runat="server" /> </div> <div style="width:400px; float:left; margin-top:40px;"> <asp:Repeater runat="server" ID="rpTextBox4"> <ItemTemplate> <div style="width:200px; float:left"> <asp:TextBox runat="server" ID="TextId_4" OnTextChanged="TextId_TextChanged" AutoPostBack="true" /> <asp:HiddenField Value='<%# Eval("ID") %>' ID="hfID" runat="server" /> </div> </ItemTemplate> </asp:Repeater> </div> </div> </ItemTemplate> </asp:Repeater>
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) MontaTextBox(5); } private void MontaTextBox(int p) { List<MyTexBox> itens = new List<MyTexBox>(); for (int i = 0; i < p; i++) { itens.Add(new MyTexBox() { ID = i, Title = string.Format("Item {0}", i.ToString()) }); } rpTextBox.DataSource = itens; rpTextBox.DataBind(); for (int i = 0; i < rpTextBox.Items.Count; i++) { List<MyTexBox> itens4 = new List<MyTexBox>(); itens4.Clear(); for (int b = 0; b < 4; b++) { itens4.Add(new MyTexBox() { ID = b, Title = string.Format("Item {0}", b.ToString()) }); } Repeater rp = (Repeater)rpTextBox.Items[i].FindControl("rpTextBox4"); rp.DataSource = itens4; rp.DataBind(); } } protected void TextId_TextChanged(object sender, EventArgs e) { TextBox txt = (TextBox)sender; RepeaterItem obj = ((RepeaterItem)txt.NamingContainer); Label1.Text = ((HiddenField)obj.FindControl("hfID")).Value; } protected void Unnamed_Click(object sender, EventArgs e) { StringBuilder sb = new StringBuilder(); for (int i = 0; i < rpTextBox.Items.Count; i++) { TextBox tb = (TextBox)rpTextBox.Items[i].FindControl("TextId"); sb.AppendFormat("Valor Principal: {0}", tb.Text); sb.AppendLine(); Repeater rp = (Repeater)rpTextBox.Items[i].FindControl("rpTextBox4"); for (int b = 0; b < rp.Items.Count; b++) { TextBox tb2 = (TextBox)rp.Items[b].FindControl("TextId_4"); sb.AppendFormat("Valor 4 Textbox: {0} -> {1}", b, tb2.Text); } } Label1.Text = sb.ToString(); } public class MyTexBox { public int ID { get; set; } public string Title { get; set; } }
- Marcado como Resposta Angelo.Net segunda-feira, 12 de agosto de 2013 18:46
Todas as Respostas
-
Olá Angelo,
Você pode fazer isso inserindo um quebra de linha (vulgo <br/>) ou via CSS, exemplo:
Break-Line
meuPainel.Controls.Add(new TextBox() { ID = "txtNome" }); meuPainel.Controls.Add(new LiteralControl("<br />"));
CSS
var txt = new TextBox() { ID = "txtNome" }; txt.Style.Add("display", "block"); this.Controls.Add(txt);
Vitor Mendes | http://www.vitormendes.com.br/
"Ajuda teu semelhante a levantar a sua carga, porém, não a carregá-la." (Pitágoras)
-
Prezado Vitor,
Fiz algumas adaptações mas não funcionava, veja o código original:
aspx:
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="DynamicControls.WebForm1" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML> <HEAD> <title>WebForm1</title> <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR"> <meta content="C#" name="CODE_LANGUAGE"> <meta content="JavaScript" name="vs_defaultClientScript"> <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema"> <script language="javascript"> <!-- function fnValidate() { if(document.Form1.txtColumnNo.value=="") { alert("please enter number of dynamic textbox to be created."); document.Form1.txtColumnNo.focus(); return false; } } function fnChkMandatory(object) { var obj = new Object(); obj= object; if(object.value == '') { alert("please enter some value."); } return false; } function fnChkMandatorySubmit(lintCount) { var vControl; var iCounter ; for(var lintIndex=0;lintIndex<parseInt(lintCount);lintIndex++) { iCounter = eval(lintIndex+1) ; vControl =eval("document.Form1.txtOption"+iCounter+".value"); if(vControl=="") { alert("please enter some value."); eval("document.Form1.txtOption"+iCounter+".focus()"); return false; break; } } } //--> </script> </HEAD> <body MS_POSITIONING="GridLayout"> <form id="Form1" method="post" runat="server"> <TABLE id="Table1" style="BORDER-RIGHT: white 6px solid; BORDER-TOP: white 6px solid; BORDER-LEFT: white 6px solid; BORDER-BOTTOM: white 6px solid" cellSpacing="0" cellPadding="0" width="80%" align="center" border="0"> <tr> <td></td> </tr> <TR> <TD></TD> </TR> <TR> <TD class="content" id="tblPH" style="HEIGHT: 99px" align="center" width="100%"> <!-- BEGIN OF CONTENT --><br> <TABLE id="Table2" style="WIDTH: 494px; HEIGHT: 85px" cellSpacing="1" cellPadding="1" border="0"> <TR> <TD class="bkg" style="WIDTH: 200px" align="right" width="200" height="20"><asp:label id="lblQuestion_EN" runat="server" CssClass="bkg"> Number of Textbox controls</asp:label>* </TD> <TD height="20"> <asp:textbox id="txtColumnNo" runat="server" Width="110px" MaxLength="300"></asp:textbox></TD> </TR> <TR> <TD align="center" colSpan="3" height="20"><asp:button id="btnAddTextBox" runat="server" CssClass="actionbttn" Width="80px" Text="add textbox"></asp:button> <asp:button id="btnReset" runat="server" CssClass="actionbttn" Width="80px" Text="clear"></asp:button></TD> </TR> </TABLE> <TABLE id="Table4" cellSpacing="0" cellPadding="0" width="70%" border="0" runat="server"> <TR> <TD></TD> </TR> <TR> <TD align="center"><asp:placeholder id="PHOptions" runat="server"></asp:placeholder></TD> </TR> </TABLE> <TABLE id="Table3" cellSpacing="0" cellPadding="0" width="70%" border="0"> <TR> <TD vAlign="top"></TD> </TR> <TR> <TD vAlign="top" align="center" height="20"> <asp:label id="lblDisplay" runat="server" CssClass="bkg"></asp:label></TD> </TR> </TABLE> </TD> </TR> <TR> <TD></TD> </TR> </TABLE> </form> </body> </HTML>
aspx.cs:
using System; using System.Collections; using System.ComponentModel; using System.Data; using System.Drawing; using System.Web; using System.Web.SessionState; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; namespace DynamicControls { /// <summary> /// Summary description for WebForm1. /// </summary> public class WebForm1 : System.Web.UI.Page { protected System.Web.UI.WebControls.PlaceHolder PHOptions; protected System.Web.UI.HtmlControls.HtmlTable Table4; protected System.Web.UI.WebControls.Label lblQuestion_EN; protected System.Web.UI.WebControls.TextBox txtColumnNo; protected System.Web.UI.WebControls.Button btnAddTextBox; protected System.Web.UI.WebControls.Button btnReset; protected static int intColCount; protected System.Web.UI.WebControls.TextBox txtBox; protected System.Web.UI.WebControls.Label lblDisplay; protected System.Web.UI.WebControls.Button btnSubmitButton; private void Page_Load(object sender, System.EventArgs e) { // Put user code to initialize the page here if(Page.IsPostBack) { if(txtColumnNo.Text != "" ) CreateTextBoxControls(); } } #region Web Form Designer generated code override protected void OnInit(EventArgs e) { // // CODEGEN: This call is required by the ASP.NET Web Form Designer. // InitializeComponent(); base.OnInit(e); } /// <summary> /// Required method for Designer support - do not modify /// the contents of this method with the code editor. /// </summary> private void InitializeComponent() { this.btnAddTextBox.PreRender += new System.EventHandler(this.btnAddTextBox_PreRender); this.btnAddTextBox.Click += new System.EventHandler(this.btnAddTextBox_Click); this.btnReset.Click += new System.EventHandler(this.btnReset_Click); this.Load += new System.EventHandler(this.Page_Load); } #endregion private void btnAddTextBox_PreRender(object sender, System.EventArgs e) { btnAddTextBox.Attributes.Add("OnClick","return fnValidate();"); } private void btnAddTextBox_Click(object sender, System.EventArgs e) { } private void CreateTextBoxControls() { intColCount= Convert.ToInt32(txtColumnNo.Text.ToString().Trim()); int rowCount =0; Table tblHead = new Table(); if (tblHead.GetType().ToString().Equals("System.Web.UI.WebControls.Table") && PHOptions.FindControl("tblHead") == null ) { tblHead.ID = "tblHead"; tblHead.EnableViewState = true; tblHead.BorderWidth=Unit.Pixel(0); tblHead.CellSpacing = 0; tblHead.CellPadding = 1; tblHead.Width = Unit.Percentage(96); TableRow rH = new TableRow(); TableCell cH = new TableCell(); cH.Text = "Table Heading"; cH.Font.Bold = true; rH.Cells.Add(cH); tblHead.Rows.Add(rH); PHOptions.Controls.Add(tblHead); if(intColCount>0) rH.Visible =true; else rH.Visible =false; } Table tblHelp = new Table(); if (tblHelp.GetType().ToString().Equals("System.Web.UI.WebControls.Table") && PHOptions.FindControl("tblHelp") == null ) { tblHelp.ID = "tblHelp"; } tblHelp.EnableViewState = true; tblHelp.BorderWidth=Unit.Pixel(1); tblHelp.CellSpacing = 0; tblHelp.CellPadding = 1; tblHelp.BorderWidth = Unit.Pixel(1); tblHelp.Width = Unit.Percentage(96); for (int rowIndex=0; rowIndex<=rowCount; rowIndex++) { TableRow r = new TableRow(); TableRow rWeight= new TableRow(); //r.ID = "rLabel"; TableRow rID = new TableRow(); for (int clIndex=0; clIndex<intColCount; clIndex++) { TableCell c = new TableCell(); txtBox = new TextBox(); if (txtBox.GetType().ToString().Equals("System.Web.UI.WebControls.TextBox") && PHOptions.FindControl("txtOption"+(clIndex+1).ToString()) == null ) { txtBox.ID ="txtOption"+(clIndex+1).ToString(); //txtBox.Text = (clIndex+1).ToString(); txtBox.Width= Unit.Pixel(45); txtBox.MaxLength = 2; c.BorderWidth=Unit.Pixel(1); c.Width=Unit.Pixel(80); c.Controls.Add(txtBox); r.Cells.Add(c); txtBox.PreRender += new System.EventHandler(this.txtBox_PreRender); } } tblHelp.Rows.Add(r); } TableRow rSubmit = new TableRow(); TableCell cSubmit = new TableCell(); cSubmit.ColumnSpan = intColCount ; btnSubmitButton = new Button(); btnSubmitButton.ID ="btnSubmit"; btnSubmitButton.Text= "Submit"; if( PHOptions.FindControl("btnSubmit") == null ) cSubmit.Controls.Add(btnSubmitButton); cSubmit.Attributes.Add("Align","Center"); rSubmit.Cells.Add(cSubmit); tblHelp.Rows.Add(rSubmit); PHOptions.Controls.Add(tblHelp); this.btnSubmitButton.PreRender += new System.EventHandler(this.btnSubmitButton_PreRender); this.btnSubmitButton.Click += new System.EventHandler(this.btnSubmitButton_Click); } private void btnSubmitButton_Click(object sender, System.EventArgs e) { for (int clIndex=0; clIndex<intColCount; clIndex++) { string boxName = "txtOption" + (clIndex+1).ToString(); TextBox tb = PHOptions.FindControl(boxName) as TextBox; if( lblDisplay.Text != "" ) lblDisplay.Text+=","+tb.Text ; else lblDisplay.Text=tb.Text ; } } private void btnSubmitButton_PreRender(object sender, System.EventArgs e) { btnSubmitButton.Attributes.Add("OnClick","return fnChkMandatorySubmit("+intColCount+");"); } private void txtBox_PreRender(object sender, System.EventArgs e) { for (int clIndex=0; clIndex<intColCount; clIndex++) { string boxName = "txtOption" + (clIndex+1).ToString(); TextBox tb = PHOptions.FindControl(boxName) as TextBox; tb.Attributes.Add("OnBlur","return fnChkMandatory("+boxName+");"); } } private void btnReset_Click(object sender, System.EventArgs e) { Server.Transfer("WebForm1.aspx"); } } }
Fiz estas mudanças que você mencionou e não adiantou, será que é alguma especificidade deste código?
Obrigado
-
Uma outra forma de gerar Textbox dinamicamente é usando o Repeater e dessa forma você consegue usar um css para montar o layout da forma que quiser:
<asp:Repeater ID="rpTextBox" runat="server"> <ItemTemplate> <div class="meuCss"> <p><%# Eval("Title") %></p> <asp:TextBox runat="server" ID="TextId" OnTextChanged="TextId_TextChanged" AutoPostBack="true" /> <asp:HiddenField Value='<%# Eval("ID") %>' ID="hfID" runat="server" /> </div> </ItemTemplate> </asp:Repeater> <asp:Label ID="Label1" runat="server" />
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) MontaTextBox(5); } private void MontaTextBox(int p) { List<MyTexBox> itens = new List<MyTexBox>(); for (int i = 0; i < p; i++) { itens.Add(new MyTexBox() { ID = i, Title = string.Format("Item {0}", i.ToString()) }); } rpTextBox.DataSource = itens; rpTextBox.DataBind(); } protected void TextId_TextChanged(object sender, EventArgs e) { TextBox txt = (TextBox)sender; RepeaterItem obj = ((RepeaterItem)txt.NamingContainer); Label1.Text = ((HiddenField)obj.FindControl("hfID")).Value; } } public class MyTexBox { public int ID { get; set; } public string Title { get; set; } }
- Editado Pedro Ogm sexta-feira, 9 de agosto de 2013 16:22
- Marcado como Resposta Angelo.Net sexta-feira, 9 de agosto de 2013 17:30
- Não Marcado como Resposta Angelo.Net sexta-feira, 9 de agosto de 2013 17:54
- Marcado como Resposta Angelo.Net segunda-feira, 12 de agosto de 2013 20:17
-
-
Tente esse código
protected void Button1_Click(object sender, EventArgs e) { for (int i = 0; i < rpTextBox.Items.Count; i++) { TextBox tb = (TextBox)rpTextBox.Items[i].FindControl("TextId"); Label1.Text += ", " + tb.Text; } }
- Sugerido como Resposta Seilor Bonancio JuniorModerator sexta-feira, 9 de agosto de 2013 18:56
- Marcado como Resposta Angelo.Net segunda-feira, 12 de agosto de 2013 13:08
-
Prezado Pedro, obrigado.
Muito bom, tentei fazer mais uma coisa aqui.
Por exemplo com o Montatextbox(5) eu gero os 5 textxbox, eu criei outro repeater dentro de um div que que a cada 1 tb gerado no repeater1, será gerado 4 tb no repeater2 que eu preciso que fico organizado da seguinte forma (como se fosse 4 tbs do repeater2 na direçao de 1 tb do repeater1) :
Gerar 4 vezes tb no repeater2 a cada 1 tb do repeater1 pra mim é tranquilo, o que estou com dificuldade é em organizar os 4 textbox do repeater2 da forma que fiz acima colocando textbox sem serem os dinamicos.
Com css eu só conseguiria organizar tudo que estivesse dentro do repeater. Pensei numa lógica proxima a isso:
x = 140px //não sei se tem como eu somar os pixels, sabe me orientar nisso?
y = 30px//somar o top de forma que fique abaixo do gerado dinamicamente de id anterior
itens.Add(new MyTexBox() { ID = i, Title = string.Format("Item {0}", i.ToString()) });
TextBox tb = (TextBox)rpTextBox.Items[i].FindControl("TextId");
tb.ID = "tb";
tb.Style["Position"] = "Absolute";
tb.Style["Top"] = "27px";
tb.Style["Left"] = "140px";
DivVinc.Controls.Add(tb);TextBox tb = (TextBox)rpTextBox.Items[i].FindControl("TextId");
tb.ID = "tb";
tb.Style["Position"] = "Absolute";
tb.Style["Top"] = "27px";
tb.Style["Left"] = x + "140px";
DivVinc.Controls.Add(tb);TextBox tb = (TextBox)rpTextBox.Items[i].FindControl("TextId");
tb.ID = "tb";
tb.Style["Position"] = "Absolute";
tb.Style["Top"] = y + "27px";
tb.Style["Left"] = "140px";
DivVinc.Controls.Add(tb);TextBox tb = (TextBox)rpTextBox.Items[i].FindControl("TextId");
tb.ID = "tb";
tb.Style["Position"] = "Absolute";
tb.Style["Top"] = Y + "27px";
tb.Style["Left"] = x + "140px";
DivVinc.Controls.Add(tb);Não é bem assi mo código, mas acho que dá pra entender minha idéia, então dentro do for, através do id de cada tb gerado, entraria neste tratamento individualmente do tb gerado de forma a posiciona-lo como coloquei manualmente no print, isso a cada 4 gerado. aí com esse código posicionaria os 4 primeiros (que ficam noutro tipo, mas tipo do lado do textbox do repeater1) e depois mais 4 que ficam posicionados tipo do lado do outro tb e assim por diante.
Em suma, queria uma forma de conseguir posiocionar de de 4 em 4 esses tbs através do código que gera dinamicamente cada tb pelo for. Com isso resolvo por completo meu problema.
Editado:
Estava dando uma olhada neste exemplo:
http://support.microsoft.com/kb/317794/pt-br
Mostra um pouco da forma de posicionar pelo código
Obrigado
- Editado Angelo.Net segunda-feira, 12 de agosto de 2013 14:18
-
Fiz umas alterações no exemplo, olha como ficou
<asp:Repeater ID="rpTextBox" runat="server"> <ItemTemplate> <div style="clear:both"> <div style="width:200px; float:left"> <p><%# Eval("Title") %></p> <asp:TextBox runat="server" ID="TextId" OnTextChanged="TextId_TextChanged" AutoPostBack="true" /> <asp:HiddenField Value='<%# Eval("ID") %>' ID="hfID" runat="server" /> </div> <div style="width:400px; float:left; margin-top:40px;"> <asp:Repeater runat="server" ID="rpTextBox4"> <ItemTemplate> <div style="width:200px; float:left"> <asp:TextBox runat="server" ID="TextId_4" OnTextChanged="TextId_TextChanged" AutoPostBack="true" /> <asp:HiddenField Value='<%# Eval("ID") %>' ID="hfID" runat="server" /> </div> </ItemTemplate> </asp:Repeater> </div> </div> </ItemTemplate> </asp:Repeater>
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) MontaTextBox(5); } private void MontaTextBox(int p) { List<MyTexBox> itens = new List<MyTexBox>(); for (int i = 0; i < p; i++) { itens.Add(new MyTexBox() { ID = i, Title = string.Format("Item {0}", i.ToString()) }); } rpTextBox.DataSource = itens; rpTextBox.DataBind(); for (int i = 0; i < rpTextBox.Items.Count; i++) { List<MyTexBox> itens4 = new List<MyTexBox>(); itens4.Clear(); for (int b = 0; b < 4; b++) { itens4.Add(new MyTexBox() { ID = b, Title = string.Format("Item {0}", b.ToString()) }); } Repeater rp = (Repeater)rpTextBox.Items[i].FindControl("rpTextBox4"); rp.DataSource = itens4; rp.DataBind(); } } protected void TextId_TextChanged(object sender, EventArgs e) { TextBox txt = (TextBox)sender; RepeaterItem obj = ((RepeaterItem)txt.NamingContainer); Label1.Text = ((HiddenField)obj.FindControl("hfID")).Value; } protected void Unnamed_Click(object sender, EventArgs e) { StringBuilder sb = new StringBuilder(); for (int i = 0; i < rpTextBox.Items.Count; i++) { TextBox tb = (TextBox)rpTextBox.Items[i].FindControl("TextId"); sb.AppendFormat("Valor Principal: {0}", tb.Text); sb.AppendLine(); Repeater rp = (Repeater)rpTextBox.Items[i].FindControl("rpTextBox4"); for (int b = 0; b < rp.Items.Count; b++) { TextBox tb2 = (TextBox)rp.Items[b].FindControl("TextId_4"); sb.AppendFormat("Valor 4 Textbox: {0} -> {1}", b, tb2.Text); } } Label1.Text = sb.ToString(); } public class MyTexBox { public int ID { get; set; } public string Title { get; set; } }
- Marcado como Resposta Angelo.Net segunda-feira, 12 de agosto de 2013 18:46
-