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

StackOverflow https://stackoverflow.com/questions/7773

  •  08-06-2019
  •  | 
  •  

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 affiché sur la page.

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

Était-ce utile?

La solution

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 "aucun".Par exemple:

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

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

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

Vous pouvez le masquer à nouveau avec :

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

Gardez à l’esprit qu’il peut y avoir des problèmes avec le fait que ClientID soit plus complexe que « Label1 » dans la pratique.Vous devrez utiliser le ClientID avec getElementById, et non l'ID côté serveur, s'ils diffèrent.

Autres conseils

Essaye ça. 

<asp:Button id="myButton" runat="server" style="display:none" Text="Click Me" />

<script type="text/javascript">
    function ShowButton() {
        var buttonID = '<%= myButton.ClientID %>';
        var button = document.getElementById(buttonID);
        if(button) { button.style.display = 'inherit'; }
    }
</script>

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

Le ClientID est utilisé car il peut être différent de l'ID du serveur si le bouton se trouve à l'intérieur d'un contrôle Naming Container.Ceux-ci incluent des panneaux de diverses sortes.

Continuer avec quoi Dave Ward dit:

  • Vous ne pouvez pas définir le Visible propriété sur false car le contrôle ne sera pas rendu.
  • Vous devriez utiliser le Style propriété pour définir son afficher à aucun.

Conception de pages/contrôles

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

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

Code derrière

Quelque part dans la section chargement :

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 souhaitez pas basculer mais simplement afficher le bouton/l'étiquette, ajustez 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 souhaitez manipuler côté client dans le fichier javascript, soit en définissant des variables globales, soit via un paramètre de fonction comme dans mon exemple.

Il faut se méfier XSS quand je fais des trucs comme ça :

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

Il y a de fortes chances que personne ne puisse altérer le ClientID de Label1 dans ce cas, mais juste pour être sûr, vous souhaiterez peut-être transmettre sa valeur via l'un des Bibliothèque AntiXss méthodes :

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

C'est le moyen le plus simple que j'ai trouvé :

        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 Else, donc il gère également leur affichage.Cela peut aller dans le chargement de la page ou dans une méthode pour actualiser les contrôles de la page.

Si vous attendez que la page soit chargée, puis définissez l'affichage du bouton sur aucun, cela devrait fonctionner.Vous pourrez ensuite le rendre visible ultérieurement.

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

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top