webentwicklung-frage-antwort-db.com.de

Zugriff auf Asp.net-Steuerelemente mit Jquery (alle Optionen)

Zugriff auf die asp.net-Steuerung mithilfe von jquery

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

$('#myTextBox') würde nicht funktionieren.

23
Krishna

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

Der obige ASPX-Code ändert sich bei der Wiedergabe auf einer Seite in

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

Dies liegt daran, dass die Master- und Steuerinformationen, in denen sich das .net-Steuerelement befindet, vorangestellt werden, was es für uns etwas schwierig macht, einen Selektor zu schreiben.

Sie haben einige Möglichkeiten. Dies ist keinesfalls umfassend, aber ich werde es versuchen.

Option 1:

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

Verwenden Sie die ClientID - empfohlen, aber meh .. nicht so sehr. Ich würde versuchen, ClientID zu schreiben, wenn ich könnte. Der Hauptgrund ist, dass Sie es nur in .aspx Seiten und nicht in externen .js Dateien verwenden können.

Option 2:

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

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

Die Verwendung von Attribut-Selektoren - empfohlen wird auch etwas hässlich, aber effektiv.

Ich habe hier ein paar Fragen gesehen, die mir Sorgen um die Leistung mit diesen Selektoren machen. Ist das der beste Weg? Nein. 

Meistens werden Sie den Performance-Hit jedoch nicht bemerken, es sei denn, Ihr DOM-Baum ist riesig.

Option3:

Verwendung von CssClass - sehr zu empfehlen. Weil Selektoren, die Klassen verwenden, sauber und unkompliziert sind. 

Falls Sie sich fragen, ist CssClass für .net-Steuerelemente dasselbe wie class für herkömmliche HTML-Steuerelemente.

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

$('.myclass') //selector

Option4:

Verwenden Sie ClientIDMode="Static", das in .NET Framework 4.0 eingeführt wurde, für das Steuerelement, damit dessen ID unverändert bleibt. - auch empfohlen.

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

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

Hinweis: Nach meiner Erfahrung habe ich hässliche Selektoren wie $('#ctl00_Main_myTextBox') gesehen. Dies ist das Ergebnis des direkten Kopierens der ID, die von der Seite gerendert wird, und sie im Skript verwenden. Schauen Sie, das wird funktionieren. Aber denken Sie darüber nach Was passiert, wenn sich die Steuerelement-ID oder die Master-ID ändert? Natürlich müssen Sie diese IDs erneut aufrufen und erneut ändern. Verwenden Sie stattdessen eine der oben genannten Optionen, und werden Sie abgedeckt.

76
Krishna

Zusätzlich zur Antwort von krishna können Sie stattdessen das Namensattribut verwenden, wenn es von IIS in HTML gerendert wird, und der zugewiesene Namensattributwert sollte dem ID-Wert entsprechen:

Beispiel

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

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

Neben der Antwort von @krishna können Sie die Generierung der Web-Control-Client-ID sowohl auf Seiten- als auch auf Website-Ebene mithilfe von ClientIDMode="Static" in ASP.NET 4.0 steuern. 

Auf Seitenebene, wie unten gezeigt:

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

Auf Website-Ebene

Sie können die Einstellungen von web.config wie folgt verwenden 

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

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