web-dev-qa-db-fra.com

getElementById ne trouve pas le contrôle généré par ASP.net

J'essaie simplement de stocker une étiquette dans une variable en javascript mais pour une raison quelconque, cela ne fonctionne pas avec document.getElementById('control');. Je sais que mon javascript est bien lié à mon fichier html car tout le reste fonctionne.

Voici mon code javascript:

function performEvapCooledCircuit(txt)
{
    var error = document.getElementById('lblError');


    if (txt.value == null || isNaN(txt.value))
    {
       error.style.visibility = "visible";
    }
}

Voici le code html de mon étiquette:

<asp:Label ID="lblError" class="NormLabel" runat="server" 
   style="color:red; visibility:hidden;" Text="Invalid Input."></asp:Label>

Je reçois une erreur indiquant que l'objet est attendu ??

javascriptasp.netgetelementbyid
15
Johnrad

L'ID généré par ASP.NET ne sera pas "lblError", vous devrez donc le référencer par son ClientID

document.getElementById('<%=lblError.ClientID %>');

Si votre fichier javascript est externe, j'ai généralement dû écrire un type de méthode javascript "Init" pour m'assurer que mes identifiants étaient bien configurés

Sur votre page ASPX:

<script type="text/javascript">
    var lblError = null;
    function InitializeVariables()
    {
        if (lblError == null) // make sure you only do this once
        {
            lblError = document.getElementById("<%=lblError.ClientID %>");
        }
    }
</script>
<asp:Label 
    ID="lblError"
    class="NormLabel"
    runat="server" 
    style="color:red; visibility:hidden;"
    Text="Invalid Input."></asp:Label>

Ensuite, dans votre fichier javascript, vous devrez appeler InitializeVariables() pour vous assurer que les variables pointent vers les bons contrôles asp.net

function performEvapCooledCircuit(txt)
{
    InitializeVariables();

    if (txt.value == null || isNaN(txt.value))
    {
        lblError.style.visibility = "visible";
    }
}
20
hunter

"hunter" donne une façon assez solide de faire les choses, cependant, à mon avis, une meilleure méthode consiste à utiliser la propriété "CliendIDMode" sur le contrôle et à définir cette propriété sur "Static". Cela rendra les ID client et serveur identiques. Comme ça:

<asp:TextBox ID="ServerAndClientId" runat="server" ClientIDMode="Static" />
6
Maverick

L'ID de l'étiquette n'est pas "lblError". Le moteur ASP.net a changé l'ID. Vérifiez le code source HTML dans le navigateur pour connaître l'ID réel.

2
Šime Vidas

Vous pouvez utiliser ceci:

document.getElementById('<%= lblError.ClientID %>').click()

À partir d'ASP.NET 4.0, vous pouvez utiliser la propriété ClientIDMode pour votre élément. Et si vous le définissez dans Static, la valeur ClientID sera définie sur la valeur de la propriété ID:

 <asp:Label ID="lblError" runat="server" ClientIDMode="Static" />

sera rendu comme quelque chose comme ceci:

<span id="lblError" name="ctl00$MasterPageBody$ctl00$Label1" />
1
algreat

Ce n'est pas du HTML pour l'étiquette, c'est un contrôle ASP.NET qui sera rendu en HTML avant d'être envoyé dans la réponse. Les contrôles ASP.NET WebForms modifient parfois l'ID du code HTML qu'ils créent.

Affichez la source de la page Web pour voir l'ID de l'élément HTML sur la page rendue.

1
StuperUser