So behandeln Sie die Elemente -ID, wenn Sie JQuery- und ASP.NET -Benutzersteuerungen verwenden

Question

Ich habe einige Benutzerkontrollen in ASP.NET, die ich einfach als HTML verwende, dh ohne Code-Behind.

Ich habe eine Kontrolle Ich habe ein Element mit einer festen ID und ich zeige es mit einigen JQuery -Client -Skripten. Zum Beispiel:

<div id="slider-section"></div>

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        var slider = $('#slider-section');
        // ... do something with the jQuery Object
    });
</script>

Dies funktioniert ohne Probleme sehr gut. Aber es gibt einen Nebeneffekt. Wenn ich auf meiner Seite zwei Instanzen derselben Benutzersteuerung hinzufüge, habe ich zwei Elemente mit derselben ID.

Welches ist Ihrer Meinung nach eine gute Möglichkeit, mit einer solchen Situation umzugehen?

Danke

Answer 1

Wenn Sie hinzugefügt werden runat="server" An Ihren einfachen HTML-Steuerelementen haben sie wie alle anderen Server-Steuerelemente eine Seiten-eindeutige ClientID. Es ist kein CodeBehind -Code erforderlich.

Z.B

<div id="slider-section" runat="server"></div>

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        var slider = $('#<%=slider-section.ClientID %>');
        // ... do something with the jQuery Object
    });
</script>

Answer 2

ASP.NET -Controller, wenn sie auf der Client -Seite gerendert werden, erstellt eine andere ID: Beispiel:

Sie definieren eine Textbox:

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

Wenn Sie den Quellcode der Seite überprüfen, werden Sie feststellen, dass die Textbox -ID so etwas ist:

id="{GUID}_Textbox1"

Sie müssen also einen Selektor verwenden, um das Ende der ID wie folgt zu finden:

<div id="slider-section"></div>

    <script type="text/javascript" language="javascript">
        $(document).ready(function () {      
            var slider = $('input[id$='TextBox1']').{youroptions};
            // ... do something with the jQuery Object
        });
    </script>

Überprüfen Sie die Dokumentation hier: http://api.jquery.com/category/selectors/

Viel Spaß ;)

Answer 3

Während sich Browser möglicherweise nicht über mehrere identische IDs beschweren, ist es nicht korrekt, sie auf einer HTML -Seite zu haben.

Ihr eigentliches Problem ist, dass Sie den ASP.NET -Code ändern müssen, der die Benutzersteuerung hinzufügt, um sicherzustellen, dass alle IDs eindeutig sind. Dann wird auch Ihr JQuery -Problem verschwinden!

Answer 4

Ich bin mir nicht sicher, ob ich Ihre Frage vollständig verstehe, aber basierend auf dem, was ich denke, Sie fragen. Würde das Ändern des JQuery -Selektors zur Verwendung der Klasse des HTML -Elements Ihr Problem lösen? Vielleicht würde so etwas für Sie funktionieren:

<div id="slider-section1" class="slider-section"></div>
<div id="slider-section2" class="slider-section"></div>

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        var slider = $('.slider-section');
        // ... do something with the jQuery Object
    });
</script>

PS Es ist keine gute Praxis, HTML -Elemente auf der Seite mit derselben ID/demselben Namen zu haben, auch wenn der Browser es unterstützt.

Answer 5

Der springende Punkt einer ID besteht darin, Elemente eindeutig zu identifizieren. Wenn Sie Elemente zusammen "gruppieren" möchten, sollten Sie ihnen das gleiche geben class.

Dies ist eine ziemlich gute Erklärung. http://css-tricks.com/818- the-differenz-bet zwischen-id-and-class/

Answer 6

Lies das clientID der Kontrolle in Ihrem Markup und in eine JavaScript -Variable oder direkt in Ihre JQuery -Funktion ein.

dh:

<div id="slider-section"></div>

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        var slider = $('#<%= yourControl.ClientID %>');
        // ... do something with the jQuery Object
    });
</script>