web-dev-qa-db-fra.com

Accéder aux contrôles Asp.net en utilisant jquery (toutes les options)

Comment accéder au contrôle asp.net en utilisant jquery

<asp:TextBox runat="server" ID="myTextBox" />

$('#myTextBox') ne fonctionnerait pas.

javascriptc#jqueryasp.net
23
Krishna

<asp:TextBox runat="server" ID="myTextBox" />

Le code aspx ci-dessus lors du rendu sur une page devient

<input type="text" id="ctl00_Main_myTextBox" name="ctl00$Main$myTextBox" />

En effet, les informations principales et de contrôle dans lesquelles se trouve le contrôle .net sont préfixées, ce qui nous complique la tâche pour écrire un sélecteur.

Vous avez quelques options. Ce n’est en aucun cas exhaustif, mais je vais essayer.

Option1:

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

Utilisez le ClientID - recommandé mais meh .. pas tellement. J'essaierais d'éviter d'écrire ClientID si je le pouvais. La raison principale en est que vous ne pouvez l'utiliser que dans des pages .aspx et non dans des fichiers .js externes.

Option2:

$('[id$=myTextBox]') // id which ends with the text 'myTextBox'

$('[id*=myTextBox]') // id which contains the text 'myTextBox'

L'utilisation de sélecteurs d'attributs - est également recommandée, semble un peu moche mais efficace.

J'ai vu quelques questions ici, s'inquiétant de la performance avec ces sélecteurs. Est-ce la meilleure façon possible? Non. 

Mais, la plupart du temps, vous ne remarquerez même pas l'impact négatif sur les performances, à moins bien sûr que votre arborescence DOM soit énorme.

Option3:

Utiliser CssClass - hautement recommandé. Parce que les sélecteurs utilisant des classes sont propres et simples. 

Au cas où vous vous le demandiez, CssClass pour les contrôles .net est identique à class pour les contrôles html traditionnels.

<asp:TextBox runat="server" ID="myTextBox" CssClass="myclass" /> //add CssClass

$('.myclass') //selector

Option4:

Utilisez ClientIDMode="Static", introduit dans .NET Framework 4.0, sur le contrôle pour que son ID reste inchangé. - recommandé aussi.

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

$('#myTextBox') //use the normal ID selector

Note: D'après mon expérience, j'ai vu de mauvais sélecteurs comme $('#ctl00_Main_myTextBox'). Ceci est le résultat du copier-coller direct de l'identifiant rendu depuis la page et de l'utiliser dans le script. Regardez, ça va marcher. Mais réfléchissez à ce qui se passera si l’ID de contrôle ou l’ID principal change. Évidemment, vous devrez revisiter ces identifiants et les changer à nouveau. Au lieu de cela, utilisez l’une des options ci-dessus et soyez couvert.

76
Krishna

En plus de la réponse de krishna vous pouvez utiliser l'attribut name à la place, lorsqu'il est rendu en HTML par IIS], la valeur de l'attribut name attribuée doit être identique à la valeur de l'ID:

Exemple

<asp:TextBox ID="txtSalesInvoiceDate" runat="server" />

var invDate = $("input[name=txtSalesInvoiceDate]");
1
Ashraf Abusada

Outre la réponse de @krishna, vous pouvez contrôler la génération d'ID client de contrôle Web au niveau de la page ainsi qu'au niveau du site Web à l'aide de ClientIDMode="Static" dans ASP.NET 4.0. 

Au niveau de la page, comme indiqué ci-dessous: 

<%@ Page Title="" Language="C#" MasterPageFile="~/Members/Site.Master" AutoEventWireup="true" CodeBehind="Calculator.aspx.cs" 
Inherits="store.Members.Calculator" 
ClientIDMode="Static"
%>

Au niveau du site Web

Vous pouvez utiliser les paramètres web.config comme indiqué ci-dessous 

 <system.web>
    <pages ClientIDMode="Static">
    </pages>

   ...
 </system.web>
0
M.Hassan