Array
(
)

text box dinâmicos no asp.net

Jose Vagner
   - 03 nov 2012

Galera, bom dia.
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

Robson Robsonalves.net
   - 03 nov 2012


Citação:
Galera, bom dia.
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

Jose Vagner
   - 04 nov 2012

Robson muito obrigado pelas dicas.

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.
#Código

<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.
#Código
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

Robson Robsonalves.net
   - 05 nov 2012

Obs: Aquele terceiro link é meu blog. rsrs

Usar o Clone pode ser uma forma sim!

Outra forma é criar na mão os campos, por exemplo:

#Código

$('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:
#Código
    $('#tabela').find('input[type=text]').each(function(e,obj){
        alert(e + '-' + obj.value);
    });


Fiz um exemplo pronto para você ter uma idéia.

http://jsfiddle.net/pqBMM/

Abraços

Jose Vagner
   - 05 nov 2012

Robson muito obrigado pela ajuda.

Consegui evoluir bem agora estou ajustando o código em breve vou tentar colocar a solução para todos.

Abraços

Joel Rodrigues
   - 02 mar 2013

Fala, Vagner. Beleza?
Conseguiu resolver esse problema? Se sim, poderia compartilhar conosco como fez?

Jose Vagner
   - 05 mar 2013

Desculpe senhores o resultado final não foi satisfatório encontrei mais problemas para utilizar o conteudo dinâmico.
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.