de corriger ou de moyen efficace d'accéder à l'objet DOM dans les pages aspx
-
29-09-2020 - |
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>
La solution
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
Autres conseils
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>