ASP.net Controls via Javascript ansprechen

Hat man eine ASP.net Seite, welche eine Masterpage und allenfalls noch Usercontrols (*.ascx Files) verwendet so werden die ID's aller Elemente von .net automatisch umgeschrieben. Schauen wir uns folgendes Control an:

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

Die ID von diesem ist in dem Fall txtSearch. Der HTML Output dieses Feldes sieht unter Umständen jedoch so aus:

<input type="text" id="ctl00_body_searchdomain_txtSearch" name="ctl00$body$searchdomain$txtSearch" />

Da man diese ID nicht immer erahnen kann (die entsprechenden Usercontrols können ja beliebig verschachtelt werden) ist es schwierig via Javascript zuzugreifen resp. die Felder zu selektieren. Dazu habe ich nun im gleichen File wo ich die TextBox definiert habe (z.B. im search.ascx) eine Javascript Klasse clientFields erstellt und referenziere mittels ClientID auf die generierte ID (serverseitig).

<script type="text/javascript">
    var clientFields = {
        'txtSearch': '<%= txtSearch.ClientID %>',
        'mySecondField': '<%= mySecondField.ClientID %>'
    };
</script>

Im externen Javascript kann ich dann wie folgt auf die Felder zugreifen (Beispiel via jQuery):

$(document).ready(function () {
    var myField = $('#' + clientFields .txtSearch);
});

Zu beachten ist, dass erst auf die neue Klasse zugegriffen wird wenn das Dokument geladen wurde (ready ist). Die Klasse clientFields wird direkt im DOM geladen und ist somit verfügbar, sobald auch das Dokument ready ist.

dotnet/asp.net_controls_via_javascript_ansprechen.txt · Zuletzt geändert: 27.12.2013 19:46 (Externe Bearbeitung)
Nach oben
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0