forma correcta o eficiente de acceder al objeto DOM en páginas aspx
-
29-09-2020 - |
Pregunta
Quiero obtener el valor del cuadro de texto que ingresa un usuario.A continuación se muestra el fragmento de código de la página aspx:
<asp:TextBox id="txtUserName" runat="server" />
Ahora, ¿cuál es la mejor manera de acceder al objeto DOM en la página 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>
Solución
SharePoint 2013/SharePoint en línea
En .NET Framework 4 se introdujo Propiedad ClientIDMode que especifica cómo ASP.NET genera el ClientID
para un control al que se puede acceder en el script del cliente.
En resumen, dado que SharePoint 2013 apunta a .NET Framework 4, ClientIDMode
Se podría utilizar para simplificar el acceso al control en el lado del cliente como se demuestra a continuación:
Ejemplo:
<asp:TextBox id="boxUserName" runat="server" ClientIDMode="Static" />
JavaScript:
var boxUserName = document.getElementById("boxUserName")
SharePoint 2010 y versiones anteriores
Requisitos previos: biblioteca jQuery se usa que ofrece un poderoso conjunto de herramientas para hacer coincidir un conjunto de elementos en un documento.
Opción 1
Utilice el selector para buscar elementos por ID, por ejemplo:
var quickLaunch = $('[id$=V4QuickLaunchMenu]'); // find element with id which ends with the text 'V4QuickLaunchMenu'
opcion 2
Usar CssClass
para especificar la clase de elemento, por ejemplo:
<asp:TextBox id="boxUserName" runat="server" CssClass="text-box" />
y luego usar el selector de clases:
var boxUserName = $('input.text-box');
Referencias
Otros consejos
La opción 1 es la forma correcta de hacerlo, pero simplemente cambia el nombre de la variable a algo diferente, ya que es JavaScript Palabra clave
<script type="text/javascript">
var _value= document.getElementById(<%= txtUserName.ClientID %>).value;
alert(value);
</script>
Pero prefiero usar jquery que hace que la vida sea mucho más fácil.Para eso, agregue el archivo jquery en su ASPX o Masterpage.Luego usa debajo de la línea
<script type="text/javascript">
$(document).ready(function(){
var _value= $(<%= txtUserName.ClientID %>).val();
alert(value);
});
</script>