net - getelementsbytagname javascript ejemplo

¿Referencia de control de ASP.NET por ID en JavaScript?

Question

Cuando los controles ASP.NET son renderizados, sus identificadores a veces cambian, como si estuvieran en un contenedor de nombres. Button1 puede tener un ID de ctl00_ContentMain_Button1 cuando se procesa, por ejemplo.

Sé que puede escribir su JavaScript como cadenas en su archivo .cs, obtener el ID de cliente del control e insertar el script en su página usando clientscript, pero ¿hay alguna manera de que pueda hacer referencia a un control directamente desde JavaScript utilizando ASP.NET Ajax?

He descubierto que escribir una función para analizar el dom recursivamente y encontrar un control que CONTIENE la identificación que deseo no es confiable, así que estaba buscando una mejor práctica en lugar de una solución alternativa.

Answer 1

Ah, y también encontré esto, en caso de que alguien más tenga este problema.

Use un selector jQuery personalizado para los controles asp.net: http://john-sheehan.com/blog/custom-jquery-selector-for-aspnet-webforms/

Answer 2

Esta publicación de Dave Ward podría tener lo que estás buscando:

http://encosia.com/2007/08/08/robust-aspnet-control-referencing-in-javascript/

Extracto del artículo:

De hecho, hay. La mejor solución es usar código ASP.NET en línea para inyectar la propiedad ClientID del control:

$get(''<%= TextBox1.ClientID %>'')

Ahora se hace referencia al ID de elemento de cliente correcto, independientemente de la estructura de la página y el nivel de anidamiento del control. En mi opinión, el muy pequeño costo de rendimiento de este método bien vale la pena para hacer que las secuencias de comandos de su cliente sean más resistentes al cambio.

Y un código de muestra de Dave del hilo de comentarios de esa publicación:

<script>
  alert(''TextBox1 has a value of: '' + $get(''<%= TextBox1.ClientID %>'').value);
</script>

El hilo de comentarios al artículo que he vinculado anteriormente también tiene una buena discusión.

Answer 3

Hago algo similar a Rex M excepto para evitar múltiples etiquetas de script. Utilizo una función en mi clase base de página para registrar los controles que voy a usar en el lado del cliente, luego los escucho en html dentro de 1 etiqueta de script.

Incluso podría crear una subclase de sus controles para que se registre automáticamente con la función o use una propiedad booleana para establecer si va a usarlos en el lado del cliente.

Answer 4

No creo que haya una sola "mejor práctica" para hacer esto. Hay muchas buenas prácticas diferentes. Aquí está el nuestro:

Cada control que tiene funcionalidad del lado del cliente representa un bloque de script en línea, directamente debajo del marcado para el control:

<span id="something_crazy_long">
    control markup
</span>
<script type="text/javascript">new CustomControl(''something_crazy_long'');</script>

Cada control tiene un JS de acompañamiento como:

var CustomControl = function(id) {
    this.control = document.getElementByID(id);
    this.init();
};

CustomControl.prototype.init = function() {
    //do stuff to wire up relevant events
};

En el código subyacente, hacemos algo como:

class CustomControl : Control

override void Render(HtmlTextWriter writer)
{
    writer.WriteBeginTag("span");
    writer.WriteAttribute("id", this.ClientID);
    writer.Write(HtmlTextWriter.TagRightChar);
    //write control markup
    writer.WriteEndTag("span");
    writer.WriteBeginTag("script");
    writer.WriteAttribute("type", "text/javascript");
    writer.Write(HtmlTextWriter.TagRightChar);
    writer.Write(
        string.Format("new CustomControl(''{0}'');", this.ClientID)
    );
    writer.WriteEndTag("script");
}

Answer 5

Para ''ctl00_ContentMain_Button1'': en asp.net cuando la página se representa en el navegador, la primera parte permanece igual a ''ctl00''. La segunda parte es ID de ContentPlaceHolder utilizado ''ContentMain''. El tercero es ID de un control ''Button1''

Me gustó esto http://codedotnets.blogspot.in/2012/01/how-get-id-server-control-javascript.html

Answer 6

Prefiero las etiquetas de datos enlazados en el valor de marcado document.getElementById (''<% # TextBox1.ClientID%>'')., Sobre el uso de la implementación de la etiqueta del lado del servidor <% = TextBox1.ClientID%>.

Las etiquetas del lado del servidor le prohíben agregar controles al dom en el código subyacente. Esta necesidad surge comúnmente a medida que desarrolla su aplicación y el enfoque de datos puede salvarlo de las reescrituras principales.

Al usar etiquetas del lado del servidor también se conocen como ''bloques de código'' que realizan esta operación común

this.Form.Controls.Add (myContorl);

genera este error en tiempo de ejecución:

La colección Controls no se puede modificar porque el control contiene bloques de código (es decir, <% ...%>).

Desafortunadamente, esto a menudo solo se vuelve inherentemente obvio después de que haya construido su sitio web.

Al implementar el control vinculado a los datos ''<% # TextBox1.ClientID%>'', resuelva el valor de las propiedades de control a las que se hace referencia en el marcado, en el lugar apropiado, como el final de los datos de Page_Load, vinculados así:

Page.DataBind ()

Tenga en cuenta que Page.DataBind () hace que los controles secundarios de la página también sean DataBind, esto puede ser un efecto secundario no deseado si la página maneja el enlace de datos de ciertos controles secundarios por separado. Si este es el caso, el enlace de datos se puede realizar en el control individual de esta manera:

TextBox1.DataBind ()

Una vez que haya salpicado su aplicación de sitio web con etiquetas del lado del servidor reemplazándolas con databinds se vuelve problemático, especialmente cuando las páginas han sido codificadas para manejar databinds. en su propia.

Answer 7

Puede cambiar a la propiedad ClienIDMode del control a ''Static'' que dará como resultado la misma ID que otorga el control en el código .NET.

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

resultará:

<input name="ctl00$MainContent$TextBox1" type="text" id="TextBox1"> 

entonces tienes la misma identificación.

Answer 8

También puede obtener la identificación mediante el método document.getElementById .

Answer 9

Un par de pensamientos sobre esto:

1) He tenido mucha suerte al obtener elementos por clase css en lugar de id porque los identificadores de asp.net no son confiables, como dijiste. Uso esta función y funciona razonablemente bien:

function getElementsByClass(searchClass,node,tag) {
 var classElements = new Array();
 if ( node == null )
    {
        node = document;
    }

 if ( tag == null )
    {
        tag = ''*'';
    }

 var els = node.getElementsByTagName(tag);
 var elsLen = els.length;
 var pattern = new RegExp("(^|//s)"+searchClass+"(//s|$)");

 for (i = 0, j = 0; i < elsLen; i++) 
    {
        if ( pattern.test(els[i].className) ) 
            {
                classElements[j] = els[i];
                j++;
            }
      }
 return classElements;
}

2) jQuery ayuda mucho aquí. Usando jQuery puedes obtener de manera confiable elementos donde el ID termina con una cierta cadena. Si bien esta no es "la" razón para usar jQuery, definitivamente es una ventaja.

3) Esto se solucionará en asp.net 4.0, así que cuelgue allí :-) http://weblogs.asp.net/asptest/archive/2009/01/06/asp-net-4-0-clientid-overview.aspx