Puedo obtener ejemplos simples para que funcionen bien siempre que no haya una página maestra involucrada. Todo lo que quiero hacer es hacer clic en un botón y hacer que diga "Hola mundo" con el javascript en un archivo .js, usando una página maestra. Cualquier ayuda muy apreciada :)¿Cómo usar JQuery con páginas maestras?
EDITAR
Como @ Adam señala en los comentarios, hay un mecanismo nativo jQuery que básicamente hace lo mismo que el hack en mi respuesta original. Usando jQuery que puede hacer
$('[id$=myButton]').click(function(){ alert('button clicked'); });
Mi truco fue desarrollado originalmente como una obra Prototipo alrededor para ASP.NET y adaptado para la respuesta original. Tenga en cuenta que jQuery básicamente hace lo mismo bajo el capó. Sin embargo, recomiendo utilizar jQuery sobre la implementación de mi hack.
Respuesta original dejó de contexto comentario
Cuando se utiliza una página maestra, ASP.NET destroza los nombres de los controles en las páginas dependientes. Tendrá que encontrar la manera de encontrar el control correcto para agregar el controlador (suponiendo que esté agregando el controlador con javascript).
utilizo esta función para hacer eso:
function asp$(id, tagName) {
var idRegexp = new RegExp(id + '$', 'i');
var tags = new Array();
if (tagName) {
tags = document.getElementsByTagName(tagName);
}
else {
tags = document.getElementsByName(id);
}
var control = null;
for (var i = 0; i < tags.length; ++i) {
var ctl = tags[i];
if (idRegexp.test(ctl.id)) {
control = ctl;
break;
}
}
if (control) {
return $(control.id);
}
else {
return null;
}
}
A continuación, puede hacer algo como:
jQuery(asp$('myButton','input')).click (function() { alert('button clicked'); });
en la que han lo siguiente en su página secundaria
<asp:Button ID="myButton" runat="server" Text="Click Me" />
Simplemente mueva la etiqueta <script type="text/javascript" src="jquery.js" /> en la etiqueta de la cabeza en la página maestra. Entonces puedes usar jquery en todas las páginas de contenido.
No hay ninguna magia sobre el uso de páginas maestras con jQuery.
Maestro página:
La biblioteca jQuery va en la página maestra. Vea si la ruta está referenciada correctamente. Es posible que desee añadir la documentación adicional del modo siguiente: página
<head>
<script type="text/javascript" src="/Scripts/jquery-1.2.6.min.js"></script>
<% if (false) { %>
<script type="text/javascript" src="/Scripts/jquery-1.2.6-vsdoc.js"></script>
<% } %>
</head>
Maestro:
<head>
<script type="text/javascript">
$(document).ready(
function()
{
alert('Hello!');
}
);
</script>
</head>
CodeBehind de páginas de contenido y controles de usuario:
this.textBox.Attributes.Add("onChange",
String.Format("passElementReferenceToJavascript({0})", this.textBox.ClientID));
Echa un vistazo a este post:
http://blogs.msdn.com/webdevtools/archive/2008/10/28/rich-intellisense-for-jquery.aspx
también explica cómo obtener intellisense para jQuery en Visual Studio.
Referencia el the Jquery.js en la cabeza de la MasterPage de la siguiente manera:
<script type="text/javascript" src="/Scripts/jquery-1.2.6.min.js"></script>
(algunos navegadores no les gusta que termina con />)
A continuación, puede escribir cosas como
$('#<%= myBtn.ClientID%>').show()
en su javascript asegurándose de usar ClientId cuando se hace referencia a un control ASP.Net en su código de cliente. Eso manejará cualquier "manipulación" de nombres e identificadores de los controles.
Debería haber esperado que esto funcione? $ ('# <% =% Button1.ClientID>'). click (function() { alert ('¡Hola, mundo!'); }); Este código está en mi archivo .js. Sé que tengo todo configurado correctamente porque si copio el id 'destrozado' desde la fuente de la página funciona bien. –
La sintaxis <% %> solo funciona dentro del archivo .aspx. Entonces, si desea usar eso, debe colocar su secuencia de comandos en un bloque ¡Gracias! –
asegurarse de que jQuery se añade en el página principal. Teniendo en cuenta que usted tiene este control:
<asp:Button ID="myButton" runat="server" Text="Submit" />
Usted puede wireup el código JavaScript con esto:
$(document).ready(function() {
$('[id$=myButton]').click(function() { alert('button clicked'); });
});
$(document).ready() incendios cuando el DOM está completamente cargado, y todos los elementos deben estar allí. Se puede simplificar aún más este con
$(function() {});
El selector de sintaxis $('[id$=myButton]') elementos búsquedas en función de su atributo id, pero coincide sólo al final de la cadena. Por el contrario, '[id^=myButton]' coincidiría con el comienzo, pero con el propósito de filtrar el UniqueID que no sería muy útil. Hay muchos muchos más selectores útiles que puede usar con jQuery. Learn them all, y gran parte de su trabajo se hará por usted.
El problema es que ASP.Net crea un id único y un atributo de nombre para cada elemento, lo que dificulta su búsqueda. Solía ser que necesitaría pasar la propiedad UniqueID al javascript del servidor, pero jQuery lo hace innecesario.
Con la potencia de los selectores de jQuery, puede desacoplar por completo el javascript del lado del servidor y conectar eventos directamente en su código de JavaScript. Ya no debería tener que agregar javascript al marcado, lo que ayuda a la legibilidad y hace que la refactorización sea mucho más fácil.
También comencé con los ejemplos más simples y no tuve suerte. Finalmente tuve que agregar el archivo jquery .js fuera de de la sección <head> de la página maestra. Era la única forma en que podía hacer que funcionara algo en Firefox (aún no he probado otros navegadores).
También tuve que hacer referencia al archivo .js con una dirección absoluta. No estoy del todo seguro de qué pasa con eso.
La solución de Adam es la mejor. ¡Sencillo!
página principal:
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
página Contenido:
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript">
$(document).ready(function() {
$("[id$=AlertButton]").click(function() {
alert("Welcome jQuery !");
});
});
</script>
</asp:Content>
cuando el botón está
<asp:Button ID="AlertButton" runat="server" Text="Button" />
En caso de que si alguien quiere acceder a una etiqueta, aquí es la sintaxis
$('[id$=lbl]').text('Hello');
donde lbl es el ID de etiqueta y el texto a mostrar en la etiqueta es 'Hola'
Adam Lassek ligado a la utilización de los selectores de jQuery, aunque creo que vale la pena una llamada explícita a cabo la selección de los elementos por su clase, en lugar de su identificación
p. Ej. En lugar de $("#myButton").click(function() { alert('button clicked'); });
en lugar de utilizar $(".myButtonCssClass").click(function() { alert('button clicked'); });
y añadir la clase a la tecla:
<asp:Button ID="myButton" runat="server" Text="Submit" CssClass="myButtonCssClass" />
Esto tiene la ventaja de no tener que preocuparse de si dos ID de control 'fin' de la misma manera en Además de poder aplicar el mismo código jQuery a múltiples controles a la vez (con la misma clase css).
Cuando las páginas se procesan junto con las páginas maestras, la identificación del control se cambia en el procesamiento de páginas, por lo que no podemos derivarlas en jQuery como este #controlid. En cambio, deberíamos intentar usar input[id$=controlid]. Si el control se representa como control de entrada o si como etiqueta de anclaje usa a[id$=controlid] en jQuery.
PROBLEMA -> al utilizar las páginas Site.Master los nombres de ID de control (para los controles ASP) Obtener el ContentPlaceHolderID prefijado a ellos. (Nota esto no es un problema para los controles no asp, ya que no se les 'reinterpretados' - es decir, que sólo aparecen como escrito)
SOLUCIONES:
Soy bastante nuevo en esto y no tenía ni idea acerca de la manipulación de nombres. Voy a dar una oportunidad más tarde. Lo aprecio. –
Acostúmbrese a usar la 'Fuente de vista' (O equivalente) en su navegador. Esto le permite no solo comprobar que sus páginas se están renderizando como las desea, sino también aprender trucos de otras páginas. – belugabob
es un error deliberado '$ asp' v 'asp $'? no pude hacer que esto funcionara - retoma el control, pero la llamada a jQuery no funciona por alguna razón – flesh