1

Como é sabido, o formato padrão de layout de um radiobutton ou checkbox em controles de lista no Asp.Net WebForms é sempre algo como

 <label></label><input>

Gostaria de saber se existe alguma maneira decente de alterar o layout de exibição para torná-lo compatível com as classes de formulário do Bootstrap.

3
  • Qual versão do bootstrap você pretende usar? Commented 26/02/2014 às 13:54
  • 4
    É algo legado? Se for algo novo recomendo usar MVC, você tem mais liberdade na apresentação. Commented 26/02/2014 às 14:08
  • É legado sim, cara. Commented 26/02/2014 às 14:24

2 Respostas 2

2

No Asp.Net WebForms os controles geram um output em html controlado pelo proprio Asp.Net, da seguinte forma:

a tag asp.net:

<asp:CheckBoxList id="check1" AutoPostBack="True" TextAlign="Right" OnSelectedIndexChanged="Check" runat="server">
    <asp:ListItem>Item 1</asp:ListItem>
    <asp:ListItem>Item 2</asp:ListItem>
</asp:CheckBoxList>

Gera um output em html de:

<table id="check1">
    <tr>
        <td><input id="check1_0" type="checkbox" name="check1$0" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;check1$0\&#39;,\&#39;\&#39;)&#39;, 0)" value="Item 1" /><label for="check1_0">Item 1</label></td>
    </tr><tr>
        <td><input id="check1_1" type="checkbox" name="check1$1" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;check1$1\&#39;,\&#39;\&#39;)&#39;, 0)" value="Item 2" /><label for="check1_1">Item 2</label></td>
    </tr>
</table>

Em todo controle WebControl é possível definir um Css através da propriedade CssClass="string", por exemplo:

<asp:TextBox id="TextBox1" ForeColor="Red" CssClass="minhaClassCSS" />

output:

<input type=text class="minhaClassCSS" style="ForeColor:red">

Infelizmente não é fácil saber como cada controle WebControl será gerado em HTML, isto é, o WebForms facilita a vida do programador na contrução do layout porem tira dele o poder de manipula-lo. Essa é uma grande vantagem do asp.net MVC o poder volta a mão do programador porem agora é sua responsabilidade escrever um HTML bem feito.

No caso de utilizar o Twitter-Bootstrap com o WebForms não existe uma maneira fácil, será necessário criar as class no seu css semelhante a aquele que você deseja utilizar do Bootstrap e torcer para que o output dos seus controles sejam compatíveis.

Fonte: MSDN

1
  • Corrigi criando um css adapter e classes auxiliares pra resolver esses layouts quebrados. Pelo visto é a única solução mais simples mesmo. Outra alternatica seria criar userControls customizados, mas já seria demais pra pouco benefício. Commented 26/02/2014 às 20:55
0

Só seguir a recomendação do próprio site do Bootstrap, adicionando as classes em cada Tag. Para Forms, o link é o seguinte:

http://getbootstrap.com/css/#forms

Usarei a versão 3.1.1 como exemplo (versão mais atual quando esta resposta foi escrita).

Normalmente usa-se o seguinte padrão:

<div class="form-group">
    <label for="exemplo">Exemplo</label>
    <input type="text" class="form-control" id="exemplo" placeholder="Exemplo">
</div>

Veja a seção CheckBoxes and Radios. Tem um exemplo mais ou menos assim:

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>

Como não sei como é seu form, o ideal é ler os exemplos e ir mudando as divs de acordo com a sua necessidade.

2
  • Não foi isso que eu perguntei, cara. Commented 26/02/2014 às 16:25
  • 1
    Bom, então elabore melhor sua pergunta, porque não está claro. Commented 26/02/2014 às 17:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .