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

Bascially je veux savoir la meilleure façon de cacher/montrer un ASP.NET contrôle à partir d'une fonction Javascript. J'ai pensé que je voudrais juste accéder au contrôle en Javascript à l'aide de:

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

Puis il suffit de définir la propriété Visible du contrôle de vrai/faux. Il ne semble pas fonctionner, je n'arrive pas à comprendre comment mettre en "Visible" à "vrai/faux". Comment puis-je le faire? Aussi, c'est que la meilleure façon de cacher/montrer un ASP.NET contrôle à partir d'une fonction Javascript?

Grâce,
Jeff

source d'informationauteur Yttrium

asp.net javascript

24

La propriété "Visible" d'un ASP.NET contrôle détermine si oui ou non il sera rendu sur le client (c'est à dire envoyé au client). Si elle est fausse lorsque la page est affichée, il n'arrivera jamais au niveau du client.

Donc, vous ne pouvez pas, techniquement, définissez la 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 la masquer à l'aide de javascript comme ceci:
```
var theControl = document.getElementById("txtEditBox");
theControl.style.display = "none";

//to show it again:
theControl.style.display = "";
```
Qui suppose que le contrôle de l' id attribut est vraiment "txtEditBox" sur le client et qu'il est déjà visible.

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

Il n'est pas nécessairement une "meilleure" façon, même si une meilleure approche est d'utiliser la classe CSS définitions:
```
.invisible { display: none; }
```
Quand vous voulez quelque chose à cacher, appliquer dynamiquement la classe de l'élément; si vous voulez l'afficher à nouveau, retirez-la. Remarque, je crois que cela ne fonctionne que pour les éléments dont la display valeur commence comme block.

au lieu d'utiliser visible, définir 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 = ''

Définir le style "display: none".

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

3

Cela devrait masquer le contrôle:
```
theControl.style.display = 'none';
```
3

Vous pouvez utiliser la propriété display pour cela. Mais Jason a noté, c'est une DHTML DOM (côté client) d'un bien qui est totalement indépendant de la ASP.NET (côté serveur) propriété Visible qui contrôle le rendu.
```
theControl.style.display = "none";
```
Propriété D'Affichage
3

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

Le seul genre de la façon de le faire serait pour envelopper le contrôle dans un UpdatePanel et avoir 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 de ces dans votre code derrière:
```
protected void toggle(object sender, EventArgs e){
  myTextBox.Visibility = !myTextBox.Visibility;
}
```
Maintenant, lorsque vous cliquez sur le bouton async publication, et il se produit permettra d'actualiser l'UpdatePanel.

Remarque: Ce n'est pas un bonne solution, comme ça va être du très lourd requête AJAX, parce que vous avez besoin de présenter l'état d'affichage.

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

Vous souhaitez définir le style d'affichage de la propriété sur "aucun" (cacher) ou null montrer.

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

   theControl.style.display = 'none';

   theControl.style.display = null;

Faire le jQuery façon:

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

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

Ou si vous ne voulez pas utiliser de css:

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

Vous devez vous connecter pour publier un commentaire.