EnglishjQuery es la librerÃa AJAX por default cuando creas una nueva Aplicación Web ASP.NET o Aplicación Web ASP.NET MVC en Visual Studio 2010. Pero si tienes una aplicación web (Formularios Web) existente, necesitaras agregar manualmente jQuery a tu proyecto.
Abre Visual Studio o Visual Web Developer Express y abre una aplicación web. Yo he creado un proyecto nuevo y lo he nombrado jQuerySample.
Si aun no lo tienes, crea una carpeta nueva en tu proyecto (Clic derecho -> Agregar -> Nueva Carpeta) y nómbrala Scripts.
Descarga jQuery de la pagina de descarga. La versión mas reciente es 1.6.2. Haz clic derecho en el vinculo Minified y elige Guardar Destino Como. Guarda el archivo jquery-1.6.2.min.js en la carpeta Scripts.
Puedes renombrar el archivo a jquery-min.js o jquery.js si prefieres un nombre corto. En este ejemplo yo no lo renombre.
Necesitaras incluir el nuevo archivo en el proyecto. Ve a Proyecto –> Ver todos los archivos o haz clic en el botón Mostrar todos los archivos en el Explorador de soluciones. Haz clic derecho en el archivo jquery-1.6.2.min.js y selecciona Incluir en el proyecto.
Ahora vamos a habilitar jQuery. Puedes habilitar jQuery en paginas especificas o en todas las paginas si estas utilizando una pagina Maestra (Master page).
Abre el archivo Site.Master y agrega la siguiente etiqueta script dentro de la etiqueta head.
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/jquery-1.6.2.min.js") %>"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
Cuando la etiqueta head contiene runat=â€serverâ€, el atributo href de la etiqueta link es automáticamente resuelto en tiempo de ejecución, pero el atributo src de la etiqueta script no lo es, asà que tenemos que utilizar la función ResolveUrl.
Si estas creando un sitio publico, también podrÃas cargar jQuery de la CDN de Google con esta etiqueta.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
Gracias a Encosia por este truco. La URL comienza con // para que funcione con http y https.
Vamos a crear un pequeño ejemplo similar al que creamos cuando introducimos la función $get.
Agrega un nuevo Formulario Web al proyecto o abre la pagina Default.aspx.
Agrega lo siguiente.
<script type="text/javascript">
function changeColorAndSize() {
$('#<%= container.ClientID %>').css("background-color","Red");
$('#<%= container.ClientID %>').css("height","200px");
$('#<%= container.ClientID %>').css("width", "300px");
$('#container2').css("background-color", "Yellow");
$('#container2').css("height", "200px");
$('#container2').css("width", "300px");
}
</script>
<div id="container" runat="server" style="height: 100px; width: 200px; background-color: Blue;"></div>
<div id="container2" style="height: 100px; width: 200px; background-color: Green;"></div>
<asp:Button ID="Button1" runat="server" Text="Click Me" OnClientClick="changeColorAndSize(); return false;" />
Aquà mostramos dos elementos div, unos azul y uno verde, y un botón. Observa como uno de los div es ejecutado en el servidor.
Cuando el botón es presionado, este llama a la función changeColorAndSize.
La función $() toma un selector CSS y encuentra todos lo elementos que coinciden. En este caso utilizamos # para encontrar el elemento con una ID especifica. Para el div que es ejecutado en el servidor utilizamos la propiedad ClientID.
Después usamos la función css() para cambiar el estilo de un elemento.
Ejecuta el proyecto.
Haz clic en el botón.
El color y el tamaño de los elementos div cambiara.
Por favor deja un comentario si tienes alguna pregunta o sugerencia.