Obtener ID de asp.net runat servidor en jQuery

Question

Estoy tratando de hacer algunas cosas en el uso de jQuery ASP.NET.Pero la IDENTIFICACIÓN de runat="server" no es el mismo que el id se utiliza en HTML.

Yo solía utilizar esto para obtener el ID de esta situación:

$("#<%=txtTest.ClientID%>").val();

Pero en este caso, no funciona.Yo soy la menor idea de por qué.

Javascript

/* Modal */
function contatoModal() {
    //alert("Test");
    alert($("#<%=txtTest.ClientID%>").val());
}

HTML

< input runat="server" id="txtTest" value="test" />

Algún consejo?

Answer 1

<%= txtTest.ClientID %> Debe funcionar pero no en un archivo JavaScript separado donde los scripts del lado del servidor no se ejecutan. Otra posibilidad es usar un selector de clase:

<input runat="server" id="txtTest" value="test" class="txtTest" />

y entonces:

var value = $('.txtTest').val();

Answer 2

Como otros han mencionado, puede pasar un selector de clase a JQuery, pero eso es un poco desordenado. Prefiero usar el El atributo jQuery termina con el selector. Dado que una identificación generada es una jerarquía aplanada de controles, puede usar el selector "termina con" para encontrar su elemento.

<input runat="server" id="txtText" />

Cuando se renderiza, la identificación generada se convierte en algo como esto (si dentro del titular de lugar de contenido de una MasterPage):

<input id="ctl00_contentplaceholder_txtText" />

Para encontrar este control:

$("input[id$='txtText']")

Tenga cuidado al usar esto dentro de un repetidor.

Answer 3

En la página de Form / HTML ....

<asp:TextBox ID="txtUserName" runat="server" Class="form-control"></asp:TextBox>  

En jQuery

var UserName = $("[id*=txtUserName]").val();
alert(UserName);

100% seguro de que está funcionando para mí ...

Answer 4

Intente ponerlo en un nombre de variable:

var txtTestID = '#' + '<%=txtTest.ClientID %>';

$(txtTestID).val();

No estoy seguro de si el <%= le gusta estar dentro de citas dobles. Siempre he tenido comportamientos mixtos cuando no he usado la cita única.

Answer 5

Cuando se usa ASP.NET 4 y el CientIDMode está configurado en "Predecible", puede predecir la ID en función de la jerarquía. O establecerlo configurado en "estático", por lo que ASP.NET no lo arruinará.

El artículo de Scottgu al respecto http://weblogs.asp.net/scottgu/archive/2010/03/30/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net-- 4-0-Series.SpX

Y esto es extremadamente útil cuando se usa escenarios de archivos JS externos.

Answer 6

Como Darin Dimitrov dijo en su respuesta:

<%= txtTest.ClientID %> debería funcionar pero no en un archivo de JavaScript separado donde los scripts del lado del servidor no se ejecutan.

Las soluciones que pude encontrar para esas son:

<input runat="server" id="txtTest" value="test" class="txtTest" />

---

• Usar class en vez de ID

Usando la clase, puede recuperar el valor en cualquier lugar. Esta es una de las mejores soluciones (generalmente las mejores)

var value = $('.txtTest').val();

---

• Usar ClientID código en el aspx

Siempre puedes llamar ClientID En el ASPX, pero si está trabajando con algún tipo de estructura, esta no es la mejor solución. Me gusta usar este método cuando estoy probando algo.

var value = $('#<%=txtTest.ClientID%>').val();

También puedes usar ClientID en un archivo JS externo con una solución. NO ES LINDO, use solo si realmente lo necesita. Normalmente hago esto cuando uso Telerik.

En el ASPX:

var id = <%=txtTest.ClientID%>;

En el archivo JS:

var value = $('#'+id).val();

---

• Usar Control.ClientidMode Propiedad Static

Entonces el HTML se convierte en

<input runat="server" id="txtTest" value="test" ClientIDMode="Static" />

y el JS puede llamarlo como se llama

var value = $('#txtTest').val();

El problema con esta solución es que necesitas ser muy Cuidado de evitar la duplicidad en el ids de tu página. Intenta nunca usar Static modo en un controlador.

Como estados msdn:

El valor ClientID se establece en el valor de la propiedad ID. Si el control es un contenedor de nombres, el control se usa como la parte superior de la jerarquía de los contenedores de nombres para cualquier control que contenga.

---

El enlace de Respuesta de Shaans Es un lugar increíble para verificar información adicional sobre ClientIDMode.

Marca de HTML limpiador con ASP.NET 4 Formularios web - ID de cliente (VS 2010 y .NET 4.0 Serie)

Answer 7

Para evitar problemas con las identificaciones renderizadas, use una clase. Esto no cambiará durante la representación:

function contatoModal() {

//alert("Test");

alert($(".txtTest").val());

}

HTML:

< input runat="server" id="txtTest" value="test" class="txtText" />