Comment définir la propriété "Visible" d'un contrôle ASP.NET à partir d'une fonction Javascript?

Question

Bascially je veux savoir le meilleur moyen de cacher/montrer un contrôle ASP.NET à partir d'une fonction Javascript. Je pensais que j'accéderais simplement au contrôle en utilisant Javascript:

var theControl = document.getElementById("txtEditBox"); 

Ensuite, il suffit de définir la propriété Visible du contrôle à true/false. Cela ne semble pas fonctionner, je n'arrive pas à comprendre comment régler "Visible" sur vrai/faux. Comment puis je faire ça? Aussi, est-ce la meilleure façon de cacher/montrer un contrôle ASP.NET à partir d'une fonction Javascript?

Merci, Jeff

Answer 1

La propriété « Visible » d'un contrôle ASP.NET détermine si oui ou non il sera rendu sur le client (par exemple envoyé au client). Si c'est faux quand la page est rendue, elle n'arrivera jamais au client. Donc, techniquement, vous ne pouvez pas définir cette propriété du contrôle.

Cela dit, si le contrôle est rendu sur le client, car la propriété visible est vrai lorsque la page est affichée, vous pouvez alors le cacher en utilisant javascript comme ceci:

var theControl = document.getElementById("txtEditBox"); 
theControl.style.display = "none"; 

// to show it again: 
theControl.style.display = ""; 

Cela suppose que la L'attribut id de control est vraiment "txtEditBox" sur le client et il est déjà visible.

Aussi, est-ce la meilleure façon de cacher/afficher un contrôle ASP.NET à partir d'une fonction Javascript?

Il n'y a pas nécessairement une « meilleure » façon, bien qu'une meilleure approche consiste à utiliser des définitions de classe CSS:

.invisible { display: none; } 

Lorsque vous voulez cacher quelque chose, appliquer de manière dynamique cette classe à l'élément; Lorsque vous voulez le montrer à nouveau, supprimez-le. Remarque, je crois que cela ne fonctionnera que pour les éléments dont la valeur display commence comme block.

Answer 2

au lieu d'utiliser visible, définissez son css display: none

//css: 
.invisible { display:none; } 

//C# 
txtEditBox.CssClass = 'invisible'; 
txtEditBox.CssClass = ''; // visible again 

//javascript 
document.getElementById('txtEditBox').className = 'invisible' 
document.getElementById('txtEditBox').className = '' 

Answer 3

Cela devrait masquer le contrôle:

theControl.style.display = 'none'; 

Answer 4

Définissez le style de "display: none".

var theControl = document.getElementById("<%= txtEditBox.ClientID %>"); 
theControl.style.display = "none"; 

Answer 5

Vous pouvez utiliser la propriété d'affichage pour cela. Mais comme l'a noté Jason, il s'agit d'une propriété DHTML DOM (côté client) complètement indépendante de la propriété Visible ASP.NET (côté serveur) qui contrôle le rendu.

theControl.style.display = "none"; 

Display Property

Answer 6

Vous voulez définir la propriété de style d'affichage 'none' (cacher) ou null à afficher.

var theControl = document.getElementById("txtEditBox"); 

    theControl.style.display = 'none'; 

    theControl.style.display = null; 

Faire les choses comme jQuery:

$('#txtEditBox').hide(); 

    $('#txtEditBox').show(); 

Answer 7

Vous ne pouvez pas masquer/afficher la version ASP.NET du contrôle que ce qui existe seulement dans un contexte de serveur. Pour utiliser JavaScript, vous devez jouer avec l'état de style/visibilité des contrôles.

Le seul type-de façon de le faire serait d'envelopper le contrôle dans un UpdatePanel et quelque chose comme ceci:

<asp:UpdatePanel ID="panel" runat="server"> 
    <ContentTemplate> 
    <asp:TextBox ID="myTextBox" runat="server" /> 
    </ContentTemplate> 
    <Triggers> 
    <asp:AsynchronousPostbackTrigger ControlID="button" EventName="Click" /> 
    </Triggers> 
</asp:UpdatePanel> 
<asp:Button ID="button" runat="server" OnClick="toggle" Text="Click!" /> 

Alors vous avez besoin dans votre code derrière:

protected void toggle(object sender, EventArgs e){ 
    myTextBox.Visibility = !myTextBox.Visibility; 
} 

Maintenant, lorsque vous cliquez sur le bouton une publication asynchrone se produit et il actualisera le UpdatePanel.

Note: Ce n'est pas une bonne solution , comme ce sera une requête AJAX très lourd, parce que vous devez soumettre le ViewState.

En outre, il peut ne pas être 100% à droite, je l'ai fait de la mémoire.

Answer 8

Ou si vous ne voulez pas utiliser css:

<asp:TextBox ID="txtBox" runat="server" style="display:none;">