Référence ASP.NET contrôle par code en JavaScript?

Question

Lorsque ASP.NET les contrôles sont rendu compte de leur id changent parfois, comme si ils sont dans un conteneur de dénomination. Button1 peut en fait avoir une id ctl00_ContentMain_Button1 lorsqu'il est rendu, par exemple.

Je sais que vous pouvez écrire votre code JavaScript comme des chaînes de caractères dans votre .cs fichier, obtenir le contrôle de clientID et injecter le script dans votre page à l'aide de clientscript, mais est-il possible que vous pouvez faire référence à un contrôle directement à partir de JavaScript à l'aide de ASP.NET Ajax?

J'ai trouvé que l'écriture d'une fonction pour analyser les dom de manière récursive et trouver un contrôle qui CONTIENT l'id que je veux, c'est pas fiable, j'ai donc été à la recherche pour les meilleures pratiques plutôt que de les contourner.

Answer 1

Ce post par Dave Ward pourrait avoir ce que vous cherchez:

http://encosia.com/2007/08/08/robust-aspnet-control-referencing-in-javascript/

Extrait de l'article:

En effet, il y est. La meilleure solution est d'utiliser inline ASP.NET code de injecter du contrôle ClientID propriété:

$get('<%= TextBox1.ClientID %>')

Maintenant, le bon client ID de l'élément est de référence, indépendamment de l' la structure de la page et le site de nidification niveau de la maîtrise. À mon avis, le très faible coût de performance de cette méthode est bien la peine de faire votre client de script plus résilient pour le changement.

Et un exemple de code par Dave de le fil de commentaires de ce post:

<script>
  alert('TextBox1 has a value of: ' + $get('<%= TextBox1.ClientID %>').value);
</script>

Le fil de commentaires de l'article que j'ai lié ci-dessus a quelques bonnes discussions.

Answer 2

Vous pouvez changer d' ClienIDMode de la propriété du contrôle 'Static' que le résultat sera le même ID que vous donner le contrôle de la dans le .NET code.

<asp:TextBox ID="TextBox1" ClientIDMode="Static" runat="server"></asp:TextBox> 

aura pour résultat:

<input name="ctl00$MainContent$TextBox1" type="text" id="TextBox1"> 

si vous avez le même ID.

Answer 3

Quelques pensées sur ce:

1) j'ai eu beaucoup de chance dans l'obtention d'éléments par classe css au lieu de l'id parce que asp.net les id ne sont pas fiables comme vous l'avez indiqué. J'utilise cette fonction et il fonctionne assez bien:

function getElementsByClass(searchClass,node,tag) {
 var classElements = new Array();
 if ( node == null )
    {
        node = document;
    }

 if ( tag == null )
    {
        tag = '*';
    }

 var els = node.getElementsByTagName(tag);
 var elsLen = els.length;
 var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");

 for (i = 0, j = 0; i < elsLen; i++) 
    {
        if ( pattern.test(els[i].className) ) 
            {
                classElements[j] = els[i];
                j++;
            }
      }
 return classElements;
}

2) jQuery permet ici de beaucoup de choses. À l'aide de jQuery, vous pouvez obtenir de manière fiable des éléments où le code se termine par une certaine chaîne de caractères. Si ce n'est pas "la" raison d'utiliser jQuery, c'est certainement un plus.

3) Cela sera corrigé dans les asp.net 4.0 alors accrochez-vous :-) http://weblogs.asp.net/asptest/archive/2009/01/06/asp-net-4-0-clientid-overview.aspx

Answer 4

Oh, et j'ai aussi trouvé ceci, au cas où quelqu'un d'autre a eu ce problème.

Utiliser un sélecteur jQuery pour asp.net contrôles: http://john-sheehan.com/blog/custom-jquery-selector-for-aspnet-webforms/

Answer 5

Je ne pense pas qu'il y a une seule "meilleure pratique" pour ce faire. Il ya beaucoup de différents assez bonnes pratiques. Voici la nôtre:

Chaque contrôle qui a côté client fonctionnalité de rendu d'un bloc de script inline, directement en dessous de la marge pour le contrôle:

<span id="something_crazy_long">
    control markup
</span>
<script type="text/javascript">new CustomControl('something_crazy_long');</script>

Chaque contrôle est accompagné d'une JS comme:

var CustomControl = function(id) {
    this.control = document.getElementByID(id);
    this.init();
};

CustomControl.prototype.init = function() {
    //do stuff to wire up relevant events
};

Dans le code-behind, nous faire quelque chose comme:

class CustomControl : Control

override void Render(HtmlTextWriter writer)
{
    writer.WriteBeginTag("span");
    writer.WriteAttribute("id", this.ClientID);
    writer.Write(HtmlTextWriter.TagRightChar);
    //write control markup
    writer.WriteEndTag("span");
    writer.WriteBeginTag("script");
    writer.WriteAttribute("type", "text/javascript");
    writer.Write(HtmlTextWriter.TagRightChar);
    writer.Write(
        string.Format("new CustomControl('{0}');", this.ClientID)
    );
    writer.WriteEndTag("script");
}