none
¿ Puedo evitar el postBack en un dropdownlist ? RRS feed

  • Pregunta

  • De nuevo acudiendo a sus conocimientos.

    Tengo una pagina en la que se ha definido una hoja de estilos que simula una serie de tabs ( os pongo una imagen para que podais ver a lo que me refiero ).

    El caso es que cada vez que cargas la pagina esta se posiciona en la primera pestaña, en una de estas pestañas tengo un dropdownlist, el caso es que cuando cambio la seleccion de este dropdown se deben de realizar una serie de acciones en la pagina.cs para cargar otros datos. El caso es que al recargar se me vuelve a la primera pestaña cuando yo querria que se quedara en la pestaña en la que esta.

    He probado a a hacer un Response.Redirect ("pagina.aspx#tab3") y esto funciona a medias ya que pierdo los valores que he cambiado porque en teoria el redirect hace una recarga de la pagina. Si no hago el redirect se va a la pestaña uno y cuando pincho en la 3 los datos estan cambiados correctamente pero claro hay que hacer que el usuario se posicione cada vez.

    La pregunta es: ¿ Es posible ejecutar el metodo onSelectindexChange del dropdown sin necesidad de hacer un post ?, si esto no es posible, ¿ Como podria posicionarme en la pestaña que quiera cuando carga la pagina ?quizas con una funcion javascript a la que le pase el parametro de la pestaña desde el metodod onSelectIndexChange ? una ayudita por favor.

    Os pongo tanto el css como el codigo de la pagina.aspx por si podeis echarme una mano.

    .divcontenidotab {
        width: auto;
        height:auto;
        margin: auto;
        margin-top:10px;
        margin-left:40px;
        margin-right:40px;
        margin-bottom:20px;
        padding-bottom:30px;
    }
    
    .tabA
    {
    	;
    	display: block;
    	width: 90%;
    	height: 100%;
        margin: 60px auto;
        top: 0px;
        left: 0px;
    }
     
    .tabS
    {
    	;
    	display: block;
    	top: 20px;                  /* Distancia de la pestaña al contenedor */
    	left: 0;    
    	min-height: 350px;
        height:auto;
    
        width:100%;
        padding: 0px 10px;          /* Indentacion de la pestaña */
    	background-color: white;    /* Fondo de la seccion cuando se carga la pagina */
        border:3px solid #335599;   /* Borde de la seccion */  
    	border-radius: 5px;
    	/* z-index: 0; */ /* Si lo quito no parece dar problemas */
    }
    
    .tabH0
    {
    	;
    	font-weight: normal;
    	width: 0px;         /* Largo de la pestaña */
    	height: auto;       /* Ancho de la pestaña */
    	margin-top: -42px;  /* Posicion de la pestaña */
    	margin-left: 0px;
    	padding-top: 8px;
    	color: white;       /* Color de la letra de la pestaña */
    	border-radius: 5px 5px 0 0;  /* Redondeado del borde de la pestaña */
    }
    
    .tabH
    {
    	;
    	font-weight: normal;
    	width: 150px;       /* Largo de la pestaña */
    	height:100%;       /* Ancho de la pestaña */
    	margin-top: -42px;  /* Posicion de la pestaña */
    	margin-left: 0px;
    	padding-top: 8px;
    	color: white;       /* Color de la letra de la pestaña */
        
        border:2px solid violet;
        border-bottom:none;
    
        background-color: #aabbcc;   /* Fondo de la pestañas inactivas */
    	border-radius: 5px 5px 0 0;  /* Redondeado del borde de la pestaña */
    }
    
    .tabE
    {
    	display: block;
    	line-height: 20px;
    	text-align: center;
    	text-decoration: none;
    	color: inherit;
    	outline: 0 none;
    }
    
    .tabS:target
    {
    	background-color: white;     /* Fondo de la seccion activa */
    	z-index: 2;  /* Si lo quito no cambian las ventanas solo las pestañas */
    }
    
    .tabS:target .tabH
    {
        color: #335599;
        font-style:italic;
        font-weight:bold;
    	background-color: white;     /* Fondo de la pestaña activa */
        border: 3px solid #335599;
        border-bottom:none;
        height:31px;
        z-index: 2; /* Si lo quito no parece dar problemas */
    }
    
    .tabP
    {
        margin:auto;
        margin-top:30px;
        margin-left:10px;
        margin-bottom:40px;
        color:black;
    }
    
    
    .tabS:first-child
    {
    	z-index:1;
        background-color:white;
    }
    
    
    .tabS:nth-child(1) .tabH
    {
    	left: 2px; /* Distancia de la pestaña 0 */
    }
    
    .tabS:nth-child(2) .tabH
    {
    	left: 20px; /* Distancia de la pestaña 1 */
    }
    
    .tabS:nth-child(3) .tabH
    {
    	left: 185px; /* Distancia de la pestaña 2*/
    }
    
    .tabS:nth-child(4) .tabH
    {
    	left: 350px;    /* Distancia de la pestaña 3 */
    }

    ese es el del css y ahora la parte de la pagina donde estan las pestañas

    <div class="divcontenidotab">
    
            <article class="tabA">
                
                <section id="tab0" class="tabS">
    		        <h2 class="tabH0"><a href="#tab0" class="tabE">0</a></h2>
    		        <p class="tabP">Seleccione una de las pestañas de datos </p>
    	        </section>
    
    	        <section id="tab1" class="tabS">
    		        <h2 class="tabH"><a href="#tab1" class="tabE">Crear Almacen</a></h2>
                    
                    <div><br/><br/></div>
                    
                    <div class="divformulario ancho60">
                            
                        <div class="divformulario ">
                            <label class="personaetiqueta"> Nombre: </label>
                            <asp:TextBox class="personadato" ID="almacenNombre" runat="server" />
                        </div>
                            
                        <div class="divformulario">
                            <label class="personaetiqueta"> Direccion: </label>
                            <asp:TextBox class="personadato" ID="almacenDireccion" runat="server" />
                        </div>
    
                        <div class="divformulario">
                            <label class="personaetiqueta"> Responsable: </label>
                            <asp:DropDownList ID="ddlListaResponsables" class="ddl" runat="server">
                                <asp:ListItem Text="" Value="0"></asp:ListItem>
                            </asp:DropDownList>
                        </div>
                        
                        <div class="divformulario">
                            <label class="personaetiqueta"> Almacen Principal: </label>
                            <asp:DropDownList ID="almacenPrincipal" class="ddl" runat="server">
                                <asp:ListItem Text="No" Value="true"></asp:ListItem>
                                <asp:ListItem Text="Si" Value="false"></asp:ListItem>
                            </asp:DropDownList>
                        </div>
                            
                        <div>
                            <br/>
                                <asp:button ID="btCrearAlmacen" runat="server" Text=" Guardar " class="boton azul centrado" OnClick="CrearAlmacen"/>
                            <br/>
                        </div>
                             
                    </div>
    	        </section>
    
    	        <section id="tab2" class="tabS">
    		        <h2 class="tabH"><a href="#tab2" class="tabE">Crear Material</a></h2>
    		        <div>&nbsp;<br /><br /></div>
                    <div class="divformulario ancho60">
                            
                        <div class="divformulario ">
                            <label class="personaetiqueta"> Nombre: </label>
                            <asp:TextBox class="personadato" ID="materialNombre" runat="server" />
                        </div>
                        
                        <div class="divformulario ">
                            <label class="personaetiqueta"> Stock: </label>
                            <asp:TextBox class="personadato" ID="materialStock" runat="server" />
                        </div>
                            
                        <div>
                            <br/>
                                <asp:button ID="btCrearMaterial" runat="server" Text=" Guardar " class="boton azul centrado" OnClick="CrearMaterial"/>
                            <br/>
                        </div>
                            
                    </div>
    	        </section>
    	
    	        <section id="tab3" class="tabS">
    		        <h2 class="tabH"><a href="#tab3" class="tabE">Asignar Técnicos</a></h2>
    		        <p class="tabP"></p>
                    <div>&nbsp;<br /><br /></div>
                    <div class="divformulario ancho80">    
                       
                        <div class="divformulario">
                            <label class="personaetiqueta"> Elegir Central: </label>
                            <asp:DropDownList ID="ddlListaCentrales" class="ddl" runat="server" OnSelectedIndexChanged="TecnicosAsignados" AutoPostBack="true" 
                                EnableViewState="true" ViewStateMode="Enabled" >
                            </asp:DropDownList>
                        </div>
    
                        <div class="divformulario ancho 20">
                            <label class="personaetiqueta">Técnicos que usan este Almacen</label>
                            <asp:DropDownList ID="chListaTecnicos" class="ddl" runat="server" RepeatDirection="Vertical" >
    
                            </asp:DropDownList>
                        </div>
    
                        <div class="divformulario ancho 20">
                            <label class="personaetiqueta">Técnicos sin Almacen</label>
                            <asp:DropDownList ID="chListaTecnicosSinCentral" class="ddl" runat="server" RepeatDirection="Vertical">
                            </asp:DropDownList>
                        </div>
    
                    </div>
    	        </section>
    
            </article>
        </div>

     se me olvido la imagen


    • Editado Veleras miércoles, 22 de julio de 2015 18:50 completar informacion
    miércoles, 22 de julio de 2015 18:48

Respuestas

Todas las respuestas

  • hola

    para evitarla recarga de la pagina vas a tener usar el UpdatePanel

    de esta forma solo se actualiza la seccion que defines en el template y no toda la pagina

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    • Marcado como respuesta Veleras jueves, 23 de julio de 2015 8:19
    miércoles, 22 de julio de 2015 18:58
  • Puedes usar jquery ajax para hacer lo que necesitas.

    <script type="text/javascript">
    $(document).ready(function () {

    var Url = { resourceCites: "<%: ResolveUrl("~/Pages/countries.aspx/citesList")%>" }

    $("#ddlCountries").change(function () {

        var countryId =  { countryId : $('#ddlCountries').val() }
        var params = JSON.stringify(countryId);

        $.ajax({
                     type: "POST",
                     url: Url.resourceCites,
                     data: params,
                     contentType: "application/json; charset=utf-8",
                     dataType: "json",
                     success: function (data) {
                            $.each(data.d, function (i, val) {
                                $("#ddlCity").append($("<option></option>").val(val.cityId).html(val.cityName));
                            });
                        },
                        async: false,
                        error: function (XMLHttpRequest) {
                            alert("ERROR");
                        }
                    });    
    })

    }

            <WebMethod()> _
            <ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
            Public Shared Function citesList(ByVal countryId As String) As List(Of City)
                Dim dtObj As DataTable = New DataTable

                dtObj = _city.GetByCountryId(countryId )
                Dim rows As List(Of City) = New List(Of City)

                If dtObj.Rows.Count > 0 Then
                    For Each rowCity As DataRow In dtObj.Rows
                        Dim rowss= New City
                        rowss.cidyId= rowCity ("ID")
                        rowss.cityName= rowCity ("name")
                        rows.Add(rows)
                    Next

                    Return registros
                Else
                    Return registros
                End If
            End Function


    alpauul

    miércoles, 22 de julio de 2015 19:32
  • Muchas gracias Leandro, 

    Fácil y sencillo sin apenas cambiar nada y soluciona perfectamente la situación.

    jueves, 23 de julio de 2015 8:20