web-dev-qa-db-fra.com

Montrer masquer div en utilisant le code derrière

J'ai une DropDownList pour laquelle j'essaie de montrer une divOnSelectedIndexChanged mais elle dit OBJECT REQUIRED.

Je lie la DataList dans cette 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">

code derrière :

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'est-ce que je fais mal?

asp.netdrop-down-menu
24
ravi

Faire la div 

runat="server"

et fait 

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

Votre méthode ne fonctionne pas car le code javascript est affiché en haut de la balise body, avant le rendu de la div. Vous devez inclure du code pour indiquer au javascript d'attendre que le DOM soit complètement prêt à répondre à votre demande, ce qui serait probablement plus facile à faire avec jQuery.

20
Nick Spiers

Vous pouvez utiliser un standard ASP.NET Panel puis définir sa propriété visible dans votre code.

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

Pour afficher le panneau dans codebehind:

Panel1.Visible = true;

68
Dan Diplo

Il y a plusieurs façons de gérer le rendu/l'affichage des contrôles sur la page et vous devriez prendre note de ce qui se passe avec chaque méthode.

Rendu et visibilité

Dans certains cas, les éléments de votre page n'ont pas besoin d'être rendus pour l'utilisateur en raison d'un type de logique ou d'une valeur de base de données. Dans ce cas, vous pouvez empêcher le rendu (création du contrôle sur la page Web renvoyée). Vous voudrez le faire si le contrôle n'a pas besoin d'être affiché plus tard côté client car, quoi qu'il en soit, l'utilisateur qui visualise la page n'a jamais besoin de la voir.

La visibilité de tout contrôle ou élément peut être définie côté serveur. S'il s'agit d'un ancien élément HTML ordinaire, il vous suffit de définir la valeur de l'attribut runat sur server sur la page de balisage.

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

La décision de rendre la div ou non peut maintenant être faite dans le code behind class comme ceci:

myDiv.Visible = someConditionalBool;

Si défini sur true, il sera rendu sur la page et s'il est faux, il ne sera pas rendu du tout, pas même masqué.

Masquage côté client

Cacher un élément est fait uniquement du côté client. Cela signifie qu'elle est rendue, mais qu'elle comporte un style CSS display qui indique à votre navigateur de ne pas le montrer à l'utilisateur. Cela est utile lorsque vous souhaitez masquer/afficher des éléments en fonction des entrées de l'utilisateur. Il est important de savoir que l'élément PEUT aussi être caché côté serveur tant que l'élément/contrôle a runat=server défini comme je l'ai expliqué dans l'exemple précédent.

Cacher dans la classe de code derrière

Pour masquer un élément que vous souhaitez afficher dans la page mais masqué, utilisez une autre simple ligne de code:

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

Si vous devez supprimer le côté serveur de style display, vous pouvez le faire en supprimant le style display ou en lui attribuant une valeur différente, telle que inline ou block (valeurs décrites ici ).

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

Cacher côté client avec javascript

En utilisant du vieux javascript simple, vous pouvez facilement cacher le même élément de cette manière

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

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

jQuery simplifie un peu le masquage des éléments si vous préférez utiliser jQuery:

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

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

Une autre méthode (que personne ne semble avoir mentionnée jusqu'à présent) consiste à ajouter une paire KeyValue supplémentaire au tableau Style de l'élément. c'est à dire

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

Cela présente l’avantage supplémentaire de simplement cacher l’élément, plutôt que de l’empêcher d’être écrit dans le DOM pour commencer - contrairement à la propriété "Visible". c'est à dire.

Div.Visible = false

a pour résultat que div never est écrit dans le DOM.

Edit: Cela devrait être fait dans le 'code-behind', c.-à-d. Le fichier * .aspx.cs.

1
XtraSimplicity

RegisteredClientScriptBlock ajoute le script en haut de la page sur le post-back avec aucune assurance sur la commande , ce qui signifie que l'appel est injecté après la déclaration de la fonction (votre fichier js avec la fonction est en ligne après votre appel. ) ou lorsque le script tente d’exécuter la div n’est probablement pas encore arrivé car la page est toujours restituée. Une bonne idée est probablement de simuler les deux scénarios que j'ai décrits ci-dessus sur firebug et de voir si vous obtenez des erreurs similaires. 

Mon hypothèse est que cela fonctionnerait si vous ajoutiez le script au bas de la page avec RegisterStartupScript - vaut la peine d'être essayé.

Quoi qu’il en soit, si vous ajoutez l’attribut runat="server" à la div, vous pourrez y accéder grâce à son identifiant dans codebehind (sans revenir à js - à quel point cela pourrait être cool) et le faire disparaître ainsi:

data.visible = false

0
JohnIdol

J'avais un problème où mettre element.Visible = true dans mon code n'a aucun effet sur l'écran réel. La solution pour moi consistait à envelopper la zone de ma page où je voulais montrer la division dans un UpdatePanel ASP, utilisé pour provoquer des mises à jour partielles de l'écran.

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

Avoir l’élément runat = server m’y a donné l’accès depuis codebehind, et le placer dans UpdatePanel a permis de le mettre à jour à l’écran.

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

code 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
0
Aladein