text box dinâmicos no asp.net
03/11/2012
0
Sou novo em programação to com um problema.
Estou criando uma pagina e preciso utilizar um textbox dinâmico pois na aplicação que estou montando o usuário pode inserir somente um item ou vários. Quero construir uma situação que quando for necessário o usuário seleciona o adicionar novo campo ai um novo campo aparece para ele inserir as informações no final preciso pegar esses dados inseridos nestes textbox e salva-los no banco.
Gostaria de uma ideia tanto para criar estes textbox quanto para pegar a informação gerada por eles posteriormente.
Estou utilizando o visual Studio 2010.
Desde já agradeço.
Att.
Vagner
Jose Vagner
Posts
03/11/2012
Robson Alves
Sou novo em programação to com um problema.
Estou criando uma pagina e preciso utilizar um textbox dinâmico pois na aplicação que estou montando o usuário pode inserir somente um item ou vários. Quero construir uma situação que quando for necessário o usuário seleciona o adicionar novo campo ai um novo campo aparece para ele inserir as informações no final preciso pegar esses dados inseridos nestes textbox e salva-los no banco.
Gostaria de uma ideia tanto para criar estes textbox quanto para pegar a informação gerada por eles posteriormente.
Estou utilizando o visual Studio 2010.
Desde já agradeço.
Att.
Vagner
Vamos lá, temos algumas opções:
Trabalhar com as adições de novos campos via servidor.
Trabalhar com as adições de novos campos via cliente. (Jquery).
Via servidor vamos enfrentar o problema com o postback, todo novo clico do asp.net, os campos incluídos serão perdidos, assim como o valor dos campos, para fazer essa persistência você tem que escrever muitas linhas de códigos, segue um exemplo:
http://ericlemes.com/2009/01/12/dotnet-controlesdinamicos/
Prefiro fazer via Cliente (Browser), sendo assim você pode adicionar quantos quiser e é mais fácil de manipular, apenas um adendo, um objeto adicionado via browser, não é reconhecido pelo servidor (da mesma forma) porém você tem melhores maneiras de capturar o valor e enviar para o servidor.
http://forum.wmonline.com.br/topic/193771-jquery-inserir-campos-usando-fade/
Aqui uma exemplo de criar o form dinâmico.
O fato que você precisa é trabalhoso, se você limitar a quantidade de campos extras que o usuário poderá criar, você pode trabalhar com campos hidden, em fim.
Vai mais um post para você fazer o envio assincrono dos campos criados recentemente.
http://robsonalves.net/portal/jquery-e-cwebmethods/
Meio complicado, mas o seu caso exige bastante code, e no seu caso por ser novato, bastante pesquisa.
Abraços
04/11/2012
Jose Vagner
Esclareceu d+ minha vida aqui mas realmente é muito complexo. Estou tentando ver uma forma de pegar os dados gerados pelo cliente no terceiro link q vc me passou o cara deixa o código todo pronto ta ajudando d+.
Estava fazendo um teste você acha que devo deixa-lo de lado ou pode ser uma saída. Estava clonando os textbox segue o codigo abaixo.
Codigo que esta na pagina asp.
<table border="0" cellpadding="2" cellspacing="4" align = "center">
<tr><td colspan="4" class="bd_titulo">SUBTOPICOS</td></tr>
<tr><td class="bd_titulo" width="10">Titulo</td><td class="bd_titulo">Tempo</td></tr>
<tr class="linhas" id="subtopico">
<td><input type="text" name="descricao[]" style="text-align:center" /></td>
<td><input type="text" name="tempo[]" /></td>
<td><a href="#" title="Remover linha" onclick="removeCampo2(this);"><img src="images/minus1.png" border="0" /></a></td>
<!--<td colspan="4"><a href="#" title="Adicionar item" onclick="addCampo2();"><img src="images/plus1.png" border="0" /></a></td> -->
</tr>
<tr><td colspan="4">
<a href="#" title="Adicionar item" onclick="addCampo2();"><img src="images/plus1.png" border="0" /></a>
</td></tr>
<tr>
<td align="center" colspan="4"><input type="submit" id="Submit1" value="Cadastrar" /></td>
</tr>
</table>
JavaScript que realiza o clone.
function removeCampo2(chamou) {
if ($("tr.linhas").length > 1) {
$(chamou).parent().parent().remove();
}
}
function addCampo2() {
novoCampo = $("tr.linhas:first").clone();
novoCampo.find("input").val("");
novoCampo.insertAfter("tr.linhas:last");
novoCampo.document.write("ClientIDMode=Static");
removeCampo2();
}
A dificuldade maior esta em pegar esses dados e envia-los para o servidor.
Muito obrigado novamente.
Abraços
05/11/2012
Robson Alves
Usar o Clone pode ser uma forma sim!
Outra forma é criar na mão os campos, por exemplo:
$('tr:first').html('<input type='text'></input>');Para pegar os valores eu penso o seguinte:
Você tem que primeiro criar seu container de campos, no seu caso é seu Table, informe um Id nele para facilitar seu trabalho.
Depois via jquery utilizando os seletores, você percorre os campos existente.
Ex:
$('#tabela').find('input[type=text]').each(function(e,obj){
alert(e + '-' + obj.value);
});
Fiz um exemplo pronto para você ter uma idéia.
[url]http://jsfiddle.net/pqBMM/[/url]
Abraços
05/11/2012
Jose Vagner
Consegui evoluir bem agora estou ajustando o código em breve vou tentar colocar a solução para todos.
Abraços
02/03/2013
Joel Rodrigues
Conseguiu resolver esse problema? Se sim, poderia compartilhar conosco como fez?
05/03/2013
Jose Vagner
Mas como paliativo coloquei campos ocultos limitando a 10 que apareciam quando o usuário solicitava mas péssima pratica mas precisei fazer desta maneira para apresentar o protótipo.
Apos a apresentação um amigo me disse que seria possível resolver este problema utilizando JSON mas não pesquisei.
Abraços.
Clique aqui para fazer login e interagir na Comunidade :)
