Comment arrêter ASP.NET de changer les identifiants pour utiliser jQuery

Question

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

Answer 1

.NET 4 a désormais la possibilité de vous permettre de choisir votre ClientIDMode:

Type: System.Web.L'INTERFACE utilisateur.ClientIDMode

Une valeur qui indique la façon dont la propriété ClientID est généré. La valeur par défaut est Hériter.

AutoID La valeur ClientID est généré par concaténation des valeurs d'ID de chaque parent conteneur de dénomination avec la valeur de l'ID de la commande. Dans de liaison de données des scénarios où plusieurs instances de contrôle sont rendus, une incrémentation de la valeur est inséré avant le contrôle Valeur de l'ID. Chaque segment est séparé par un caractère de soulignement (_). Cet algorithme a été utilisé dans les versions de ASP.NET plus tôt que ASP.NET 4.

Statique ClientID valeur est définie à la valeur de l'ID de la propriété. Si le contrôle est un conteneur de dénomination, le contrôle est utilisé comme le haut de la hiérarchie de nommage de conteneurs pour tous les contrôles qu'il contient.

Prévisible de Cet algorithme est utilisé pour les contrôles liés aux données les contrôles. La valeur ClientID est généré par concaténation de l' ClientID de la valeur du parent conteneur de dénomination avec la valeur de l'ID de l' de contrôle. Si le contrôle est un contrôle de liaison de données qui génère plusieurs lignes, la valeur du champ de données spécifié dans la ClientIDRowSuffix propriété est ajoutée à la fin. Pour le contrôle GridView de contrôle, plusieurs champs de données peuvent être spécifiés. Si l' ClientIDRowSuffix propriété est vide, un numéro séquentiel est ajouté à la fin au lieu d'une base de données-valeur de champ. Ce numéro commence à zéro et est incrémenté de 1 pour chaque ligne. Chaque segment est séparé par une caractère de soulignement (_).

Hériter Du contrôle hérite de la ClientIDMode cadre de son NamingContainer de contrôle.

Answer 2

au lieu d'utiliser ce sélecteur

$('#Label1')

utilisez celui-ci, fondamentalement, vous utilisez le classique asp inline code côté serveur.

$('#<%= Label1.ClientID %>')

cela permettra d'insérer tout ce que ID est généré pour être placé comme un littéral.

Si vous souhaitez utiliser des fichiers externes alors je vous suggère de créer un obj qui est mondial sur la page de votre id client et ensuite de référence que obj sein de votre de fichiers externes (pas l'idéal, mais c'est une solution)

var MyClientIDs = {
    Label1 = '<%= Label1.ClientID %>',
    Label2 = '<%= Label2.ClientID %>',
    Textbox1 = '<%= Textbox1.ClientID %>',
    Textbox2 = '<%= Textbox1.ClientID %>'
};

et puis dans votre fichier externe, vous pouvez accéder à Label1 par exemple: $('#' + MyClientIDs.Label1)

Answer 3

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)
 

Answer 4

Si et seulement si vous êtes conteneur mise en page n'est jamais va changer et vous avez besoin de mettre votre JavaSctipt/jQuery dans un fichier externe, vous pouvez utiliser l'id générés au sein de votre sélecteurs jQuery c'est à dire

$('#ctl00_ContentPlaceHolder1_Label3').html(xml);

Évidemment, cette approche nécessite que vous découvrez ce que le id générés et exige de la prudence, si vous commencez l'évolution du site/de l'application de la construction.

Sinon, vos meilleures options sont

1. Utiliser la ligne de côté de serveur de code de balisage. 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éfinir des classes CSS sur chaque contrôle que vous devez utiliser dans votre jQuery, qui serait toujours vous permettent de mettre votre code js dans un fichier externe -

<asp:Label ID="Label3" runat="server" Text="test" CssClass="label3">
</asp:Label>

$('.label3').html(xml);

3. Utilisation des sélecteurs jQuery pour motif correspondre à l'identifiant d'origine, qui encore une fois, vous permettra de mettre votre code js dans un fichier externe -

$('[id$=Label3]').html(xml);

Ce sélecteur jQuery permet de sélectionner tous les éléments avec l'attribut id dont la valeur se termine avec Label3. La seule ombre au tableau, que j'ai pu voir avec cette approche est que, en théorie, il pourrait être possible d'avoir une Étiquette de contrôle avec l'id Label3 à dire, une page principale et également dans deux pages de contenu. Dans cet exemple, à l'aide du sélecteur jQuery ci-dessus correspondent à tous les trois étiquettes, ce qui peut avoir des conséquences non désirées.

EDIT:

J'ai pensé qu'il pourrait être utile d'augmenter votre attention sur le IDOverride de contrôle. Une page d'Exemple peut être trouvé ici

Il vous permet de spécifier les contrôles devraient avoir leur déformation d'id à l'intérieur de la sortie de balisage HTML remplacé par l'id est donné dans le .fichier aspx lors du rendu de la page HTML. Je ne joue qu'avec elle brièvement avec une seule Page principale et les Panneaux, mais il semble bien fonctionner. En utilisant cela, vous pouvez utiliser l'original de l'id dans votre sélecteurs jQuery. Sachez cependant que les résultats sont imprévisibles si vous avez des contrôles avec le même id dans la page principale(s) et le Contenu de la page(s) qui sont combinées pour afficher le code HTML d'une page.

Answer 5

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.