Ocultar o hacer visible un control Panel

jesmi89 · #1 (**permalink**) 16/11/2012, 18:15

Hola, lo que pasa es que lo que quiero hacer es que el usuario selecciones de un listbox un elemento y dependiendo del elemento seleccionado se muestre el panel, el cual en su interior contiene un gridview, pero no sucede nada, entonces no se que este haciendo mal. Lo que tengo hasta le momento es esto

En el evento Load puse

Código Javascript:

Ver originalif (ListBox1.SelectedValue == "Petición")
{
     Panel1.Visible = true;
}

Gracias

jhonwilliams · #2 (**permalink**) 16/11/2012, 23:20

Hola

Ya te fijaste si el ListBox1 tiene la propiedad AutoPostBack en true

Saludos

jesmi89 · #3 (**permalink**) 17/11/2012, 10:00

si asi es la propiedad esta en true, pero al igual no sucede nada

jhonwilliams · #4 (**permalink**) 17/11/2012, 10:19

Y en que evento tienes estas tres lineas?

Código C#:

Ver originalif (ListBox1.SelectedValue == "Petición")
    {
         Panel1.Visible = true;
    }

Saludos

jesmi89 · #5 (**permalink**) 17/11/2012, 10:30

lo estoy poniendo en el evento del ListBox1_SelectedIndexChanged o esto debe de ponerse mejor en el load, sera por eso?

jhonwilliams · #6 (**permalink**) 17/11/2012, 10:54

En teroria como lo tienes debe de funcionar, ahora mas tarde hago una prueba y te comento.

Saludos

jhonwilliams · #7 (**permalink**) 17/11/2012, 11:38

Listo, dice asi:

estoy casi seguro que tu AutoPostBack esta en FALSE, mira este ejemplo y funciona:

Código html:

Ver original<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True"
            onselectedindexchanged="ListBox1_SelectedIndexChanged">
            <asp:ListItem>Panel 1</asp:ListItem>
            <asp:ListItem>Panel 2</asp:ListItem>
            <asp:ListItem>Ninguno</asp:ListItem>
        </asp:ListBox>
    
    </div>
    <asp:Panel ID="Panel1" runat="server" Visible="False">
        ESTE ES EL PANEL 1
    </asp:Panel>
    <asp:Panel ID="Panel2" runat="server" Visible="False">
        ESTE ES EL PANEL 2
    </asp:Panel>
    </form>
</body>
</html>

Código C#:

Ver originalprotected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
        {
            switch (ListBox1.SelectedItem.Value )
            {
                case "Panel 1":
                    Panel1.Visible = true;
                    Panel2.Visible = false;
                    break;
                case "Panel 2":
                    Panel2.Visible = true;
                    Panel1.Visible = false;
                    break;
                default:
                    Panel1.Visible = false;
                    Panel2.Visible = false;
                    break;
            }
        }

jesmi89 · #8 (**permalink**) 17/11/2012, 13:20

Hola gracias por tomarte la molestia de comprobarlo tu mismo como se podria hacer, ps mira lo he implementado asi como tu me indicas, y ya me asegure y la propiedad Autopostback del ListBox esta en True. Y ps bueno la verdad no he manejado mucho esto de los Case, pero segun entiendo el default hace que el elemento en este caso el Panel este oculto una vez se cargue la página, y solo se muestre cuando se cumplan alguna de las condiciones de los case verdad?

Y ps bueno cuando pruebo la página, me aparece el panel es decir el contenido de este y ps cuando selecciono alguna de las opciones del list se recarga la página y ps no se no logro lo q quiero hacer. Mira asi fue como lo puse

Código C#:

Ver originalprivate void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
        {
 
            switch (ListBox1.SelectedItem.Value)
            {
                case "Petición":
                    Panel3.Visible = true;
                    break;
                case "Queja":
                    // otra opción
                    break;
                default:
                    Panel3.Visible = false;
                    break;
            }
        }

jhonwilliams · #9 (**permalink**) 17/11/2012, 13:38

El ListoBox carga los items predefinidos o desde base de datos?

Saludos

jesmi89 · #10 (**permalink**) 17/11/2012, 13:41

Son predefinidos, los agregue mediante diseño y no mediante código

jhonwilliams · #11 (**permalink**) 17/11/2012, 13:51

Muestrame el codigo del ASPX, solo la seccion del ListBox

jesmi89 · #12 (**permalink**) 17/11/2012, 13:57

mira es este

Código ASP:

Ver original<asp:ListBox ID="ListBox1" runat="server" Height="23px" 
                                        Rows="1" AutoPostBack="True">
      <asp:ListItem>Seleccione...</asp:ListItem>
      <asp:ListItem>Petición</asp:ListItem>
      <asp:ListItem>Queja</asp:ListItem>
      <asp:ListItem>Reclamo</asp:ListItem>
      <asp:ListItem>Sugerencia</asp:ListItem>
</asp:ListBox>

jhonwilliams · #13 (**permalink**) 17/11/2012, 14:11

Si, colocas un BreakPoint la aplicacion si para ahi?

Saludos

jesmi89 · #14 (**permalink**) 17/11/2012, 14:54

oye en verdad no conozco muy bn la utilidad de los breakpoint asi q no se hacer lo q dices. PEro en verdad gracias por tus respuestas seguire intentado

DeivisAndres · #15 (**permalink**) 17/11/2012, 20:34

jesmi89 parece que en tu codigo aspx le falta una propiedad al ListBox (onselectedindexchanged), por que no pruebas de esta manera:

Código Javascript:

Ver original<asp:ListBox ID="ListBox1" runat="server" Height="23px" Rows="1" 
        AutoPostBack="True" onselectedindexchanged="ListBox1_SelectedIndexChanged">
      <asp:ListItem>Seleccione...</asp:ListItem>
      <asp:ListItem>Petición</asp:ListItem>
      <asp:ListItem>Queja</asp:ListItem>
      <asp:ListItem>Reclamo</asp:ListItem>
      <asp:ListItem>Sugerencia</asp:ListItem>
    </asp:ListBox>
    <asp:Panel ID="Panel1" runat="server" Visible="False">
        ESTE ES EL PANEL 1
    </asp:Panel>
    <asp:Panel ID="Panel2" runat="server" Visible="False">
        ESTE ES EL PANEL 2
    </asp:Panel>
    <asp:Panel ID="Panel3" runat="server" Visible="False">
        ESTE ES EL PANEL 3
    </asp:Panel>
    <asp:Panel ID="Panel4" runat="server" Visible="False">
        ESTE ES EL PANEL 4
    </asp:Panel>

Código Javascript:

Ver originalprotected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
        {
            switch (ListBox1.SelectedItem.Value)
            {
                case "Petición":
                    Panel1.Visible = true;
                    Panel2.Visible = false;
                    Panel3.Visible = false;
                    Panel4.Visible = false;
                    break;
                case "Queja":
                    Panel2.Visible = true;
                    Panel1.Visible = false;                    
                    Panel3.Visible = false;
                    Panel4.Visible = false;
                    break;
                case "Reclamo":
                    Panel3.Visible = true;
                    Panel1.Visible = false;
                    Panel2.Visible = false;                    
                    Panel4.Visible = false;
                    break;
                case "Sugerencia":
                    Panel4.Visible = true;
                    Panel1.Visible = false;
                    Panel2.Visible = false;
                    Panel3.Visible = false;                    
                    break;
                default:                    
                    Panel1.Visible = false;
                    Panel2.Visible = false;
                    Panel3.Visible = false;
                    Panel4.Visible = false;
                    break;
            }
        }

Me cuentas si te funciona.

jhonwilliams · #16 (**permalink**) 17/11/2012, 20:35

Son para hacer un "paso a paso" o seguimiento de codigo a la aplicacion.

Saludos

DeivisAndres · #17 (**permalink**) 17/11/2012, 20:40

Y para que no se te recargue toda la pagina mete todo en un "UpdatePanel":

Código Javascript:

Ver original<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
 
        // Aqui el contenido
 
    </ContentTemplate> 
</asp:UpdatePanel>

jhonwilliams · #18 (**permalink**) 18/11/2012, 10:07

Ya probaste lo que dice DeivisAndres, porque mirando tu codiog y mi ejemplo en el tuyo no esta en lazado el evento y el control, mira:

el mio

Código:

 <asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True"
           onselectedindexchanged="ListBox1_SelectedIndexChanged">

El tuyo

Código:

<asp:ListBox ID="ListBox1" runat="server" Height="23px"
                                        Rows="1" AutoPostBack="True">

Posiblemente ese es el problema.

Saludos