jQuery e Asp.NET con un file js esterno

Per trovare qualsiasi controllo ASP.NET in jQuery, usiamo la proprietà ClientID per ottenere il corretto ID del controllo eseguito al rendering.
Ad esempio, per trovare una casella di testo ASP.NET con ID “txtName”, utilizziamo una sintassi simile:

$('<% = txtName.ClientID %>').focus(//pippo);

Questo funziona se si sta scrivendo il codice jQuery direttamente nella pagina aspx ma se si sposta lo stesso codice in un file js esterno, si otterrà un errore del tipo: “Uncaught Error: Syntax error, unrecognized expression“

Perchè accade questo?
Beh, la ragione è semplice: quando il codice jQuery è posto in una pagina aspx, questo viene elaborato sul server e viene sostituita con un ID corretto generato da ASP.NET per il controllo.
Quando invece viene inserito in un file JS esterno, ASP.NET non ha alcun ruolo da svolgere dal momento che il file js non viene elaborato da ASP.NET e l’ID client non viene sostituito.

Come risolvere questo problema?
Per correggere questo errore, tutto quello che dovete fare è quello di rimuovere il codice asp dal codice jQuery.
Questo significa che è necessario cambiare i selettori e ci sono due modi per farlo.

Ad esempio, il codice jQuery,

$('<% = txtName.ClientID %>').focus(//pippo);

può essere sostituito con:

$ ("input[id * = 'txtName']").focus(//pippo);

Il codice qui sopra selezionerà i controlli di input che hanno “txtName” nel valore dell’attributo ID dell’elemento. È anche possibile selezionare gli elementi tramite selettori di classe.

Se si utilizza ASP.NET 4.0, allora si può approfittare della proprietà ClientIDMode che se impostato su Static manterrà lo stesso ID di rendering della pagina.

Per esempio:

<asp:TextBox ID="txtName" runat="server" ClientIDMode="static" />

genererà qualcosa come:

<input id="txtName" type="text" />

Così il vostro ID non cambierà e non si deve utilizzare la proprietà ClientID per accedere al controllo in jQuery.
Non esitate a contattarmi per qualsiasi aiuto relative a jQuery, sarò lieto di aiutarvi.