DynamicData e ColorPicker FieldTemplates

by Andrea 16 September 2009 12:17

Con i Dynamic Data la velocità di realizzare l'applicazione aumenta notevolmente (ovvio che dipende sempre dal tipo di applicazione che si deve realizzare) e con la creazione di FieldTemplates di ha la possibilità di migliorare l'iterazione tra applicazione e utente.

Una delle necessità che ho avuto è stata quella di dover far inserire il valore in esadecimale di un colore (es: #FFFFFF), e consapevole del fatto che un utente non potesse conoscere i valori a memoria, mi sono adoperato per realizzare un opportuno FieldTemplate.
L'ultima versione degli AJAX Control Toolkit mi è venuta in aiuto grazie al controllo ColorPicker che è stato recentemente incluso, ed ecco qui il risultato ottenuto:

ColorFieldTemplate

Il codice del FieldTemplate è il seguente:

   1: public partial class Color_EditField : FieldTemplateUserControl
   2: {
   3:     protected override void ExtractValues(IOrderedDictionary dictionary)
   4:     {
   5:         dictionary[Column.Name] = ConvertEditedValue(txtColor.Text);
   6:     }
   7:  
   8:     public override Control DataControl
   9:     {
  10:         get { return txtColor; }
  11:     }
  12: }
   1: <%@ Control Language="C#" CodeBehind="Color_Edit.ascx.cs" Inherits="DynamicData.FieldTemplates.Color_EditField" AutoEventWireup="True" %>
   2:  
   3: <asp:ImageButton 
   4:     runat="Server" 
   5:     ID="btnOpenColorPicker" 
   6:     style="float:left;margin:0 3px" 
   7:     ValidationGroup="none" 
   8:     ImageUrl="~/images/cp_button.png" 
   9:     AlternateText="Click to show color picker" />
  10: <asp:Panel 
  11:     runat="server"
  12:     ID="pnlColor" 
  13:     style="width:18px;height:18px;border:1px solid #000;margin:0 3px;float:left" />
  14: <atk:ColorPickerExtender 
  15:     runat="server"
  16:     ID="colorPicker"     
  17:     TargetControlID="txtColor" 
  18:     PopupButtonID="btnOpenColorPicker" 
  19:     SampleControlID="pnlColor" 
  20:     PopupPosition="Absolute" />
  21: <asp:TextBox ID="txtColor" 
  22:     runat="server" 
  23:     Text='<%# FieldValueEditString %>' 
  24:     style="visibility:hidden;" />

Nella mia applicazione non avevo la necessita di visualizzare il codice del colore (che compare nella TextBox), ma nel caso a qualcuno interessasse, sarà sufficiente togliere lo stile "visibility:hidden;" dalla TextBox txtColor.

Tags: ,

ASP.NET AJAX | ASP .NET | .NET

Code Snippet plugin per Windows Live Writer

by Andrea 14 September 2009 16:21

Ogni volta che installo Windows Live Writer mi dimentico sempre quale dei tanti Code Snippet plugin fosse quello che utilizzavo.

Ne ho provati diversi, ma il mio preferito rimane sempre quello scritto da Leo Vildosola che potete scaricare partendo da questo link: Code Snippet plugin for Windows Live Writer

csdlg_full 

Mi sono deciso a scrivere questo post dopo che per l'ennesima volta ho chiesto ad Andrea (visto che lui utilizza lo stesso plugin) se si ricordava il nome del plugin, e da dove poterlo scaricare...e così le prossime volte cercherò qui nel blog. ;-)

Tags: ,

Internet | Microsoft | Tempo libero | Sito

ASP.NET Ajax Control Toolkit e DynamicPopulateExtenderControlBase

by Andrea 14 September 2009 15:51

Stavo introducendo il controllo HoverMenuExtender all'interno di uno UserControl e nell'intellisense mi compaiono alcune proprietà che mi risultano "anomale" per il controllo che stavo per utilizzare. Anomale nel senso che non mi aspettavo proprio di trovare tali proprietà in questo controllo.
HoverMenuExtender 
Le proprietà in questione sono quelle che hanno il suffisso Dynamic: DynamicContextKey, DynamicControlID, DynamicServiceMethod e DynamicServicePath.

Visto che (dal nome) potevano fare al caso mio, guardo la documentazione online, e scopro che non esiste documentazione a riguardo. Allora, come spesso accade, scarico i sorgenti degli ajax control toolkit e do un'occhiata al codice per capire dove fossere utilizzate e a cosa servissero. Ed è qui che sono rimasto sorpreso.

I controlli HoverMenuExtender, DropDownExtender, ModalPopupExtender e PopupControlExtender derivano dalla classe base DynamicPopulateExtenderControlBase, che contiene per l'appunto queste proprietà:

  • DynamicServicePath: url del web service che conterrà il metodo da chiamare. (lasciare vuoto se si intende chiamare un page method)
  • DynamicServiceMethod: metodo del web service da chiamare.
  • DynamicContextKey: permette di definire un parametro opzionale per parametrizzare il metodo chiamato. (parametro opzionale)
  • DynamicControlID: id del controllo che verrà utilizzato come container per iniettare il codice HTML restituito dal metodo.

Utilizzando queste proprietà è possibile utilizzare un metodo (DynamicServiceMethod) di un web service (DynamicServicePath) per farsi ritornare una porzione di condice HTML, che verrà poi iniettato in un preciso controllo (DynamicControlID).

Per provare se il tutto funziona correttamente, la via più semplice è quella di provare il tutto.
Creo un metodo in un web service che restituisca una porzione di codice HTML:

   1: [WebMethod]
   2: [ScriptMethod]
   3: public string GetHoverMenuContent(string contextKey)
   4: {
   5:     return String.Format("<span style='{0}'>Hello World!</span>", contextKey);
   6: }

e nella pagina vado a inserire il controllo, con le proprietà correttamente valorizzate:

   1: <ajax:HoverMenuExtender 
   2:     ID="hoverMenuExtender"
   3:     runat="server"
   4:     TargetControlID="linkButton" 
   5:     PopupControlID="Panel1" 
   6:     PopupPosition="Right" 
   7:     DynamicControlID="Panel2"
   8:     DynamicContextKey='font-weight:bold' 
   9:     DynamicServiceMethod="GetHoverMenuContent" 
  10:     DynamicServicePath="~/ajax.asmx" />
  11:  
  12: <asp:Panel ID="Panel1" runat="server" style="display:none;">
  13:   <asp:Label ID="Panel2" runat="server" />
  14: </asp:Panel> 

Il risultato che ho ottenuto è stato esattamente quello voluto, e quindi che al passaggio del mouse sopra al linkButton (o al controllo definito nella proprietà TargetControlID), è stato chiamato il metodo del web service, passando nel parametro contextKey il valore specificato nella prorietà DynamicContextKey (in questo caso il valore è fisso a font-weight:bold), e una volta ritornato il codice HTML, questo è stato inserito come innerHTML del controllo Panel2, e il Panel1 reso visibile.

In poche parole, tramite queste proprietà si ha la possibilità di popolare i controlli con maggiore dinamicità, e delegando la creazione di parte del contenuto HTML ad un metodo esterno. Questo in molti casi risulta veramente utile, permettondo con poche righe di codice di ottenere il comportamento/effetto voluto, e dimostrando per l'ennesima volta la flessibilità dei controlli contenuti negli AJAX Control Toolkit.

Tags: ,

ASP.NET AJAX | ASP .NET | .NET