2009-05-04 10 views
2

J'ai un contrôle personnalisé avec un tas de boutons et d'entrées. J'ai aussi un fichier JS où tout mon code va pour le débogage facile.ID de contrôle asp.net dans un fichier JS séparé

Comment puis-je obtenir les ID client des contrôles dans le fichier JS?

Ma solution de contournement pour le moment est d'avoir un bloc de script en haut du contrôle et d'y mettre tous les JS. J'aimerais bien une séparation.

Un grand merci

Répondre

1

Mettez vos commandes les ID en page variables globales. Ensuite, dans vos fichiers javascript externes, utilisez ces variables globales comme référence à vos contrôles.

Dans votre contrôle personnalisé, page ou contrôle utilisateur:

string script = "<script>var myButtonID = '" + myButton.ClientID + "';</script>"; 
if (!Page.ClientScript.IsClientScriptBlockRegistered("myGlobalVariables")) 
{ 
    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "myGlobalVariables", script); 
} 

Et dans votre fichier JS externe:

var myButton = document.getElementById(myButtonID); 
//var myButton = $('#' + myButtonID); 

EDIT: Voici la façon de rendre votre controlIDs dans votre ASPX/ascx files:

<script language="javascript"> 
    var myButtonID = '<%= muButton.ClientID %>'; 
</script> 
+0

Hmmm, je sais que c'est seulement une petite quantité de code mais cela pourrait être plus facile si j'utilise simplement des balises HTML normales qui ne sont pas rendues sur le serveur. –

0

Si la sépara C'est très important pour vous, vous pouvez envisager d'utiliser jQuery qui a plein de façons de trouver vos contrôles.

+0

La plupart d'entre elles sont plutôt chères, en termes de performances – roosteronacid

+0

Je pense que je préfère déplacer une partie de la charge vers le client, ce qui réduit la quantité de travail sur le serveur. Je pense que jQuery est une bonne option. –

0

Je passe généralement un littéral d'objet en tant qu'argument à mes fonctions. Cette approche supprime la nécessité d'utiliser des variables globales et rend la déconnexion de ASP.NET contrôle/fonctions JavaScript un peu moins complexes et plus verbeux:

JavaScript:

function fn(ids) 
{ 
    var controlOne = ids.controlOne, 
     controlTwo = ids.controlTwo, 
     controlThree = ids.controlThree; 
} 

ASP.NET:

fn({ 
    controlOne: "<%= ControlOne.ClientID %>", 
    controlTwo: "<%= ControlTwo.ClientID %>", 
    controlThree: "<%= ControlThree.ClientID %>" 
}); 



Une autre approche serait de cibler votre en met des noms de classe:

ASP.NET:

<asp:TextBox ... CssClass="controlone" /> 
<asp:TextBox ... CssClass="controltwo" /> 
<asp:TextBox ... CssClass="controlthree" /> 

JavaScript:

function fn() 
{ 
    var controlOne = document.getElementsByClassName("controlone"), 
     controlTwo = document.getElementsByClassName("controltwo"), 
     controlThree = document.getElementsByClassName("controlthree"); 
} 



Tout cela peut être grandement simplifiée en utilisant jQuery ou un autre Framework JavaScript.

0

Ou il y a une autre approche qui u définiront un objet attend un objet JSON comme celui-ci

this.Collection = {'controlName': '<%= controlId.ClientID %>' } ; 

Mettre cela à la fin de votre page asp, la première partie se référera à une chaîne de se rappeler votre nom de commande et la deuxième partie est le vrai clientID

Dans votre fichier javascript tout ce que vous devez faire appeler votre collection avec le nom de la commande que vous avez attribué

alert(Collection['controlName']) ; // the result will be the clientid for the server side control 

J'espère que ça marche parce que ça me semble simple

Questions connexes