asp.net - tutorial - que es asp net

Mostrar hide div usando codebehind

Question

Tengo una DropDownList para la que estoy tratando de mostrar un div OnSelectedIndexChanged pero dice OBJECT REQUIRED .

Estoy vinculando el DataList en ese div:

aspx :

<asp:DropDownList runat="server" ID="lstFilePrefix1" AutoPostBack="True" 
                  OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" >
  <asp:ListItem Text="Prefix1" Value="Prefix1" />
  <asp:ListItem Text="Prefix2" Value="Prefix2" />
  <asp:ListItem Text="Prefix3" Value="Prefix3" />
  <asp:ListItem Text="Prefix1 and Prefix2" Value="Prefix1 and Prefix2" />
  <asp:ListItem Text="Prefix2 and Prefix3" Value="Prefix2 and Prefix3" />
</asp:DropDownList>

<asp:DataList ID="DataList1" runat="server" RepeatColumns="4"  
              CssClass="datalist1"  OnItemDataBound="SOMENAMEItemBound"
              CellSpacing="6" onselectedindexchanged="DataList1_SelectedIndexChanged" 
              HorizontalAlign="Center" Width="500px">

código detrás :

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    if (lstFilePrefix1.SelectedItem.Text=="Prefix2")
    {
        int TotalRows = this.BindList(1);
        this.Prepare_Pager(TotalRows);
        Page.ClientScript.RegisterClientScriptBlock(GetType(), "JScript1", "ShowDiv(''data'');", true);
    }
}

javascript :

function ShowDiv(obj)
{
     var dataDiv = document.getElementById(obj);
     dataDiv.style.display = "block";
}

¿Qué estoy haciendo mal?

Answer 1

Estaba teniendo un problema donde la configuración de element.Visible = true en mi código detrás no tenía ningún efecto en la pantalla real. La solución para mí fue envolver el área de mi página donde quería mostrar el div en un UpdatePanel ASP, que se usa para causar actualizaciones parciales de la pantalla.

http://msdn.microsoft.com/en-us/library/bb399001.aspx

Tener el elemento runat = server me dio acceso a él desde el código de código, y al colocarlo en el Panel de Actualización dejé que se actualice en la pantalla.

Answer 2

Hacer el div

runat="server" 

y hacer

if (lstFilePrefix1.SelectedValue=="Prefix2")
{
    int TotalRows = this.BindList(1);
    this.Prepare_Pager(TotalRows);
    data.Style["display"] = "block";
}

Su método no está funcionando porque el javascript se está representando en la parte superior de la etiqueta del cuerpo, antes de que se genere el div. Tendría que incluir un código para decirle a javascript que espere a que el DOM esté completamente listo para atender su solicitud, lo que probablemente sería más fácil de hacer con jQuery.

Answer 3

Hay algunas formas de manejar los controles de representación / visualización en la página y debe tomar nota de lo que sucede con cada método.

Representación y visibilidad

Hay algunos casos en los que los elementos de su página no tienen que representarse para el usuario debido a algún tipo de valor lógico o de base de datos. En este caso, puede evitar la representación (creando el control en la página web devuelta) por completo. Desearía hacer esto si el control no necesita mostrarse más adelante en el lado del cliente, ya que no importa qué, el usuario que ve la página nunca necesita verla.

Cualquier control o elemento puede tener su visibilidad establecida desde el lado del servidor. Si se trata de un elemento html antiguo, simplemente debe establecer el valor del atributo runat en el server en la página de marcado.

<div id="myDiv" runat="server"></div>

La decisión de hacer que el div o no se pueda hacer ahora se puede hacer en el código detrás de la clase así:

myDiv.Visible = someConditionalBool;

Si se establece en verdadero, se representará en la página y si es falso no se representará en absoluto, ni siquiera se ocultará.

Ocultación lateral del cliente

La ocultación de un elemento se realiza únicamente en el lado del cliente. Es decir, está renderizado pero tiene un estilo de display CSS configurado que le indica a su navegador que no se lo muestre al usuario. Esto es beneficioso cuando desea ocultar / mostrar cosas en función de las aportaciones del usuario. Es importante saber que el elemento PUEDE estar oculto en el lado del servidor siempre que el elemento / control tenga runat=server configurado tal como lo expliqué en el ejemplo anterior.

Escondiéndose en el código detrás de clase

Para ocultar un elemento que desea que se represente en la página, pero oculto, se encuentra otra línea simple de código:

myDiv.Style["display"] = "none";

Si necesita eliminar el lado del servidor de estilo de display , puede hacerlo eliminando el estilo de display o configurándolo en un valor diferente, como en inline o en block (los valores se describen here ).

myDiv.Style.Remove("display");
// -- or --
myDiv.Style["display"] = "inline";

Ocultar en el lado del cliente con javascript

Usando javascript antiguo, puedes ocultar fácilmente el mismo elemento de esta manera

var myDivElem = document.getElementById("myDiv");
myDivElem.style.display = "none";

// then to show again
myDivElem.style.display = "";

jQuery simplifica un poco los elementos ocultos si prefiere usar jQuery:

var myDiv = $("#<%=myDiv.ClientID%>");
myDiv.hide();

// ... and to show 
myDiv.show();

Answer 4

Ocultar en el lado del cliente con javascript

Usando javascript antiguo, puede ocultar fácilmente el mismo elemento de esta manera:

var myDivElem = document.getElementById("myDiv");
myDivElem.style.display = "none";

Luego para mostrar de nuevo:

myDivElem.style.display = "";

jQuery simplifica un poco los elementos ocultos si prefiere usar jQuery:

var myDiv = $("#<%=myDiv.ClientID%>");
myDiv.hide();

... y para mostrar:

myDiv.show();

Answer 5

Otro método (que parece que nadie ha mencionado hasta ahora), es agregar un par KeyValue adicional a la matriz de estilo del elemento. es decir

Div.Style.Add("display", "none");

Esto tiene la ventaja adicional de simplemente ocultar el elemento, en lugar de evitar que se escriba en el DOM para comenzar, a diferencia de la propiedad "Visible". es decir

Div.Visible = false

los resultados en el div nunca se escriben en el DOM.

Edición: Esto debe hacerse en el ''código subyacente'', es decir, el archivo * .aspx.cs.

Answer 6

Puede usar un Panel de ASP.NET estándar y luego establecer su propiedad visible en su código detrás.

<asp:Panel ID="Panel1" runat="server" visible="false" />

Para mostrar el panel en codebehind:

Panel1.Visible = true;

Answer 7

RegisteredClientScriptBlock agrega la secuencia de comandos en la parte superior de la página en el post-back sin garantía de la orden , lo que significa que la llamada se está inyectando después de la declaración de la función (su archivo js con la función está en línea después de su llamada) o cuando es probable que el script intente ejecutar el div todavía no esté allí porque la página aún se está mostrando. Una buena idea es probablemente simular los dos escenarios que describí anteriormente en firebug y ver si obtienes errores similares.

Supongo que esto funcionaría si añades el script en la parte inferior de la página con RegisterStartupScript , que vale la pena al menos.

De todos modos, como una solución alternativa si agrega el atributo runat="server" al div, podrá acceder a él por su id en el código de código (sin volver a js, que genial podría ser), y hacerlo desaparecer como esta:

data.visible = false

Answer 8

<div id="OK1"  runat="server" style ="display:none" >
    <asp:DropDownList ID="DropDownList2" runat="server"></asp:DropDownList>
</div>

código vb.net

  Protected Sub DropDownList1_SelectedIndexChanged(sender As Object, e As EventArgs) Handles DropDownList1.SelectedIndexChanged
    If DropDownList1.SelectedIndex = 0 Then
        OK1.Style.Add("display", "none")
    Else
        OK1.Style.Add("display", "block")
    End If
End Sub