Modifier la visibilité de l'étiquette ASP.NET avec JavaScript

Question

J'ai une page ASP.NET avec un bouton asp: qui n'est pas visible. Je ne peux pas le rendre visible avec JavaScript car il n'est pas rendu sur la page.

Que puis-je faire pour résoudre ce problème?

Answer 1

Si vous devez le manipuler côté client, vous ne pouvez pas utiliser la propriété Visible côté serveur. Au lieu de cela, définissez son style d'affichage CSS sur "none". Par exemple:

<asp:Label runat="server" id="Label1" style="display: none;" /> 

Ensuite, vous pourriez le rendre visible sur le côté client avec:

document.getElementById('Label1').style.display = 'inherit'; 

Vous pouvez le faire à nouveau cachée avec:

document.getElementById('Label1').style.display = 'none'; 

Gardez à l'esprit qu'il y peut-être des problèmes avec le ClientID étant plus complexe que "Label1" dans la pratique. Vous devrez utiliser le ClientID avec getElementById, pas l'ID côté serveur, s'ils diffèrent.

Answer 2

Si vous attendez que la page soit chargée, puis que l'affichage du bouton soit nul, cela devrait fonctionner. Ensuite, vous pouvez le rendre visible à un moment ultérieur.

Answer 3

Assurez-vous que la propriété Visible est définie sur true ou que le contrôle ne sera pas rendu sur la page. Ensuite, vous pouvez utiliser un script pour le manipuler.

Answer 4

Essayez ceci. N'utilisez pas de code côté serveur pour ce faire, car cela nécessiterait une publication (postback). Au lieu d'utiliser Visibility = "false", vous pouvez simplement définir une propriété CSS qui masque le bouton. Ensuite, en javascript, réactivez cette propriété chaque fois que vous souhaitez afficher à nouveau le bouton.

L'ID client est utilisé car il peut être différent de l'ID du serveur si le bouton se trouve dans un contrôle Naming Container. Ceux-ci incluent des panneaux de toutes sortes.

Answer 5

En continuant avec ce Dave Ward dit:

• Vous ne pouvez pas définir la visible propriété sur false car le contrôle ne sera pas rendu.
• Vous devez utiliser le style propriété pour la définir est écran-aucun.

---

page/conception de contrôle

<asp:Label runat="server" ID="Label1" Style="display: none;" /> 

<asp:Button runat="server" ID="Button1" /> 

---

code derrière

Quelque part dans la section de charge:

Label label1 = (Label)FindControl("Label1"); 
((Label)FindControl("Button1")).OnClientClick = "ToggleVisibility('" + label1.ClientID + "')"; 

---

fichier Javascript

function ToggleVisibility(elementID) 
{ 
    var element = document.getElementByID(elementID); 

    if (element.style.display = 'none') 
    { 
     element.style.display = 'inherit'; 
    } 
    else 
    { 
     element.style.display = 'none'; 
    } 
} 

---

Bien sûr, si vous ne voulez pas passer, mais juste pour afficher le bouton/étiquette puis réglez la méthode javascript en conséquence. Le point important ici est que vous devez envoyer les informations sur le ClientID du contrôle que vous voulez manipuler côté client vers le fichier javascript en définissant des variables globales ou via un paramètre de fonction comme dans mon exemple.

Answer 6

Vous devez se méfier de XSS lorsque vous faites des trucs comme ça:

document.getElementById('<%= Label1.ClientID %>').style.display 

Les chances sont que personne ne sera en mesure de falsifier le ClientID de Label1 dans ce cas, mais juste pour être le côté sûr, vous voudrez peut-être passer sa valeur à travers l'une des méthodes AntiXss library's:

document.getElementById('<%= AntiXss.JavaScriptEncode(Label1.ClientID) %>').style.display 

Answer 7

C'est la meilleure façon que je trouve:

 BtnUpload.Style.Add("display", "none"); 
     FileUploader.Style.Add("display", "none"); 
     BtnAccept.Style.Add("display", "inherit"); 
     BtnClear.Style.Add("display", "inherit"); 

J'ai le contraire dans l'Else, donc il gère aussi l'affichage. Cela peut aller dans le chargement de la page ou dans une méthode pour actualiser les contrôles sur la page.