Modo corretto o efficiente di accesso all'oggetto DOM nelle pagine ASPX

Question

Voglio ottenere il valore della casella di testo che un utente entra.Di seguito è riportato lo snippet di codice della pagina ASPX:

<asp:TextBox id="txtUserName" runat="server" />

.

Ora che è il modo migliore per accedere all'oggetto DOM in Pagina ASPX

1.

<script type="text/javascript">
var value= document.getElementById(<%= txtUserName.ClientID %>).value;
alert(value);
</script>

.

2.

<script type="text/javascript">
var value= document.getElementById("txtUserName").value;
alert(value);
</script>

.

Answer 1

SharePoint 2013 / SharePoint Online

in .NET Framework 4 è stato introdotto Proprietà clientidmode che specifica come ASP.NET genera il ClientID per un controllo a cui è possibile accedere nello script del client.

Per riassumere, dal momento che SharePoint 2013 Targets .NET Framework 4, è possibile utilizzare ClientIDMode che semplifica l'accesso del controllo nel lato client come dimostrato di seguito:

Esempio:

<asp:TextBox id="boxUserName" runat="server" ClientIDMode="Static" />

.

JavaScript:

var boxUserName = document.getElementById("boxUserName") 

.

SharePoint 2010 e versioni precedenti

.

Prerequisiti: JQuery Library è usato che offre un set potente di strumenti per abbinare una serie di elementi in un documento.

Opzione 1

Utilizzare il selettore per trovare l'elemento per ID, ad esempio:

var quickLaunch = $('[id$=V4QuickLaunchMenu]'); // find element with id which ends with the text 'V4QuickLaunchMenu'

.

Opzione 2

Utilizzare CssClass per specificare la classe elemento, ad esempio:

<asp:TextBox id="boxUserName" runat="server" CssClass="text-box" />

.

e quindi utilizzare il selettore di classe:

var boxUserName = $('input.text-box');

.

Riferimenti

.
• Come: Controlli di accesso da JavaScript per ID

Answer 2

L'opzione 1 è il modo corretto per fare ma basta cambiare il nome della variabile in qualcosa di diverso come è la parola chiave javascript

<script type="text/javascript">
 var _value= document.getElementById(<%= txtUserName.ClientID %>).value;
 alert(value);
</script>

.

Ma preferisco usare jQuery che rendono la vita molto più facile.Per questo Aggiungi file jQuery nella tua ASPX o MasterPage.Quindi utilizzare la linea qui sotto

<script type="text/javascript">
 $(document).ready(function(){     
   var _value= $(<%= txtUserName.ClientID %>).val();
   alert(value);
 });
</script>

.