web-dev-qa-db-de.com

So verhindern Sie, dass ASP.NET die IDs ändert, um jQuery zu verwenden

Ich habe dieses Label-Steuerelement in meiner Webseite

<asp:Label ID="Label1" runat="server" Text="test"></asp:Label>

Wenn die gerenderte Seite die ID des Steuerelements ändert, ändert sich dies in etwa wie folgt

  <span id="ctl00_ContentPlaceHolder1_Label3">test</span>

Wie kann ich verhindern, dass asp.net die IDs ändert, um eine jQuery-Operation wie diese auszuführen

$('#label1').html(xml);
45
ahmed

anstatt diesen Selektor zu verwenden

$('#Label1')

verwenden Sie diese Option, im Grunde verwenden Sie den klassischen asp-Inline-Server-Code.

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

dadurch wird die ID eingefügt, die generiert wurde, um als Literal platziert zu werden.

Wenn Sie externe Dateien verwenden möchten, würde ich vorschlagen, dass Sie ein obj erstellen, das auf der Seite global ist und alle Ihre Client-IDs enthält, und dann auf dieses obj innerhalb Ihrer externen Dateien verweisen (nicht ideal, aber es ist eine Lösung)

var MyClientIDs = {
    Label1 = '<%= Label1.ClientID %>',
    Label2 = '<%= Label2.ClientID %>',
    Textbox1 = '<%= Textbox1.ClientID %>',
    Textbox2 = '<%= Textbox2.ClientID %>'
};

in Ihrer externen Datei können Sie beispielsweise auf Label1 zugreifen: $('#' + MyClientIDs.Label1)

40
Jon Erickson

.NET 4 kann jetzt Ihren ClientIDMode auswählen:

Geben Sie Folgendes ein: System.Web.UI.ClientIDMode

Ein Wert, der angibt, wie die ClientID-Eigenschaft generiert wird. Der Standardwert ist Inherit.

AutoID Der ClientID-Wert wird durch Verketten der ID-Werte generiert von jedem übergeordneten Benennungscontainer mit dem ID-Wert des Steuerelements. Im Datenbindungsszenarien, bei denen mehrere Instanzen eines Steuerelements .__ sind. gerendert wird ein inkrementierender Wert vor dem Steuerelement .__ eingefügt. ID-Wert Jedes Segment wird durch einen Unterstrich (_) ..__ getrennt. Dieser Algorithmus wurde in früheren Versionen von ASP.NET als ASP.NET 4 verwendet.

Static Der ClientID-Wert wird auf den Wert der ID-Eigenschaft festgelegt. Ob Das Steuerelement ist ein Benennungscontainer. Das Steuerelement wird als oberes Element von .__ verwendet. die Hierarchie der Benennung von Containern für alle darin enthaltenen Steuerelemente.

Predictable Dieser Algorithmus wird für Steuerelemente verwendet, die sich in datengebundenen .__ befinden. Kontrollen. Der ClientID-Wert wird durch Verketten von .__ generiert. ClientID-Wert des übergeordneten Namenscontainers mit dem ID-Wert von Steuerung. Wenn das Steuerelement ein datengebundenes Steuerelement ist, das .__ generiert. mehrere Zeilen, der Wert des Datenfelds, das in der .__-Datei angegeben ist. Die Eigenschaft ClientIDRowSuffix wird am Ende hinzugefügt. Für die GridView steuern, können mehrere Datenfelder angegeben werden. Wenn der Die Eigenschaft "ClientIDRowSuffix" ist leer. Eine fortlaufende Nummer wird unter .__ hinzugefügt. das Ende anstelle eines Datenfeldwerts. Diese Nummer beginnt bei Null und wird für jede Zeile um 1 erhöht. Jedes Segment ist durch ein .__ getrennt. Unterstrich (_). 

Inherit Das Steuerelement erbt die ClientIDMode-Einstellung seines NamingContainer-Steuerelements.

36

Sie können asp.net nicht davon abhalten, diese IDs zu generieren. So macht es die Dinge.

Sie können jquery immer noch so verwenden:

$('#<%=label1.ClientID %>').html(xml) 

oder

$('[id$=_label1]').html(xml)
21
Crescent Fresh

setze ClientIDMode="Static". Damit lösen Sie Ihr Problem.

Beispiel:

<asp:Label ID="Label1" ClientIDMode="Static" runat="server" Text="test"></asp:Label>
19
user2622042

Wenn und nur dann, wenn Sie durch das Container-Layout nie geändert werden und Sie Ihre JavaSctipt/jQuery in eine externe Datei schreiben müssen, können Sie die generierten IDs in Ihren jQuery-Selektoren verwenden dh.

$('#ctl00_ContentPlaceHolder1_Label3').html(xml);

Natürlich müssen Sie bei diesem Ansatz herausfinden, wie die generierten IDs aussehen werden. Wenn Sie mit dem Ändern der Site-/Anwendungskonstruktion beginnen, ist Vorsicht geboten.

Ansonsten sind Ihre am besten -Optionen 

1. Verwenden Sie den Inline-Server-Side-Code-Markup. Der Nachteil dieses Ansatzes ist, dass Sie Ihren js-Code nicht in eine externe Datei einfügen können.

$('#<%= Label3.ClientID %>').html(xml);

2. Definieren Sie für jedes Steuerelement, das Sie in Ihrer jQuery verwenden müssen, eindeutige CSS-Klassen, mit denen Sie den js-Code dennoch in eine externe Datei einfügen können.

<asp:Label ID="Label3" runat="server" Text="test" CssClass="label3">
</asp:Label>

$('.label3').html(xml);

3. Verwenden Sie jQuery-Selektoren, um mit der Original-ID ein Muster zu erhalten, mit dem Sie den js-Code erneut in eine externe Datei einfügen können.

$('[id$=Label3]').html(xml);

Dieser jQuery-Selektor wählt alle Elemente mit dem Attribut id aus, deren Wert mit Label3 endet. Der einzige potenzielle Nachteil, den ich mit diesem Ansatz erkennen konnte, ist, dass theoretisch ein Label-Steuerelement mit der ID Label3 in etwa, einer Masterseite und auch in zwei Inhaltsseiten verfügbar sein könnte. In diesem Beispiel würde die Verwendung des jQuery-Selektors oben für alle drei Labels zutreffen, was unerwünschte Folgen haben kann.

EDIT:

Ich dachte, es könnte nützlich sein, Ihre Aufmerksamkeit auf die IDOverride-Steuerung zu lenken. Eine Beispielseite finden Sie hier

Hier können Sie angeben, für welche Steuerelemente die entstellte ID innerhalb des ausgegebenen HTML-Markups mit der ID überschrieben werden soll, wie sie in der ASPX-Datei angegeben ist, wenn die HTML-Seite ausgegeben wird. Ich habe nur kurz mit einer einzigen Masterseite und Panels gespielt, aber es scheint gut zu funktionieren. Auf diese Weise könnten Sie die ursprünglichen IDs in Ihren jQuery-Selektoren verwenden. Beachten Sie jedoch, dass die Ergebnisse nicht vorhersagbar sind, wenn Sie Steuerelemente mit denselben IDs in Ihren Masterseiten und Inhaltsseiten haben, die kombiniert werden, um den HTML-Code für eine Seite zu rendern.

16
Russ Cam

Kurze Antwort, machen Sie sich keine Sorgen über die Verwendung der asp.net-IDs. In asp.net können Sie einem Tag ein eigenes Attribut hinzufügen:

<asp:TexBox ID="myTBox" runat="server" MyCustomAttr="foo" />

Dann können Sie in jquery auf dieses Element zugreifen:

$("input[MyCustomAttr='foo']")

Ich mache das immer mit jQuery. Ich hoffe es hilft.

7
Notorious2tall

Sie können einen Klassennamen anstelle einer ID aufrufen

Zum Beispiel;

$('.CssClassName'). ...

Wenn Sie dies in die allererste Zeile von MasterPage eingeben, werden Ihre Steuerelement-IDs nicht geändert:

ClientIDMode="Static"

Zum Beispiel;

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="Main_MasterPage" ClientIDMode="Static" %>
6
HQtunes.com

Der Inline-Code ist der richtige Weg. Dies wird sich jedoch in ASP.NET 4.0 ändern. Wir haben einige Zeit mit dem Hinzufügen einer Funktion verbracht, die die vollständige Kontrolle der IDs ermöglicht, die auf der Clientseite generiert werden. Nachfolgend finden Sie einige Ressourcen im Internet zu dieser Funktion.

5

Die meisten Vorschläge hier funktionieren, aber Testergebnisse im jQuery-Code zeigen, dass reine ID-Selektoren bei weitem die schnellsten sind. Die, die ich am häufigsten benutze:

$("[id$=origControlId]")

ist ziemlich langsam, aber das Problem ist nicht offensichtlich, es sei denn, die Seite hat viele Steuerelemente und viel jQuery.

Da es ziemlich unproblematisch ist, einem Steuerelement mehrere Klassen zuzuweisen, können Sie jeder eine CSS-Klasse zuweisen, die der ID entspricht. Da sie dann eindeutig sind (Sie müssen Repeater-Steuerelemente beobachten, die mehrere Steuerelemente generieren), können Sie sie nach Klassen auswählen.

Zum Beispiel:

<asp:Label ID="Label1" CssClass="Label1 SomeOtherClass" runat="server" Text="test">
</asp:Label>

könnte eindeutig ausgewählt werden durch:

$(".Label1")

Welches ist fast so schnell wie eine ID-Auswahl.

Ich hatte noch nie darüber nachgedacht:

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

aber ich werde es versuchen!

4
CMPalmer

Sie können die Variable ClientID verwenden (genau wie alle anderen auch gesagt haben). Das Problem besteht jedoch darin, dass sie nicht in einer externen JavaScript-Datei verwendet werden kann.

Verwenden Sie stattdessen die ID, um von jQuery aus darauf zu verweisen, verwenden Sie eine CSS-Klasse :

<asp:Label ID="Label1" runat="server" Text="test" CssClass="myclass"></asp:Label>

Dann können Sie es wie folgt referenzieren:

$(".myclass")
3
Andreas Grech

Sie müssen die ClientID des Steuerelements an den JavaScript-Code übergeben (ich bezweifle jedoch, dass Label1 in Label3 umbenannt wird).

ClientScriptManager.RegisterClientScriptBlock(GetType(), "someKey", 
    "$('#" + Label1.ClientID + "').html(xml);", true);
3
devio

Sie können die ClientID und die UniqueID wie dieser Typ überschreiben.

/// <summary>
/// Override to force simple IDs all around
/// </summary>

public override string UniqueID
{
    get
    {
        return this.ID;
    }
}

/// <summary>
/// Override to force simple IDs all around
/// </summary>

public override string ClientID
{
    get
    {
        return this.ID;
    }
}
2
Sampson

Sie können auch ein benutzerdefiniertes Steuerelement erstellen, das von Label erbt, das die ID-Eigenschaft überschreibt, so wie Sie es möchten.

2
eulerfx

Dies kann erreicht werden, indem die asp.net-ID durch die ursprüngliche ID ersetzt wird, wenn das Steuerelement gerendert wird .. Dies ist ziemlich einfach und kann durch Erstellen einer Reihe benutzerdefinierter Steuerelemente erstellt werden.

http://www.bytechaser.com/de/articles/ts8t6k5psp/wie-nach-display-aspnet-steuerelemente-mit-clean-id-value.aspx

2
Alex

Sie müssen die Eigenschaft ClientIDMode="Static" in Ihre Schaltfläche einfügen. Dadurch wird gewährleistet, dass die ID zur Laufzeit dieselbe ist. Dies ist, was Sie benötigen, um ein Objekt in Javascript zu erhalten.

1
RPichioli

Auf die Gefahr hin, offensichtlich offensichtlich zu sein:

<asp:Label ID="Label1" runat="server" Text="test"></asp:Label>

zu

<Label ID="Label1" Text="test"></Label> 
1

Sie können weiterhin PlaceHolders verwenden und ClientIDMode im PlaceHolder-Tag festlegen:

<asp:ContentPlaceHolder ID="BodyContent" runat="server" ClientIDMode="Static">        
</asp:ContentPlaceHolder>

Keine der enthaltenen Steuerelement-IDs wird geändert.

0
Elo

Einfach den Platzhalter loswerden. Oder wählen Sie die Klassen- oder DOM-Hierarchie aus. Oder verwenden Sie als letzten Ausweg sogar einen partiellen Abgleich auf der ID. Es gibt viele einfache und saubere Wege, ein Element in jQuery auszuwählen. Wir müssen uns von unseren alten, hässlichen ASP.NET-Gewohnheiten entfernen.

Und Dreas Grech steckte den letzten Nagel in den Sarg. Sie können keine externen Skriptdateien mit Lösungen vom Typ $ ('# <% = label1.ClientID%>') verwenden.

Mike 

0
Mike

Einfach, mit Überschreiben der Kontrollklasse. Hier ist ein Beispiel mit einem HtmlGenericControl, aber Sie können es mit jedem ASP.Net-Steuerelement machen:

public class NoNamingContainerControl : HtmlGenericControl
{
    public NoNamingContainerControl(string tag) : base(tag) { }
    public override string ClientID
    {
        get
        {
            return this.ID;
        }
    }
}
0
Shai Petel

sie müssen asp.net nicht daran hindern, die Steuerelement-ID zu ändern, um jquery oder Javascript für diese Angelegenheit zu verwenden.

die ID, die auf Ihrer Seite gerendert wird, ist die ClientID-Eigenschaft des Steuerelements, und Sie legen die ID des Steuerelements selbst fest. Sie können die ClientID-Eigenschaft nicht festlegen. Sie wird für Sie generiert und ist möglicherweise nicht mit Ihrer ID identisch. Wie bereits erwähnt, können Sie jedoch die ClientID-Eigenschaft entweder in Ihrem aspx verwenden:

$('<%= Label1.ClientID %>').html()

oder indem Sie das Clientskript mithilfe einer der ClientScriptManager-Methoden in Ihrem Code hinter der Datei registrieren.

0
Omer Bokhari