Como desabilitar (ou desaparecer) com textboxs quando seleciono determinada opção em um drop down list?

Question

Boa tarde pessoal, tudo bem?

Seguinte estou finalizando meu projeto de TCC (um sistema para fabrica de brinquedos) desenvolvido em C# no Visual Studio 2010

O problema do título está na tela abaixo:

O usuário deve cadastrar peso liquido e bruto sempre que a unidade for dada em peça, se caso ela for em kg ele nao deve cadastrar o peso (ja que a unidade kg a quantidade já seria o peso)

Então eu preciso que quando o usuário selecione a unidade KG os campos peso liquido e bruto desapareçam ou fiquem inativos. Já que essa é uma ação Client Side tem que ser dinamicamente por Javascript ou Ajax ne?

Mas eu não tenho quase nenhum conhecimento nessas 2 tecnologias, alguém pode me ajudar?

Desde já agradeço :D

Answer 1

Olá Felipe,

Se você não quiser fazer via client side (que é mais complicado), basta setar a propriedade AutoPostBack para true do componente DDL unidade e criar evento para o SelectedIndexChanged.
Neste evento no code behind você faz o tratamento necessário para ocultar/exibir os campos necessários.
Quando o valor do DDL for alterado, será realizado o post e o evento será disparado. Se não tiver utilizando UpdatePanel, será feito o full postback e toda a página será carregada novamente (sem perder os valores), porém, pode-se colocar um UpdatePanel para que seja atualizada somente a área desejada, sem ficar "piscando" toda a tela.

Exemplo

ASPX:

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" 
            onselectedindexchanged="DropDownList1_SelectedIndexChanged" >
</asp:DropDownList>

CODE BEHIND:

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    //tratar visibilidade
}

Answer 2

Cara, um jeito legal de fazer isso sem utilizar o lado servidor para ocultar os controles é com a utilização de javascript e a biblioteca jquery. 

pagina.aspx

<asp:DropDownList runat="server" ID="ddlProduto">
            <asp:ListItem Value="selecione">Selecione</asp:ListItem>
            <asp:ListItem Value="kg">KG</asp:ListItem>
            <asp:ListItem Value="peca">Peça</asp:ListItem>
        </asp:DropDownList>
        <br />
        <asp:TextBox runat="server" ID="txtPesobruto"></asp:TextBox>
        <br />
        <asp:TextBox runat="server" ID="txtPesoliquido"></asp:TextBox>

javascript

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //evento que pega  a mudança do item do dropdown
            $("#<%=ddlProduto.ClientID %>").change(function () {
                
                var x = $(this).find('option:selected').val(); //recupera o value do item selecionado
                var pesobruto = $("#<%=txtPesobruto.ClientID %>"); //substitua o id "txtPesobruto" pelo id do seu textbox
                var pesoliquido = $("#<%=txtPesoliquido.ClientID %>"); //substitua o id "txtPesoliquido" pelo id do seu textbox

                //verifica se o item selecionado é kg
                if (x == "kg") {
                    //caso seja oculta os dois textbox
                    pesobruto.hide();
                    pesoliquido.hide();
                }
                else {
                    //caso contrário exibe-os novamente
                    pesobruto.show();
                    pesoliquido.show();
                }

            });
        });
    </script>

Espero ter ajudado

Forte abraço

---

Juan Nogueira
Visite o meu site:
www.juannogueira.com.br
Se foi útil, marque como resposta e faça a alegria de um programador :)