none
Layout de Componentes Dinâmicos RRS feed

  • Pergunta

  • Boa tarde,

    Tenho uma aplicação em asp.net que cria vários componentes dinâmicos como label, textbox, checkbox, etc. Para criar esses componentes está tudo certo, o problema está em organiza-los na página.

    Por exemplo eu não sei como pular linha para o próximo componente, eu tentei com um label com "br" mas não deu certo, no exemplo do código abaixo todos os componentes ficam em uma mesma linha. O que posso fazer para ajustar isso ? Outra coisa, eles estão sendo inseridos em um Panel, há algum outro componente melhor para que possa ajustar o layout? Como o TableLayout do windows forms ?

    Obrigado.

                Label label = new Label();
                label.Text = "Nome";
    
                TextBox textbox = new TextBox();
    
                Label linha = new Label();
                linha.Text = "<br />";
    
                PanelPrincipal.Controls.Add(label);
                PanelPrincipal.Controls.Add(textbox);
                PanelPrincipal.Controls.Add(linha);
    
                Label label2 = new Label();
                label2.Text = "Nome";
                TextBox textbox2 = new TextBox();
    
                PanelPrincipal.Controls.Add(label2);
                PanelPrincipal.Controls.Add(textbox2);
    Obs. o PanelPrincipal é um fixo na página.

    sexta-feira, 17 de fevereiro de 2012 15:06

Respostas

  • Olá! Boa tarde!

       Você pode usar o webcontrol table.

       Fiz um exemplo de acordo com o código que você postou. Nesse exemplo coloquei um loop até 20 para ilustrar melhor como ficará na tela.

                Table tabela = new Table();
                tabela.BorderWidth = 1;
                tabela.Width = 200;
                TableRow tr;
                TableCell td;
    
    
                #region Cabecalho
    
                TableHeaderRow thr = new TableHeaderRow();
                TableHeaderCell thc = new TableHeaderCell();
    
                thc.Text = "Formulário de exemplo";
                thc.ColumnSpan = 2;
                thr.Cells.Add(thc);
                tabela.Rows.Add(thr);
    
                #endregion
    
                Label lblTitulo;
                TextBox txtNome;
    
                for (int i = 0; i < 20; i++)
                {
                    tr = new TableRow();
    
                    #region Coluna de titulo
                   
                    td = new TableCell();
                    td.HorizontalAlign = HorizontalAlign.Left;
    
                    lblTitulo = new Label();
                    lblTitulo.Text = "Campo - " + (i + 1).ToString();
                    td.Controls.Add(lblTitulo);
    
                    tr.Cells.Add(td);
                    #endregion
    
    
    
                    #region Coluna com o campo
    
                    td = new TableCell();
                    td.HorizontalAlign = HorizontalAlign.Left;
    
                    txtNome = new TextBox();
                    txtNome.Width = 60;
                    txtNome.MaxLength = 100;
                    td.Controls.Add(txtNome);
    
                    tr.Cells.Add(td);
                    #endregion
    
                    tabela.Rows.Add(tr);
                }
    
                PanelPrincipal.Controls.Add(tabela);

    Resultado rodando a aplicação:

    Código html gerado pelo ASP.NET:

    <div id="MainContent_PanelPrincipal">
    	
        
        <table style="border-width:1px;border-style:solid;width:200px;">
    		<tr>
    			<th colspan="2">Formulário de exemplo</th>
    		</tr><tr>
    			<td align="left"><span>Campo - 1</span></td><td align="left"><input name="ctl00$MainContent$ctl02" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 2</span></td><td align="left"><input name="ctl00$MainContent$ctl04" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 3</span></td><td align="left"><input name="ctl00$MainContent$ctl06" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 4</span></td><td align="left"><input name="ctl00$MainContent$ctl08" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 5</span></td><td align="left"><input name="ctl00$MainContent$ctl10" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 6</span></td><td align="left"><input name="ctl00$MainContent$ctl12" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 7</span></td><td align="left"><input name="ctl00$MainContent$ctl14" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 8</span></td><td align="left"><input name="ctl00$MainContent$ctl16" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 9</span></td><td align="left"><input name="ctl00$MainContent$ctl18" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 10</span></td><td align="left"><input name="ctl00$MainContent$ctl20" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 11</span></td><td align="left"><input name="ctl00$MainContent$ctl22" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 12</span></td><td align="left"><input name="ctl00$MainContent$ctl24" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 13</span></td><td align="left"><input name="ctl00$MainContent$ctl26" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 14</span></td><td align="left"><input name="ctl00$MainContent$ctl28" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 15</span></td><td align="left"><input name="ctl00$MainContent$ctl30" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 16</span></td><td align="left"><input name="ctl00$MainContent$ctl32" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 17</span></td><td align="left"><input name="ctl00$MainContent$ctl34" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 18</span></td><td align="left"><input name="ctl00$MainContent$ctl36" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 19</span></td><td align="left"><input name="ctl00$MainContent$ctl38" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 20</span></td><td align="left"><input name="ctl00$MainContent$ctl40" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr>
    	</table>
    </div>
    

    Espero ter lhe ajudado!! Se tiver mais duvidas posta aqui!!

    Se esta resposta lhe ajudou, marque!! Obrigado!!

    Thiago Rogerio
    www.thiagorogerio.com.br
    thiagorogeriobr@hotmail.com

    • Sugerido como Resposta CarlosEduardo Ferreira sexta-feira, 17 de fevereiro de 2012 15:56
    • Marcado como Resposta Adriano2012 sexta-feira, 17 de fevereiro de 2012 17:13
    sexta-feira, 17 de fevereiro de 2012 15:52

Todas as Respostas

  • Olha, depende muito oque vc quer fazer... O ideal seria vc dinformar omotivo pela qual deseja criar os objetos dinamicamente.

    Dependendo vc pode deixar os componentes na tela porem com a propriedade visible = false... vc também pode usar o componente repeater... tudo depende do porque vc quer criar dinamicamente...

    Se ajudou, marque como util ;)


    sexta-feira, 17 de fevereiro de 2012 15:43
  • Olá,

    Você pode criar um HtmlTable  exemplo:

    Label label2 = new Label();
    label2.Text = "Nome";

    HtmlTable tabela = new  HtmlTable();

    HtmlTableRow  linha = new  HtmlTableRow();

    HtmlTableCell coluna = new HtmlTableCell();

    coluna.Controls.Add(label2);

    linha.Cells.Add(coluna);

    tabela.Rows.Add(linha);

    PanelPrincipalControls.Add(tabela);

    Esse é exemplo básico, mas com ele da para adicionar as outras linhas e células e controles uma dica as propriedades de tamanho cor e fundo você define no .style.add("width","100%"). E os atributos voce define em Attributes.Add("class","table_formatada").

    Espero ter ajudado

    sexta-feira, 17 de fevereiro de 2012 15:45
  • É como se fosse uma tela de filtro que vai gerar resultados de uma pesquisa, mas os filtros variam (daí os componentes dinamicos), pode ser textbox, checkbox, etc... Tudo gerado dinamicamente para o usuário preencher.
    sexta-feira, 17 de fevereiro de 2012 15:47
  • Olá! Boa tarde!

       Você pode usar o webcontrol table.

       Fiz um exemplo de acordo com o código que você postou. Nesse exemplo coloquei um loop até 20 para ilustrar melhor como ficará na tela.

                Table tabela = new Table();
                tabela.BorderWidth = 1;
                tabela.Width = 200;
                TableRow tr;
                TableCell td;
    
    
                #region Cabecalho
    
                TableHeaderRow thr = new TableHeaderRow();
                TableHeaderCell thc = new TableHeaderCell();
    
                thc.Text = "Formulário de exemplo";
                thc.ColumnSpan = 2;
                thr.Cells.Add(thc);
                tabela.Rows.Add(thr);
    
                #endregion
    
                Label lblTitulo;
                TextBox txtNome;
    
                for (int i = 0; i < 20; i++)
                {
                    tr = new TableRow();
    
                    #region Coluna de titulo
                   
                    td = new TableCell();
                    td.HorizontalAlign = HorizontalAlign.Left;
    
                    lblTitulo = new Label();
                    lblTitulo.Text = "Campo - " + (i + 1).ToString();
                    td.Controls.Add(lblTitulo);
    
                    tr.Cells.Add(td);
                    #endregion
    
    
    
                    #region Coluna com o campo
    
                    td = new TableCell();
                    td.HorizontalAlign = HorizontalAlign.Left;
    
                    txtNome = new TextBox();
                    txtNome.Width = 60;
                    txtNome.MaxLength = 100;
                    td.Controls.Add(txtNome);
    
                    tr.Cells.Add(td);
                    #endregion
    
                    tabela.Rows.Add(tr);
                }
    
                PanelPrincipal.Controls.Add(tabela);

    Resultado rodando a aplicação:

    Código html gerado pelo ASP.NET:

    <div id="MainContent_PanelPrincipal">
    	
        
        <table style="border-width:1px;border-style:solid;width:200px;">
    		<tr>
    			<th colspan="2">Formulário de exemplo</th>
    		</tr><tr>
    			<td align="left"><span>Campo - 1</span></td><td align="left"><input name="ctl00$MainContent$ctl02" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 2</span></td><td align="left"><input name="ctl00$MainContent$ctl04" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 3</span></td><td align="left"><input name="ctl00$MainContent$ctl06" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 4</span></td><td align="left"><input name="ctl00$MainContent$ctl08" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 5</span></td><td align="left"><input name="ctl00$MainContent$ctl10" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 6</span></td><td align="left"><input name="ctl00$MainContent$ctl12" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 7</span></td><td align="left"><input name="ctl00$MainContent$ctl14" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 8</span></td><td align="left"><input name="ctl00$MainContent$ctl16" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 9</span></td><td align="left"><input name="ctl00$MainContent$ctl18" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 10</span></td><td align="left"><input name="ctl00$MainContent$ctl20" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 11</span></td><td align="left"><input name="ctl00$MainContent$ctl22" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 12</span></td><td align="left"><input name="ctl00$MainContent$ctl24" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 13</span></td><td align="left"><input name="ctl00$MainContent$ctl26" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 14</span></td><td align="left"><input name="ctl00$MainContent$ctl28" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 15</span></td><td align="left"><input name="ctl00$MainContent$ctl30" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 16</span></td><td align="left"><input name="ctl00$MainContent$ctl32" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 17</span></td><td align="left"><input name="ctl00$MainContent$ctl34" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 18</span></td><td align="left"><input name="ctl00$MainContent$ctl36" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 19</span></td><td align="left"><input name="ctl00$MainContent$ctl38" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr><tr>
    			<td align="left"><span>Campo - 20</span></td><td align="left"><input name="ctl00$MainContent$ctl40" type="text" maxlength="100" style="width:60px;" /></td>
    		</tr>
    	</table>
    </div>
    

    Espero ter lhe ajudado!! Se tiver mais duvidas posta aqui!!

    Se esta resposta lhe ajudou, marque!! Obrigado!!

    Thiago Rogerio
    www.thiagorogerio.com.br
    thiagorogeriobr@hotmail.com

    • Sugerido como Resposta CarlosEduardo Ferreira sexta-feira, 17 de fevereiro de 2012 15:56
    • Marcado como Resposta Adriano2012 sexta-feira, 17 de fevereiro de 2012 17:13
    sexta-feira, 17 de fevereiro de 2012 15:52
  • Olá! Boa tarde!

       Você pode usar o webcontrol table.

       Fiz um exemplo de acordo com o código que você postou. Nesse exemplo coloquei um loop até 20 para ilustrar melhor como ficará na tela.

                Table tabela = new Table();
                tabela.BorderWidth = 1;
                tabela.Width = 200;
                TableRow tr;
                TableCell td;
    
    
                #region Cabecalho
    
                TableHeaderRow thr = new TableHeaderRow();
                TableHeaderCell thc = new TableHeaderCell();
    
                thc.Text = "Formulário de exemplo";
                thc.ColumnSpan = 2;
                thr.Cells.Add(thc);
                tabela.Rows.Add(thr);
    
                #endregion
    
                Label lblTitulo;
                TextBox txtNome;
    
                for (int i = 0; i < 20; i++)
                {
                    tr = new TableRow();
    
                    #region Coluna de titulo
                   
                    td = new TableCell();
                    td.HorizontalAlign = HorizontalAlign.Left;
    
                    lblTitulo = new Label();
                    lblTitulo.Text = "Campo - " + (i + 1).ToString();
                    td.Controls.Add(lblTitulo);
    
                    tr.Cells.Add(td);
                    #endregion
    
    
    
                    #region Coluna com o campo
    
                    td = new TableCell();
                    td.HorizontalAlign = HorizontalAlign.Left;
    
                    txtNome = new TextBox();
                    txtNome.Width = 60;
                    txtNome.MaxLength = 100;
                    td.Controls.Add(txtNome);
    
                    tr.Cells.Add(td);
                    #endregion
    
                    tabela.Rows.Add(tr);
                }
    
                PanelPrincipal.Controls.Add(tabela);

    Resultado rodando a aplicação:

    Código html gerado pelo ASP.NET:

    Formulário de exemplo
    Campo - 1<input maxlength="100" name="ctl00$MainContent$ctl02" style="width:60px;" type="text" />
    Campo - 2<input maxlength="100" name="ctl00$MainContent$ctl04" style="width:60px;" type="text" />
    Campo - 3<input maxlength="100" name="ctl00$MainContent$ctl06" style="width:60px;" type="text" />
    Campo - 4<input maxlength="100" name="ctl00$MainContent$ctl08" style="width:60px;" type="text" />
    Campo - 5<input maxlength="100" name="ctl00$MainContent$ctl10" style="width:60px;" type="text" />
    Campo - 6<input maxlength="100" name="ctl00$MainContent$ctl12" style="width:60px;" type="text" />
    Campo - 7<input maxlength="100" name="ctl00$MainContent$ctl14" style="width:60px;" type="text" />
    Campo - 8<input maxlength="100" name="ctl00$MainContent$ctl16" style="width:60px;" type="text" />
    Campo - 9<input maxlength="100" name="ctl00$MainContent$ctl18" style="width:60px;" type="text" />
    Campo - 10<input maxlength="100" name="ctl00$MainContent$ctl20" style="width:60px;" type="text" />
    Campo - 11<input maxlength="100" name="ctl00$MainContent$ctl22" style="width:60px;" type="text" />
    Campo - 12<input maxlength="100" name="ctl00$MainContent$ctl24" style="width:60px;" type="text" />
    Campo - 13<input maxlength="100" name="ctl00$MainContent$ctl26" style="width:60px;" type="text" />
    Campo - 14<input maxlength="100" name="ctl00$MainContent$ctl28" style="width:60px;" type="text" />
    Campo - 15<input maxlength="100" name="ctl00$MainContent$ctl30" style="width:60px;" type="text" />
    Campo - 16<input maxlength="100" name="ctl00$MainContent$ctl32" style="width:60px;" type="text" />
    Campo - 17<input maxlength="100" name="ctl00$MainContent$ctl34" style="width:60px;" type="text" />
    Campo - 18<input maxlength="100" name="ctl00$MainContent$ctl36" style="width:60px;" type="text" />
    Campo - 19<input maxlength="100" name="ctl00$MainContent$ctl38" style="width:60px;" type="text" />
    Campo - 20<input maxlength="100" name="ctl00$MainContent$ctl40" style="width:60px;" type="text" />

    Espero ter lhe ajudado!! Se tiver mais duvidas posta aqui!!

    Se esta resposta lhe ajudou, marque!! Obrigado!!

    Thiago Rogerio
    www.thiagorogerio.com.br
    thiagorogeriobr@hotmail.com

      

    Acredito que esa é a forma mais viavel! 

    sexta-feira, 17 de fevereiro de 2012 15:58
  • Solid,

    nao sei por qual motivo vc esta gerrando esses controles dinamicamente, mas enfim.

    uma das formas é vc criar os controles gerando uma table e adicionando cada controle dentro das celulas da table

    desta forma será porssivel organizar conforma sua nescessidade

    segue o ex:

    http://msdn.microsoft.com/pt-br/library/system.data.datatable.aspx

    boa sorte ai amigão


    Herbert Agles
    Se a resposta contribuiu com a sua necessidade, não se esqueça de marcá-la, assim você beneficiará outros usuários. Sua dúvida também pode ser as de outros!

    sexta-feira, 17 de fevereiro de 2012 16:01
  • ah certo entendi, vou usar o Table mesmo que nesse meu caso resolve perfeitamente.

    As outras respostam foram todas úteis,

    obrigado a todos.

    sexta-feira, 17 de fevereiro de 2012 17:15