Modifica la visibilità dell'etichetta ASP.NET con JavaScript

Question

Ho una pagina ASP.NET con un asp:pulsante che non è visibile.Non riesco a renderlo visibile con JavaScript perché non viene visualizzato nella pagina.

Cosa posso fare per risolvere questo problema?

Answer 1

Se è necessario manipolarlo sul lato client, non è possibile utilizzare la proprietà Visible sul lato server.Imposta invece lo stile di visualizzazione CSS su "nessuno".Per esempio:

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

Quindi, potresti renderlo visibile sul lato client con:

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

Potresti renderlo nuovamente nascosto con:

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

Tieni presente che nella pratica potrebbero esserci problemi con il ClientID che è più complesso di "Label1".Dovrai utilizzare ClientID con getElementById, non l'ID lato server, se differiscono.

Answer 2

Prova questo.

<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>

Non utilizzare codice lato server per eseguire questa operazione poiché ciò richiederebbe un postback.Invece di utilizzare Visibility="false", puoi semplicemente impostare una proprietà CSS che nasconde il pulsante.Quindi, in JavaScript, ripristina la proprietà ogni volta che desideri mostrare nuovamente il pulsante.

Il ClientID viene utilizzato perché può essere diverso dall'ID del server se il pulsante si trova all'interno di un controllo Contenitore dei nomi.Questi includono Pannelli di vario tipo.

Answer 3

Continuando con cosa Dave Ward disse:

• Non puoi impostare il Visibile proprietà su false perché il controllo non verrà sottoposto a rendering.
• Dovresti usare il Stile proprietà per impostarlo Schermo A nessuno.

---

Progettazione di pagine/controlli

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

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

---

Codice dietro

Da qualche parte nella sezione di caricamento:

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

---

File Javascript

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

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

---

Naturalmente, se non vuoi attivare/disattivare ma solo mostrare il pulsante/l'etichetta, regola di conseguenza il metodo javascript.

Il punto importante qui è che è necessario inviare le informazioni sul file ClientID del controllo che vuoi manipolare lato client nel file javascript impostando variabili globali o tramite un parametro di funzione come nel mio esempio.

Answer 4

Devi stare attento XSS quando fai cose del genere:

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

È probabile che nessuno sarà in grado di manomettere il ClientID di Label1 in questo caso, ma solo per essere sicuro potresti voler passare il suo valore attraverso uno dei Libreria AntiXss metodi:

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

Answer 5

Questo è il modo più semplice che ho trovato:

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

Ho l'opposto in Else, quindi gestisce anche la loro visualizzazione.Questo può andare nel caricamento della pagina o in un metodo per aggiornare i controlli sulla pagina.

Answer 6

Se aspetti fino al caricamento della pagina e quindi imposti la visualizzazione del pulsante su nessuno, dovrebbe funzionare.Quindi puoi renderlo visibile in un secondo momento.

Answer 7

Assicurati che la proprietà Visible sia impostata su true altrimenti il ​​controllo non verrà visualizzato nella pagina.Quindi puoi usare lo script per manipolarlo.