Obtenir l'ID du serveur runat asp.net dans jQuery

StackOverflow https://stackoverflow.com/questions/5392958

Question

J'essaye de créer des trucs dans jQuery en utilisant ASP.NET.Mais l'ID de runat="server" n'est pas le même que l'ID utilisé en HTML.

J'utilisais ceci pour obtenir l'ID de cette situation: 

$("#<%=txtTest.ClientID%>").val();

Mais dans ce cas, cela ne fonctionne pas.Je ne sais pas pourquoi.

Javascript 

/* Modal */
function contatoModal() {
    //alert("Test");
    alert($("#<%=txtTest.ClientID%>").val());
}

HTML 

< input runat="server" id="txtTest" value="test" />

Des conseils?

Était-ce utile?

La solution

<%= txtTest.ClientID %> devrait fonctionner mais pas dans un fichier javascript séparé où les scripts côté serveur ne s'exécutent pas.Une autre possibilité est d'utiliser un sélecteur de classe: 

<input runat="server" id="txtTest" value="test" class="txtTest" />

et ensuite: 

var value = $('.txtTest').val();

Autres conseils

Comme d'autres l'ont mentionné, vous pouvez passer un sélecteur de classe à jQuery, mais c'est un peu compliqué.Je préfère utiliser l ' l'attribut jQuery se termine par selector .Étant donné qu'un ID généré est une hiérarchie aplatie de contrôles, vous pouvez utiliser le sélecteur "se termine par" pour trouver votre élément. 

<input runat="server" id="txtText" />

Lors du rendu, l'ID généré devient quelque chose comme ceci (s'il se trouve dans l'espace réservé au contenu d'une page maître): 

<input id="ctl00_contentplaceholder_txtText" />

Pour trouver ce contrôle: 

$("input[id$='txtText']")

Soyez prudent lorsque vous utilisez ceci dans un répéteur.

Dans WebForm / Page HTML .... 

<asp:TextBox ID="txtUserName" runat="server" Class="form-control"></asp:TextBox>

Dans Jquery 

var UserName = $("[id*=txtUserName]").val();
alert(UserName);

100% sûr que cela fonctionne pour moi ....

Essayez de le mettre dans un nom de variable: 

var txtTestID = '#' + '<%=txtTest.ClientID %>';

$(txtTestID).val();

Je ne suis pas sûr que le <%= aime être entre guillemets.J'ai toujours eu des comportements mitigés lorsque je n'utilisais pas le guillemet simple.

Lorsque vous utilisez ASP.NET 4 et que ClientIDMode est défini sur «Predictable», vous pouvez prédire l'ID en fonction de la hiérarchie.Ou réglez-le sur "Statique", pour que asp.net ne le gâche pas.

Article de ScottGu à ce sujet http://weblogs.asp.net/scottgu/archive/2010/03/30/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net-4-0-series.aspx

Et ceci est extrêmement utile lors de l'utilisation de scénarios de fichiers JS externes.

Comme Darin Dimitrov l'a dit dans sa réponse:

<%= txtTest.ClientID %> devrait fonctionner mais pas dans un javascript séparé fichier dans lequel les scripts côté serveur ne s'exécutent pas .

Les solutions que j'ai pu trouver pour celles-ci sont: 

<input runat="server" id="txtTest" value="test" class="txtTest" />
  • Utilisez class au lieu de ID

En utilisant la classe, vous pouvez récupérer la valeur n'importe où. C'est l'une des meilleures solutions (généralement la meilleure) 

var value = $('.txtTest').val();
  • Utilisez le code ClientID dans le aspx

Vous pouvez toujours appeler ClientID dans aspx, mais si vous travaillez avec une sorte de structure, ce n'est pas la meilleure solution. J'aime utiliser cette méthode lorsque je teste quelque chose. 

var value = $('#<%=txtTest.ClientID%>').val();

Vous pouvez également utiliser ClientID dans un fichier js externe avec une solution de contournement. CE N'EST PAS JOLI , à utiliser uniquement si vous en avez vraiment besoin. Je fais généralement cela lorsque j'utilise Telerik.

Dans l'aspx: 

var id = <%=txtTest.ClientID%>;

Dans le fichier js: 

var value = $('#'+id).val();

donc le HTML devient 

<input runat="server" id="txtTest" value="test" ClientIDMode="Static" />

et les js peuvent l'appeler comme il est nommé de 

var value = $('#txtTest').val();

Le problème avec cette solution est que vous devez être très prudent pour éviter la duplicité sur le générique code-étiquette de votre page. Essayez de ne jamais utiliser le mode ids dans un contrôleur.

Comme l'indique MSDN:

La valeur ClientID est définie sur la valeur de la propriété ID. Si la control est un conteneur de dénomination, le contrôle est utilisé en haut de la hiérarchie de nommage des conteneurs pour tous les contrôles qu'il contient.

Le lien de réponse de shaans est un endroit formidable pour consulter des informations supplémentaires sur ClientIDMode.

Balisage HTML plus propre avec les formulaires Web ASP.NET 4 - ID client (séries VS 2010 et .NET 4.0)

Pour éviter les problèmes avec les ID rendus, utilisez plutôt une classe.Cela ne changera pas pendant le rendu: 

function contatoModal() {

//alert("Test");

alert($(".txtTest").val());

}

HTML: 

< input runat="server" id="txtTest" value="test" class="txtText" />
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top