Descripción del proyectoColección de controles web de ASP.NET integrados con jQuery para crear páginas web más dinámicas de un forma muy sencilla.
Objetivo
Este proyecto tiene como objetivo ofrecer una colección de controles web ASP.NET integrandos con jQuery para ofrecer más dinamismo en los proyectos web sin que el programador tenga que preocuparse del código jquery y javascript del cliente.
Instrucciones para usar los jQueryWebControls
1 - Añadir la galería de controles al cuadro de herramientas del Visual Studio, o simplemente añadir la referencia jQueryWebControls.dll a nuestro proyecto
2 - Opcional. Añadir en el web.config la siguiente configuración para acceder directamente a los controles a través del prefijo que le pongamos. Por ejemplo:
<pages>
<controls>
<add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
<add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
<add tagPrefix="jqc" namespace="jQuery.WebControls" assembly="jQueryWebControls"/>
<add tagPrefix="jqc" namespace="jQuery.WebControls.UI" assembly="jQueryWebControls"/>
<add tagPrefix="jqc" namespace="jQuery.WebControls.RocketDock" assembly="jQueryWebControls"/>
<add tagPrefix="jqc" namespace="jQuery.WebControls.ImageGallery" assembly="jQueryWebControls"/>
</controls>
</pages>
3 - Añadir el control que va a gestionar todos los plugins jquery necesarios según los controles que se hayan añadido y especificar las propiedades comunes de algunos de ellos*
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<jqc:jQueryScriptManager ID="jQueryScriptManager1" runat="server"
DatePickerLanguage="Spanish" ChangeMonth="true" ChangeYear="false" NumericPrecision="2"
CoinSymbol="€" ThousandSeparator="." DecimalSeparator="," CssClassButtons="coolButton"
DefaultCssUI="Blitzer" />
4 - Añadir los controles que queramos. Ya no hace falta que sepamos de jQuery ni de añadir los estilos.
<jqc:RocketDockMenu ID="RocketDockMenu1" runat="server">
<Iconos>
<jqc:Icono ID="Icono1" runat="server" ImageUrl="~/images/batman2 copy.png" ToolTip="Batman"></jqc:Icono>
<jqc:Icono ID="Icono2" runat="server" ImageUrl="~/images/Chrome.png" ToolTip="Chrome"></jqc:Icono>
<jqc:Icono ID="Icono3" runat="server" ImageUrl="~/images/eMule9029082980.png" ToolTip="Emule" />
</Iconos>
</jqc:RocketDockMenu>
<jqc:PopUpPanel ID="Pop" runat="server" Modal="false">HELLO WORLD</jqc:PopUpPanel>
Consejos sobre los estilos
En principio solo he añadido 5 estilos diferentes de la inmensa galería de
jQuery UI pero si necesitamos otro estilo diferente a los que ya hay os recomiendo lo siguiente:
- Crear la primera página, añadir el control <jqc:jQueryScriptManager> seleccionar el estilo que queramos en la propiedad DefaultCssUI. Ejecutar la aplicación.
- Al ejecutar la página, se crea automaticamente una carpeta css en el root del WebSite, y dentro copia otra carpeta con el nombre del estilo seleccionado.
- Nos vamos a la siguiente dirección: http://jqueryui.com/themeroller/ donde podemos crear un estilo personalizado.
- Ajustamos nuestras preferencias, y finalmente pulsamos sobre el botón Download theme
- Descargamos la versión para jQuery 1.8.4
- Descomprimimos el ZIP y copiamos el contenido de la carpeta css\custom-theme\ dentro de la carpeta que se nos creo en el WebSite sobrescribiendo todos los archivos existentes en ella.
- Vuelve a ejecutar la aplicación web, y ta-chan... ya tienes los estilos para los controles jQuery.WebControls.UI
Problemas conocidos
- PopUpPanel con AjaxControlToolkit. estando el control PopUpPanel dentro de un UpdatePanel. Cuando se ejecuta el jQuery para ofrecernos una ventana modal, lo que hace internamente es cortar todo lo que esta dentro de este control y pegarlo al final del body dentro de unos div que son los que conforman la ventana de diálogo. He conseguido que se pegue dentro de la etiqueta Form para que no se pierdan los datos de los controles internos en el PostBack pero no he conseguido que se mantenga dentro del UpdatePanel por lo que cuando se lanza un evento PostBack desde algún control dentro del PopUpPanel, no se realiza mediante Ajax.
Ejemplo:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<jqc:PopUpPanel ID="PopUpPanel1" runat="server" Titulo="Mi PopUpPanel" Modal="true">
Intorduce tu nombre: <asp:TextBox ID="txtNombre" runat="server"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</jqc:PopUpPanel>
</ContentTemplate>
</asp:UpdatePanel>