Chalalo Land

Tecnologías ASP.NET y un poco Más

Contacto


 Si quierer cooperar, yo feliz, muy agradecido :)

De donde me Visitan?

Locations of visitors to this page

Generic Content

Si te gustaron los articulos, y te animas te estaría muy agradecido!


Recent Posts

Tags

Community

Blogs de MVP

Amigos Geeks

Blogs Imperdibles

GODS

Archives

Email Notifications

Tips- jQueryUI no intrusivo en ASP.NET

Hola, ya que la tendencia está por el lado de Javascript no intrusivo, vamos a revisar como utilizar jQueryUI con esta misma técnica. Primero que nada debemos descargar jQueryUI y la correspondiente liberría que nos permitirá esta funcionalidad. Luego la librería específica para trabajar con jQuery no intrusivo.

Vamos a desarrollar un pequeño ejemplo con visual studio 2010.Primero que nada, vamos a constuir un website:

image

Luego escribimos en el Package Manager Console:

Install-Package jquery.ui.combined:

PM> Install-Package jquery.ui.combined

Intentando resolver la dependencia 'jQuery (≥ 1.4.4)'.

'jQuery 1.4.4' se instaló correctamente.

'jQuery.UI.Combined 1.8.22' se instaló correctamente.

'jQuery 1.4.4' se agregó correctamente a WebSite1.

'jQuery.UI.Combined 1.8.22' se agregó correctamente a WebSite1.

 

Luego instalamos el Package que realizará la magia:

Install-Package unobtrusive.jquery.ui

PM> Install-Package unobtrusive.jquery.ui

Intentando resolver la dependencia 'jquery (≥ 1.6.1)'.

'jQuery 1.6.4' se instaló correctamente.

'unobtrusive.jquery.ui 0.2' se instaló correctamente.

'jQuery 1.4.4' se quitó correctamente de WebSite1.

'jQuery 1.6.4' se agregó correctamente a WebSite1.

'unobtrusive.jquery.ui 0.2' se agregó correctamente a WebSite1.

'jQuery 1.4.4' se desinstaló correctamente.

Como puedes ver , la dependencia que resuelve de jquery es 1.6.1, que se agrega al proyecto, así que luego la podemos eliminar.

image

 

Ahora veamos el código, y es que acá esta lo entretenido, ya que generalemente lo que hacíamos para agregar funcionalidad a un control existente con jqueryui hacíamos, por ejemplo:

 

<link href="Content/themes/base/jquery-ui.css" rel="stylesheet"
    
 type="text/css"
/>

<script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>

<script src="Scripts/jquery-ui-1.8.22.min.js"
       
 type="text/javascript"></script
>

 

 <script type="text/javascript">

 

     $(function () {

         $("#<%= fecha.ClientID %>").datepicker({});

     });

</script>

En donde del campo al que le vamos a asignar el datapicker es un Textbox:

<asp:TextBox ID="fecha" runat="server"></asp:TextBox>

 

image

Ahora con la librería de no-intrusivo, podemos definir tag compatibles con HTML5 que van a indicar cual es el comportamiento que debería tener un control. Para esto vamos a incluir también la librería que descargamos hace unos momentos.

<script src="Scripts/jquery-ui.onobtrusive.min.js" type="text/javascript"></script>

Y ahora agregamos los atributos a cada control para indicarcale cual va será su comportamiento, al mismo estilo de jQueryMobile.

Voy a agregar tambien un Slider para que veamos que hay bastantes posiblidades a la hora de personalizar un control.

<h2>Slider</h2>

<div>

   Current value: <span id="slider-value">47</span>

   <div data-ui-fn="slider" data-ui-slider-animate="true"
        data-ui-slider-value
="47"

        data-ui-slider-slide="function (event, ui) { $('#slider-value').text(ui.value); }">

   </div>

</div>

  <p>

    <asp:TextBox data-ui-fn="datepicker" 
         data-ui-datepicker-show-button-panel
="true"

         ID="fecha" runat="server"></asp:TextBox>

   </p>

El resultado es el siguiente:

image

Como puedes apreciar, no hay código Javascript involucrado (solo para el evento slide). Es interesante el enfoque en donde vamos separando aún más las responsabilidades de los componentes de nuestra aplicación.

Saludos!
@chalalo.

Posted: 6/8/2012 1:35 por Gonzalo Perez | con no comments
Archivado en: ,,
Comparte este post: