Cómo evitar que ASP.NET cambie los ID para usar jQuery

Tengo este control de etiqueta en mi página web

 

Y cuando la página representa la identificación del control cambia a algo como esto

  test 

¿Cómo puedo evitar que asp.net cambie los ID para realizar una operación jQuery como esta?

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

en lugar de usar este selector

 $('#Label1') 

usa este, básicamente estás usando el clásico código del lado del servidor asp inline.

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

esto insertará cualquier ID que se genere para colocarse como un literal.

Si desea usar archivos externos, le sugiero que cree un obj que sea global en la página para contener todos los ID de sus clientes y luego haga referencia a ese obj dentro de sus archivos externos (no es ideal pero es una solución)

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

y luego en su archivo externo puede acceder a Label1 por ejemplo: $('#' + MyClientIDs.Label1)

.NET 4 ahora tiene la capacidad de permitirle elegir su ClientIDMode :

Tipo: System.Web.UI.ClientIDMode

Un valor que indica cómo se genera la propiedad ClientID. El valor predeterminado es Heredar.

AutoID El valor de ClientID se genera al concatenar los valores de ID de cada contenedor de nombres principal con el valor de ID del control. En escenarios de enlace de datos donde se representan múltiples instancias de un control, se inserta un valor incremental delante del valor de ID del control. Cada segmento está separado por un carácter de subrayado (_). Este algoritmo se usó en versiones de ASP.NET anteriores a ASP.NET 4.

Estático El valor de ClientID se establece en el valor de la propiedad de ID. Si el control es un contenedor de nombres, el control se usa como la parte superior de la jerarquía de nombres de contenedores para cualquier control que contenga.

Predecible Este algoritmo se usa para controles que están en controles enlazados a datos. El valor de ClientID se genera al concatenar el valor de ClientID del contenedor de nombres principal con el valor de ID del control. Si el control es un control vinculado a datos que genera varias filas, el valor del campo de datos especificado en la propiedad ClientIDRowSuffix se agrega al final. Para el control GridView, se pueden especificar múltiples campos de datos. Si la propiedad ClientIDRowSuffix está en blanco, se agrega un número secuencial al final en lugar de un valor de campo de datos. Este número comienza en cero y se incrementa en 1 por cada fila. Cada segmento está separado por un carácter de subrayado (_).

Heredar El control hereda la configuración ClientIDMode de su control NamingContainer.

No puede evitar que asp.net genere esos ID. Así es como hace las cosas.

Todavía puedes usar jquery así:

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

o

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

establecer ClientIDMode="Static" . Esto resolverá su problema.

Ejemplo:

  

Si y solo si su disposición de contenedores nunca va a cambiar y necesita poner su JavaSctipt / jQuery en un archivo externo, podría usar los ID generados dentro de los selectores de jQuery, es decir,

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

Obviamente, este enfoque requiere que averigüe cuáles serán los identificadores generados y requiere precaución si alguna vez comienza a cambiar la construcción del sitio / aplicación.

De lo contrario, tus mejores opciones son

1. Use el marcado de código del lado del servidor en línea. La desventaja de este enfoque es que no puede poner su código js en un archivo externo –

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

2. Defina clases de CSS únicas en cada control que necesite usar en su jQuery, que aún le permitiría poner su código js en un archivo externo.

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

3. Use los selectores de jQuery para hacer coincidir el patrón con el ID original, que nuevamente le permitiría poner su código js en un archivo externo.

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

Este selector de jQuery seleccionará todos los elementos con identificador de atributo cuyo valor finaliza con Label3 . El único inconveniente potencial que pude ver con este enfoque es que, en teoría, podría ser posible tener un control Label con id Label3 en, por ejemplo, una página maestra y también en dos páginas de contenido. En este ejemplo, usar el selector jQuery anterior coincidirá con las tres tags, lo que puede tener consecuencias no deseadas.

EDITAR:

Pensé que podría ser útil llamar tu atención sobre el control IDOverride . Una página de ejemplo se puede encontrar aquí

Le permite especificar qué controles deben tener su id. Desfigurado dentro del marcado HTML saltado anulado con el id como se da en el archivo .aspx al procesar la página HTML. Solo he jugado brevemente con una única página maestra y paneles, pero parece funcionar bien. Al usar esto, puedes usar los ID originales dentro de tus selectores jQuery. Tenga en cuenta, sin embargo, que los resultados son impredecibles si tuviera controles con los mismos identificadores en sus páginas maestras y páginas de contenido que se combinan para representar el HTML de una página.

Respuesta corta, no se preocupe por usar los ID de asp.net. En asp.net puedes agregar tu propio atributo a una etiqueta:

  

Luego, en jquery puede referirse a este elemento a través de:

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

Hago esto todo el tiempo con jQuery. Espero eso ayude.

El código en línea es la forma correcta de hacerlo. Sin embargo, esto cambiará en ASP.NET 4.0. Hemos dedicado un tiempo a agregar una función que permite el control total de los ID generados por el cliente. A continuación se encuentran algunos recursos en la web sobre esta función.

Si escribe esto en la primera línea de MasterPage, sus ID de control no cambiarán:

ClientIDMode="Static"

Me gusta;

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

La mayoría de las sugerencias aquí funcionarán, pero los resultados de las pruebas en el código jQuery muestran que los selectores de ID puros son, con mucho, los más rápidos. El que uso más a menudo:

 $("[id$=origControlId]") 

es bastante lento, pero el problema no es demasiado evidente a menos que la página tenga muchos controles y mucha jQuery.

Dado que es bastante fácil asignar múltiples clases a un control, podría darle a cada una una CSSClass que coincida con la ID. Como serían únicos (tendrás que mirar los controles de tipo de repetidor que generan múltiples controles), puedes seleccionar por clase.

Por ejemplo:

   

podría ser seleccionado únicamente por:

 $(".Label1") 

Que es casi tan rápido como una selección de ID.

Nunca había considerado esto:

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

¡Pero voy a intentarlo!

Tienes que pasar el ClientID del control al código de JavaScript (sin embargo, dudo que Label1 cambie su nombre a Label3)

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

Puede usar ClientID (como todos los demás), pero el problema es que no se puede usar en un archivo JavaScript externo.

Entonces, idealmente, en lugar de usar el ID para referenciarlo desde jQuery, use una clase CSS :

  

Entonces puedes referenciarlo así:

 $(".myclass") 

Puede anular ClientID y UniqueID como lo hizo este tipo .

 ///  /// Override to force simple IDs all around ///  public override string UniqueID { get { return this.ID; } } ///  /// Override to force simple IDs all around ///  public override string ClientID { get { return this.ID; } } 

También puede crear un control personalizado que herede de Label que anula la propiedad ID para que sea la que usted desea.

Esto se puede lograr reemplazando el ID de asp.net con el ID original a medida que se procesa el control. Esto es bastante fácil y se puede crear creando un conjunto de controles personalizados.

http://www.bytechaser.com/en/articles/ts8t6k5psp/how-to-display-aspnet-controls-with-clean-id-value.aspx

A riesgo de ser un cambio obvio:

  

a

  

ClientIDMode="Static" colocar la propiedad ClientIDMode="Static" en su botón, esto le garantiza que la ID será la misma en tiempo de ejecución, es lo que necesita para obtener el objeto en Javascript.

no es necesario que “evite” que asp.net cambie la identificación del control para usar jquery o javascript en absoluto.

La ID que se representa en su página es la propiedad ClientID del control y lo que está configurando en el control en sí es la ID. no puede establecer la propiedad ClientID, se genera para usted y puede o no ser igual a su ID. sin embargo, como han mencionado otros, puede usar la propiedad ClientID en su aspx:

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

o registrando el script del cliente en su código detrás del archivo usando uno de los métodos de ClientScriptManager.

Solo deshazte del marcador de posición. O seleccione por clase o jerarquía DOM. O incluso use una coincidencia parcial en la ID como último recurso. Hay muchas formas fáciles y limpias de seleccionar un elemento en jQuery, necesitamos alejarnos de nuestros viejos y desagradables hábitos de ASP.NET.

Y Dreas Grech puso el último clavo en el ataúd. No puede usar el uso de archivos de script externos con las soluciones de tipo $ (‘# <% = label1.ClientID%>‘).

Micro

Aún puede usar PlaceHolders y establecer ClientIDMode en la etiqueta PlaceHolder:

   

Ninguna de las identificaciones de controles contenidas será alterada.

Simple, con anulación de la clase de control. Aquí hay un ejemplo con un HtmlGenericControl, pero puede hacerlo con cualquier control ASP.Net:

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