DarioSantarelli.Blog("UgiDotNet");

jQuery e ASP.NET Server Controls

jQuery è una tecnologia puramente client-side, costituita da almeno una libreria javascript "core" il cui plug-in model è basato semplicimente su altre liberie Javascript. Banale ma non scontato, parliamo di una tecnologia che non possiede alcuna dipendenza con ASP.NET. Di conseguenza, lo sviluppo di controlli ASP.NET "jQuery-enabled" può non essere così semplice da valutare, soprattutto se by-design si pone l'attenzione solo sulle funzionalità client-side che il controllo deve soddisfare. In effetti, le best-practice ci dicono che non è poi così corretto sviluppare un controllo ASP.NET per soddisfare esclusivamente degli specifici comportamenti grafici che siano semplicemente legati al miglioramento della user experience o dell' usabilità. Piuttosto, dovremmo chiederci in fase di design se l'interazione con JQuery va lasciata a discrezione di chi utilizza il controllo oppure se debba forzatamente costituire una feature built-in.
Nel primo caso lo sviluppatore decide all'interno della sua soluzione come e quando far interagire l' (X)HTML renderizzato dal controllo con le funzionalità offerte da jQuery, registrando "manualmente" libreria e relativi plug-in a livello di pagina (es. specificando una o più ScriptReference nello ScriptManager in caso di applicazioni AJAX-enabled). Nel secondo approccio, invece, sia jQuery che altri script client-side possono essere "iniettati" nella logica di rendering del controllo sfruttando la capacità di ASP.NET di gestire WebResources. Vediamo un esempio. 
Supponiamo di dover sviluppare una class library contenente un set di WebControl ASP.NET che prevede l'embedding di script client-side (jQuery). Anzitutto, specifichiamo i vari file .js come WebResource a livello di assembly.

[assembly: System.Web.UI.WebResource("MyLibrary.Web.Resources.jquery-1.2.6.js", "text/javascript")]
[assembly: System.Web.UI.WebResource("MyLibrary.Web.Resources.jquery_color.js", "text/javascript")]
[assembly: System.Web.UI.WebResource("MyLibrary.Web.Resources.jquery.blockUI.js", "text/javascript")]
[assembly: System.Web.UI.WebResource("MyLibrary.Web.Resources.MyControl.js", "text/javascript")]
. . .

Facendo attenzione a configurare ciascuna WebResource come "Embedded Resource". 

   

Potremmo poi definire una classe Helper ScriptResourceHelper condivisa da tutti i nostri WebControl (che utilizza ClientScriptManager) per gestire l' injection dinamica nella pagina dei vari script client-side di cui i nostri WebControl hanno bisogno.

public class ScriptResourceHelper
{
  public const string JQUERY_SCRIPT_RESOURCE = "MyLibrary.Web.Resources.jquery-1.2.6.js";
  public const string JQUERY_COLOR_SCRIPT_RESOURCE = "MyLibrary.Web.Resources.jquery_color.js";
  public const string JQUERY_BLOCKUI_SCRIPT_RESOURCE = "MyLibrary.Web.Resources.jquery.blockUI.js";
  public const string MYWEBCONTROL_SCRIPT_RESOURCE = "MyLibrary.Web.Resources.MyWebControl.js";      

  public static void RegisterScriptResource(Control control, string resourceName)
  {           
    ClientScriptManager pageClientScriptManager = control.Page.ClientScript;
    string webResourceURL = pageClientScriptManager.GetWebResourceUrl(control.GetType(), resourceName);       
   
    // La stessa risorsa non deve essere registrata più volte nella stessa pagina
    if (!pageClientScriptManager.IsClientScriptIncludeRegistered(resourceName))
    {
      pageClientScriptManager.RegisterClientScriptInclude(resourceName, webResourceURL);               
    }           
   }      
}

In questo esempio specifico è stato assicurato il fatto che ciascuno script client-side venga caricato solo una volta nella pagina. Infatti, se la logica di rendering di due nostri WebControl registrasse jQuery nella pagina in maniera indipendente, jQuery verrebbe caricata due volte nella pagina (lascio immaginare con quali risultati). 
In casi di questo tipo è opportuno ad esempio utilizzare il metodo IsClientScriptIncludeRegistered che permette proprio di controllare che una determinata risorsa sia già registrata nella pagina. Mettiamo tutto insieme e vediamo un estratto della possibile implementazione di un WebControl "jQuery-enabled" che gestisce in fase di rendering l'injection di jQuery e script client-side in generale.

[ToolboxData("<{0}:MyWebControl runat=\"server\" />")]
public class MyWebControl : WebControl
{       
   . . .

   protected override void OnPreRender(EventArgs e)
   {
     ScriptResourceHelper.RegisterScriptResource(this, ScriptResourceHelper.JQUERY_SCRIPT_RESOURCE);
     ScriptResourceHelper.RegisterScriptResource(this, ScriptResourceHelper.MYWEBCONTROL_SCRIPT_RESOURCE);
     base.OnPreRender(e);
   }

   . . .
}

Print | posted on domenica 23 novembre 2008 20:24 |