Criar Controles Dinamicamente Em CheckBoxList

Hoje dou inicio a uma seria de posts, onde irei mostrar soluções encontradas por mim ou colegas  em relação à problemas enfratados no corrido dia-a-dia.

Deixando desse “bla bla bla” e falando da parte boa da coisa…. Hoje precisei criar dinamicamente controles dentro de um checkboxlist de acordo com a opção selecionada pelo usuário. Sabe quando você tem uma lista enorme de opções e entre elas você tem aquele campo “outros”? Pois pronto, essa era a minha situação, havia uma lista enorme de itens que eram retornados do banco, e o mesmo trazia a opção outros no meio dos itens, e o requisito era que quando o usuário selecionasse outros, fosse mostrado do lado do checkbox uma textbox para o usuário digitar algo. Bem, se o “outros” fosse o ultimo da lista, não teria problema, pois provavelmente eu resolveria da maneira mais rapida, mas talvez não tao agradavel, que seria adicionar um textbox no final do checkboxlist e pronto. Era so ficar setando a visibilidade do mesmo. Mas este não era o caso… E agora?

Bem, a solução encontrada por mim foi desenvolvida em asp.net com jquery. Vamos lá:

 

1. A página .ASPX

<asp:CheckBoxList ID=”chkTimes” runat=”server”>
<asp:ListItem>Outros</asp:ListItem>
<asp:ListItem>Sport</asp:ListItem>
<asp:ListItem>Santa Cruz</asp:ListItem>
<asp:ListItem>Naútico</asp:ListItem>
</asp:CheckBoxList>

Obs: Na página .aspx tenho apenas a minha checkboxlist, com seus respectivos itens, e toda a lógica vai ser no código .js

 

2. Código JavaScript

<script language=”javascript” type=”text/javascript”>

$(document).ready(function() {

//como o checkboxlist é reenderizado como uma tabela, preciso saber quando o evento de click dos seus //inputs internos forem desparados

$(”#<%= chkTimes.ClientID %> input”).click(function() {

if ($(this).is(”:checked”)) {

//o controle proximo ao input é a label com a descrição do checkbox selecionado

var label = $(this).next();

if (label.text().toLowerCase() == “outros”) {

label.after(”<input type=’text’ id=’txtOutros’ />”);

}

} else {

//procura na celula da tabela pelo textbox adicionado

$(this).parent().find(”#txtOutros”).remove();

}

});

});

Obs: Vale ressaltar que o checkboxlist é reenderizado como uma tabela por default. Por isso que sabemos que dentro de uma celula encontramos um input que é o checkbox e uma label que é a descrição do mesmo.

 

3. Finalizando…

Bem, deste modo o nosso controle já esta quase pronto. Ele já esta adicionando o textbox quando o usuário seleciona o mesmo, e removendo o mesmo quando a opção é desmarcada. Mas a pergunta é: Como pegar o que foi digitado em C#?  A resposta é até simples, apesar de ser dificil de ser imaginada. No meu caso eu utilizei um hiddenfield. Onde sempre que é digitado algum caraceter no textbox, é armazenado o valor do textbox no campo escondido. E no C# eu pego o valor que se encontra no hiddenfield. Então, fazendo algumas alterações no nosso código, ele ficara desta maneira:

<script language=”javascript” type=”text/javascript”>

$(document).ready(function() {

//como o checkboxlist é reenderizado como uma tabela, preciso saber quando o evento de click dos seus inputs internos forem desparados

$(”#<%= chkTimes.ClientID %> input”).click(function() {

if ($(this).is(”:checked”)) {

//o controle proximo ao input é a label com a descrição do checkbox selecionado

var label = $(this).next();

if (label.text().toLowerCase() == “outros”) {

label.after(”<input type=’text’ id=’txtOutros’ />”);

$(”#txtOutros”).keyup(function() {

$(”#<%= hfOutros.ClientID %>”).attr(”value”, $(this).attr(”value”));

});

}

} else {

//procura na celula da tabela pelo textbox adicionado

$(this).parent().find(”#txtOutros”).remove();

$(”#<%= hfOutros.ClientID %>”).attr(”value”, “”);

}

});

});

</script>

<asp:HiddenField ID=”hfOutros” runat=”server” />

<asp:CheckBoxList ID=”chkTimes” runat=”server”>

<asp:ListItem>Outros</asp:ListItem>

<asp:ListItem>Sport</asp:ListItem>

<asp:ListItem>Santa Cruz</asp:ListItem>

<asp:ListItem>Naútico</asp:ListItem>

</asp:CheckBoxList>

 

Por hoje é só. Ficamos por aqui. E Espero que esse post tenha sido útil. Até a próxima e abraço à todos!!!