Riferimento Controllo ASP.NET per ID in JavaScript?

Quando i controlli ASP.NET vengono renderizzati, i loro ID a volte cambiano, come se si trovassero in un contenitore di nomi. Button1 potrebbe effettivamente avere un id di ctl00_ContentMain_Button1 quando viene eseguito il rendering, ad esempio.

So che puoi scrivere il tuo JavaScript come stringhe nel tuo file .cs, ottenere il clientID del controllo e iniettare lo script nella tua pagina usando clientscript, ma esiste un modo per fare riferimento a un controllo direttamente da JavaScript usando ASP.NET Ajax?

Ho scoperto che scrivere una funzione per analizzare la dom in modo ricorsivo e trovare un controllo che CONTIENE l’id che voglio sia inaffidabile, quindi stavo cercando una best practice piuttosto che una soluzione.

Questo post di Dave Ward potrebbe avere quello che stai cercando:

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

Estratto dall’articolo:

In effetti c’è. La soluzione migliore è utilizzare il codice ASP.NET inline per iniettare la proprietà ClientID del controllo:

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

Ora viene fatto riferimento all’ID elemento client corretto, indipendentemente dalla struttura della pagina e dal livello di nidificazione del controllo. A mio parere, il leggero costo delle prestazioni di questo metodo vale la pena di rendere lo scripting del client più resiliente al cambiamento.

E alcuni esempi di codice di Dave dal thread dei commenti di quel post:

  

La discussione del commento all’articolo che ho linkato sopra ha anche qualche buona discussione.

È ansible modificare la proprietà ClienIDMode del controllo su 'Static' che risulterà lo stesso ID fornito dal controllo nel codice .NET.

  

risulterà:

  

quindi hai lo stesso ID.

Un paio di pensieri su questo:

1) Ho avuto molta fortuna a ottenere elementi per class CSS invece di ID perché gli ID di asp.net non sono affidabili come hai affermato. Io uso questa funzione e funziona ragionevolmente bene:

 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 aiuta qui molto. Usando jQuery puoi ottenere in modo affidabile elementi in cui l'ID termina con una determinata stringa. Anche se questo non è il "motivo" per usare jQuery, è sicuramente un vantaggio.

3) Questo sarà risolto in asp.net 4.0 quindi rimani li 🙂 http://weblogs.asp.net/asptest/archive/2009/01/06/asp-net-4-0-clientid-overview. aspx

Oh, e ho anche trovato questo, nel caso in cui qualcun altro stia avendo questo problema.

Utilizzare un selettore jQuery personalizzato per i controlli asp.net: http://john-sheehan.com/blog/custom-jquery-selector-for-aspnet-webforms/

Non penso che ci sia una sola “best practice” per farlo. Ci sono un sacco di diverse buone pratiche. Ecco la nostra:

Ogni controllo che ha funzionalità lato client esegue il rendering di un blocco di script in linea, direttamente sotto il markup per il controllo:

  control markup   

Ogni controllo ha un JS simile:

 var CustomControl = function(id) { this.control = document.getElementByID(id); this.init(); }; CustomControl.prototype.init = function() { //do stuff to wire up relevant events }; 

Nel codebehind, facciamo qualcosa come:

 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"); } 

Faccio qualcosa di simile a Rex M tranne per evitare più tag di script. Uso una funzione nella mia class di base per registrare i controlli che userò per clientide, quindi li sputo in html all’interno di 1 tag script.

È anche ansible creare una sottoclass dei controlli per registrarsi automaticamente con la funzione o utilizzare una proprietà booleana per impostare se si intende utilizzarli come client.

È ansible ottenere l’ID anche utilizzando il metodo document.getElementById .

Per ‘ctl00_ContentMain_Button1’ – In asp.net quando la pagina esegue il rendering nel browser, la prima parte rimane la stessa ‘ctl00’. La seconda parte è ID di ContentPlaceHolder utilizzato “ContentMain”. Terzo è l’ID di un controllo ‘Button1’

Mi è piaciuto questo http://codedotnets.blogspot.in/2012/01/how-get-id-server-control-javascript.html

Preferisco i tag associati ai dati nel markup document.getElementById (‘<% # TextBox1.ClientID%>‘). Value, sull’uso dell’implementazione del tag side server <% = TextBox1.ClientID%>.

I tag laterali del server ti impediscono di aggiungere controlli alla dom nel codice sottostante. Questa necessità si verifica comunemente quando costruisci la tua applicazione e l’approccio del database può salvarti dalle maggiori riscritture.

Quando si utilizzano i tag lato server, si conosce anche come “blocchi di codice” che eseguono questa operazione comune

this.Form.Controls.Add (myContorl);

genera questo errore in fase di esecuzione:

La raccolta Controls non può essere modificata perché il controllo contiene blocchi di codice (cioè <% ...%>).

Sfortunatamente questo spesso diventa intrinsecamente ovvio dopo aver costruito il tuo sito web.

Quando si implementa il controllo associato ai dati ‘<% # TextBox1.ClientID%>‘ risolve il valore delle proprietà del controllo a cui si fa riferimento nel markup, nella posizione appropriata, ad esempio la fine del Page_Load data binding in questo modo:

Page.DataBind ()

Tieni presente che Page.DataBind () causa anche il controllo figlio sulla pagina anche su DataBind, questo potrebbe essere un effetto collaterale indesiderato se la pagina gestisce l’associazione dati di determinati controlli figlio separatamente. In tal caso, il binding dei dati può essere eseguito sul singolo controllo in questo modo:

TextBox1.DataBind ()

Un’evoluzione delle applicazioni alla fine porta a una sorta di funzionalità di base del sito in cui si potrebbe voler aggiungere controlli di base, una volta che l’applicazione del sito Web è stata sostituita con tag sul lato server sostituendoli con i database diventa problematico, specialmente quando le pagine sono state codificate per gestire i dati da soli.