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!!!
Escrito por fpimentel88 
