de corriger ou de moyen efficace d'accéder à l'objet DOM dans les pages aspx

Question

Je veux obtenir la valeur de la textbox par un utilisateur.Ci-dessous l'extrait de code de page aspx :

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

Maintenant, qui est le meilleur moyen pour accéder à DOM objet dans la page 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

Dans .NET Framework 4 La propriété ClientIDMode spécifie la manière dont les ASP.NET génère le ClientID pour un contrôle qui peut être consulté dans le script client.

Pour résumer, depuis SharePoint 2013 cibles .NET Framework 4, ClientIDMode pourrait être utilisé, qui simplifie l'accès de contrôle dans le côté client comme illustré ci-dessous:

Exemple:

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

JavaScript:

var boxUserName = document.getElementById("boxUserName") 

SharePoint 2010 et les versions antérieures

Conditions préalables: bibliothèque jQuery qui offre un ensemble puissant des outils pour la mise en correspondance d'un ensemble d'éléments dans un document.

Option 1

Utilisez le sélecteur pour rechercher un élément par son Id, par exemple:

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

Option 2

Utilisation CssClass pour spécifier l'élément de classe, par exemple:

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

et puis utiliser sélecteur de classe:

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

Références

• Comment:Les Contrôles d'accès à partir de JavaScript par ID

Answer 2

L'option 1 est la bonne façon de faire, mais simplement changer le nom de la variable à quelque chose de différent car il est mot clé JavaScript

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

Mais je préfère utiliser jQuery qui rend la vie beaucoup plus facile.Pour cela ajoutez un fichier jQuery dans votre ASPX ou MasterPage.Ensuite, utilisez la ligne ci-dessous

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