Comment arrêter ASP.NET de changer les identifiants pour utiliser jQuery
J'ai ce contrôle d'étiquette dans ma page Web
<asp:Label ID="Label1" runat="server" Text="test"></asp:Label>
Et quand la page a rendu l'identifiant du contrôle change en quelque chose comme ceci
<span id="ctl00_ContentPlaceHolder1_Label3">test</span>
Comment puis-je empêcher asp.net de modifier les identifiants afin d'effectuer une opération jQuery comme celle-ci
$('#label1').html(xml);
au lieu d'utiliser ce sélecteur
$('#Label1')
utilisez celui-ci, vous utilisez en fait le code classique du côté serveur inline asp.
$('#<%= Label1.ClientID %>')
cela insérera tout ID généré pour être placé en tant que littéral.
Si vous souhaitez utiliser des fichiers externes, je vous suggère de créer un objet obj global sur la page pour contenir tous vos identifiants de client, puis de le référencer dans vos fichiers externes (pas idéal, mais c'est une solution)
var MyClientIDs = {
Label1 = '<%= Label1.ClientID %>',
Label2 = '<%= Label2.ClientID %>',
Textbox1 = '<%= Textbox1.ClientID %>',
Textbox2 = '<%= Textbox2.ClientID %>'
};
et ensuite dans votre fichier externe, vous pouvez accéder à Label1 par exemple: $('#' + MyClientIDs.Label1)
.NET 4 a maintenant la possibilité de vous laisser choisir votre ClientIDMode :
Type: System.Web.UI.ClientIDMode
Une valeur qui indique comment la propriété ClientID est générée. La valeur par défaut est Hériter.
AutoID La valeur ClientID est générée en concaténant les valeurs ID de chaque conteneur de nommage parent avec la valeur ID du contrôle. Dans scénarios de liaison de données dans lesquels plusieurs instances d'un contrôle sont rendue, une valeur incrémentante est insérée devant le .__ du contrôle. Valeur d'identification. Chaque segment est séparé par un trait de soulignement (_) . Cet algorithme a été utilisé dans des versions d'ASP.NET antérieures à ASP.NET 4.
Static La valeur ClientID est définie sur la valeur de la propriété ID. Si le contrôle est un conteneur de nommage, le contrôle est utilisé en haut de la hiérarchie des conteneurs de nommage pour les contrôles qu’il contient.
Predictable Cet algorithme est utilisé pour les contrôles se trouvant dans les données les contrôles. La valeur ClientID est générée en concaténant le fichier Valeur ClientID du conteneur de dénomination parent avec la valeur ID du contrôle. Si le contrôle est un contrôle lié aux données qui génère plusieurs lignes, la valeur du champ de données spécifié dans le La propriété ClientIDRowSuffix est ajoutée à la fin. Pour le GridView contrôle, plusieurs champs de données peuvent être spécifiés. Si la La propriété ClientIDRowSuffix est vide, un numéro séquentiel est ajouté à la fin au lieu d'une valeur de champ de données. Ce nombre commence à zéro et est incrémenté de 1 pour chaque ligne. Chaque segment est séparé par un caractère de soulignement (_).
Inherit Le contrôle hérite du paramètre ClientIDMode de son contrôle NamingContainer.
Vous ne pouvez pas empêcher asp.net de générer ces identifiants. C'est comme ça que ça se passe.
Vous pouvez toujours utiliser jquery comme ceci:
$('#<%=label1.ClientID %>').html(xml)
ou
$('[id$=_label1]').html(xml)
set ClientIDMode="Static". Cela résoudra votre problème.
Exemple:
<asp:Label ID="Label1" ClientIDMode="Static" runat="server" Text="test"></asp:Label>
Si et uniquement si votre disposition de conteneur ne changera jamais et vous devez mettre votre JavaSctipt/jQuery dans un fichier externe, vous pouvez utiliser le les identifiants générés dans vos sélecteurs jQuery.
$('#ctl00_ContentPlaceHolder1_Label3').html(xml);
De toute évidence, cette approche nécessite que vous trouviez quels sont les identifiants générés et que vous devez faire preuve de prudence si vous commencez à modifier la construction du site/de l'application.
Sinon, vos meilleures options sont
1. Utilisez le balisage de code côté serveur intégré. L’inconvénient de cette approche est que vous ne pouvez pas mettre votre code js dans un fichier externe -
$('#<%= Label3.ClientID %>').html(xml);
2. Définissez des classes CSS uniques sur chaque contrôle à utiliser dans votre jQuery, ce qui vous permettrait tout de même de placer votre code js dans un fichier externe -
<asp:Label ID="Label3" runat="server" Text="test" CssClass="label3">
</asp:Label>
$('.label3').html(xml);
3. Utilisez les sélecteurs jQuery pour que le motif corresponde à l'id d'origine, ce qui vous permettrait également de placer votre code js dans un fichier externe -
$('[id$=Label3]').html(xml);
Ce sélecteur jQuery sélectionnera tous les éléments avec l'attribut id dont la valeur se termine par Label3. Le seul inconvénient potentiel de cette approche est que, théoriquement, il serait possible d’avoir un contrôle Label avec id id3, par exemple, une page maître et également dans deux pages de contenu. Dans cet exemple, l'utilisation du sélecteur jQuery ci-dessus correspond aux trois étiquettes, ce qui peut avoir des conséquences indésirables.
MODIFIER:
J'ai pensé qu'il pourrait être utile d'attirer votre attention sur le contrôle IDOverride . Une page Exemple peut être trouvée ici
Il vous permet de spécifier quels contrôles doivent avoir leur identifiant mutilé dans le balisage HTML généré, remplacé par l'identifiant indiqué dans le fichier .aspx lors du rendu de la page HTML. Je n'y ai joué que brièvement avec une seule page principale et des panneaux, mais cela semble bien fonctionner. En utilisant cela, vous pouvez utiliser les identifiants d’origine dans vos sélecteurs jQuery. Sachez toutefois que les résultats sont imprévisibles si vous aviez des contrôles avec les mêmes identifiants dans vos pages maîtres et dans les pages de contenu qui sont combinés pour restituer le code HTML d'une page.
Réponse courte, ne vous inquiétez pas pour l'utilisation des identifiants asp.net. Dans asp.net, vous pouvez ajouter votre propre attribut à une balise:
<asp:TexBox ID="myTBox" runat="server" MyCustomAttr="foo" />
Ensuite, dans jQuery, vous pouvez faire référence à cet élément via:
$("input[MyCustomAttr='foo']")
Je le fais tout le temps avec jQuery. J'espère que ça aide.
Vous pouvez appeler un nom de classe plutôt que d'utiliser un identifiant
Par exemple;
$('.CssClassName'). ...
Ou si vous tapez ceci dans la toute première ligne de MasterPage, vos ID de contrôle ne changeront pas:
ClientIDMode="Static"
Par exemple;
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="Main_MasterPage" ClientIDMode="Static" %>
Le code en ligne est la bonne façon de le faire. Toutefois, cela va changer dans ASP.NET 4.0. Nous avons passé du temps à ajouter une fonctionnalité qui permet un contrôle total des identifiants générés côté client. Vous trouverez ci-dessous des ressources Web sur cette fonctionnalité.
La plupart des suggestions présentées ici fonctionneront, mais les résultats des tests sur le code jQuery montrent que les sélecteurs d’identités pures sont de loin les plus rapides. Celui que j'utilise le plus souvent:
$("[id$=origControlId]")
est assez lent, mais le problème n’est pas trop évident sauf si la page a beaucoup de contrôles et beaucoup de jQuery.
Comme il est relativement simple d’affecter plusieurs classes à un contrôle, vous pouvez attribuer à chacune d’elles une classe CSSClass correspondant à l’ID. Puisqu'ils seraient alors uniques (vous devrez regarder les contrôles de type répéteur générant plusieurs contrôles), vous pouvez sélectionner par classe.
Par exemple:
<asp:Label ID="Label1" CssClass="Label1 SomeOtherClass" runat="server" Text="test">
</asp:Label>
pourrait être sélectionné uniquement par:
$(".Label1")
Ce qui est presque aussi rapide qu'un ID choisi.
Je n'avais jamais pensé à celui-ci:
$('#<%= Label1.ClientID %>')
mais je vais l'essayer!
Vous pouvez utiliser la variable ClientID (comme tout le monde le dit), mais le problème est qu'elle ne peut pas être utilisée dans un fichier JavaScript externe.
Donc, idéalement, au lieu d'utiliser l'ID pour le référencer à partir de jQuery, utilisez une classe CSS :
<asp:Label ID="Label1" runat="server" Text="test" CssClass="myclass"></asp:Label>
Ensuite, vous pouvez le référencer comme ceci:
$(".myclass")
Vous devez transmettre l'ID client du contrôle au code javascript (je doute que Label1 soit renommé Label3)
ClientScriptManager.RegisterClientScriptBlock(GetType(), "someKey",
"$('#" + Label1.ClientID + "').html(xml);", true);
Vous pouvez remplacer l'ID client et l'ID unique par ce type l'a été .
/// <summary>
/// Override to force simple IDs all around
/// </summary>
public override string UniqueID
{
get
{
return this.ID;
}
}
/// <summary>
/// Override to force simple IDs all around
/// </summary>
public override string ClientID
{
get
{
return this.ID;
}
}
Vous pouvez également créer un contrôle personnalisé, hérité de Label, qui substitue la propriété ID à ce que vous souhaitez.
Pour ce faire, remplacez l’identité asp.net par l’identificateur d’origine lors du rendu du contrôle ..__, ce qui est assez simple et peut être effectuée à l’aide de la création d’un ensemble de contrôles personnalisés.
Vous devez mettre la propriété ClientIDMode="Static" dans votre bouton, cela garantit que l'ID sera le même au moment de l'exécution, c'est ce dont vous avez besoin pour obtenir un objet en Javascript.
Au risque d’être un changement évident:
<asp:Label ID="Label1" runat="server" Text="test"></asp:Label>
à
<Label ID="Label1" Text="test"></Label>
Vous pouvez toujours utiliser PlaceHolders et définir ClientIDMode dans la balise PlaceHolder:
<asp:ContentPlaceHolder ID="BodyContent" runat="server" ClientIDMode="Static">
</asp:ContentPlaceHolder>
Aucun des ID de contrôles contenus ne sera modifié.
Il suffit de se débarrasser de l'espace réservé. Ou sélectionnez par classe ou par hiérarchie DOM. Ou même utiliser une correspondance partielle sur l'ID en dernier recours. Il existe de nombreuses manières simples et propres de sélectionner un élément dans jQuery. Nous devons nous sevrer de nos vieilles et mauvaises habitudes ASP.NET.
Et Dreas Grech a mis le dernier clou dans le cercueil. Vous ne pouvez pas utiliser de fichiers de script externes avec les solutions de type $ ('# <% = label1.ClientID%>').
Mike
Simple, avec le dépassement de la classe de contrôle. Voici un exemple avec HtmlGenericControl mais vous pouvez le faire avec n’importe quel contrôle ASP.Net:
public class NoNamingContainerControl : HtmlGenericControl
{
public NoNamingContainerControl(string tag) : base(tag) { }
public override string ClientID
{
get
{
return this.ID;
}
}
}
vous n'avez pas besoin "d'empêcher" asp.net de changer l'id de contrôle pour pouvoir utiliser jquery ou javascript.
l'identifiant qui est rendu sur votre page est la propriété ClientID du contrôle et ce que vous définissez sur le contrôle lui-même est l'identifiant vous ne pouvez pas définir la propriété ClientID, elle est générée pour vous et peut ne pas être identique à votre ID. Cependant, comme d'autres l'ont mentionné, vous pouvez utiliser la propriété ClientID dans votre aspx:
$('<%= Label1.ClientID %>').html()
ou en enregistrant le script client dans votre code derrière le fichier à l'aide de l'une des méthodes ClientScriptManager.