So greifen Sie mit jquery auf das asp.net-Steuerelement zu

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

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

27
Krishna 27 Nov. 2013 im 00:21

3 Antworten

Beste Antwort

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

Der obige Aspx-Code ändert sich beim Rendern 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 keineswegs umfassend, aber ich werde es versuchen.

Option1:

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

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

Option2:

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

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

Die Verwendung von Attributselektoren - ebenfalls empfohlen - sieht etwas hässlich, aber effektiv aus.

Ich habe hier einige Fragen gesehen, die sich um die Leistung dieser Selektoren sorgen. Ist dies der bestmögliche Weg? Nein.

Aber die meiste Zeit werden Sie den Leistungseinbruch nicht einmal bemerken, es sei denn natürlich, Ihr DOM-Baum ist riesig.

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 für das Steuerelement ClientIDMode="Static", das in .NET Framework 4.0 eingeführt wurde, damit die 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 Einfügens der von der Seite gerenderten ID und deren Verwendung im Skript. Schau, das wird funktionieren. Überlegen Sie jedoch, was passieren wird, wenn sich die Steuerelement-ID oder die Master-ID ändert. Natürlich müssen Sie diese IDs erneut besuchen und erneut ändern. Verwenden Sie stattdessen eine der oben genannten Optionen und lassen Sie sich behandeln.

80
Krishna 27 Nov. 2013 im 14:38

Zusätzlich zur Antwort von @krishna können Sie die Generierung der Websteuerungs-Client-ID auf Seitenebene sowie auf Websiteebene 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 für web.config wie unten gezeigt verwenden

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

   ...
 </system.web>
0
M.Hassan 7 Nov. 2017 im 23:05

Zusätzlich zur Antwort von krishna können Sie stattdessen das Namensattribut verwenden, wenn es von IIS in HTML mit dem zugewiesenen Namensattributwert gerendert wird sollte mit dem ID-Wert identisch sein:

Beispiel

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

var invDate = $("input[name=txtSalesInvoiceDate]");
1
Ashraf Abusada 17 Juli 2017 im 15:22