How to derive a web control from another one

I'm developing an asp.net project containing a repeater; it is filled with a datatable and every item of the repeater contains some web controls, including a button. In response to the click on one of the buttons I have to delete a record in the table referenced by an unique ID. Many possibilities exist, usually a common solution is to use the property "CommandArgument", but because I like elegance (and using a string property to store an integer isn't elegant!), to explore new solutions and, finally, because I want to lose my VB roots and to enter the wonderful world of the C# OO programming I tried the way of creating a new web control, similar to a button, but with a new property, RecordId, useful to store an integer: the natural way is to derive the new control from a button.

The steps to accomplish this easy job are:

- Start Visual C# Express 2008 (or equivalent)

- Create a new Class Library project

- Add System.Web to references

- Rename the class with a significant name (for example ButtonExt)

- Define the new control in the namespace System.Web.UI.WebControls

- Derive the class from System.Web.UI.WebControls.Button

- Add the RecordId property

- Override LoadViewState and SaveViewState for viewstate managing

- Compile and obtain the DLL of the new control

And if you want to use it:

- Create a new asp.net project

- Add the DLL of the control to references

- Drag the DLL of the control to the General Section of the Toolbox

- Drag the control to the form and use it!

My two cents

Download source

Download example

How to embed a resource in a DotNet DLL (and how to use it)

In my previous post I proposed a web custom control useful to embed videos in your web pages.
The control is made of some server-side code written in C# and some javascript functions and one flash plug-in, both client-side.
An interesting point is that all the necessary code is embedded in a single DLL, making the exploiting process in a ASP.NET panorama easier.

Step 1
In the Solution Explorer, over the file that you want to embed, right-click and choice Properties then set “”Embedded Resource” on “Build Action” :



Step 2
If the file is a web resource that you want to reference with an URL (for example a javascript file, a flash plug-in or a css file) you must open the Properties/AssemblyInfo.cs file:

Then add the following line (Filename.extension is the file to embed, Namespace is the namespace of the project or of the control and MIME_Type is the MIME type of the file):

[assembly: WebResource(“Namespace.Filename.extension”, “MIME_Type“)]

For example in my previous project:

Step 3
Using the embed file is easy, you can obtain the referencing URL with the GetWebResourceUrl method:

Page.ClientScript. GetWebResourceUrl (this.GetType(), Namespace.Filename.extension)

That’s all!

Creare un Web Custom Control - Codice completo e esempio

Finalmente il codice completo e un esempio Ajax scaricabile qui.

Creare un web custom control - Parte 8

Integrare il controllo in un progetto ASP.NET con Ajax

Integrare un web custom control in un progetto Ajax è molto semplice: una volta installato il supporto Ajax a Visual Web Developer 2005 Express, è sufficente creare un nuovo "ASP.NET Ajax-Enabled web site":poi nella pagina aspx, come per ogni altra applicazione Ajax, è ncessario inserire un controllo ScriptManager e almeno un controllo UpdatePanel:

Per quanto riguarda il nostro web custom control non è necessario cambiare una sola riga di codice, tutto funzionerà magicamente: i programmatori della Microsoft hanno fatto proprio un bel lavoro!

Creare un web custom control - Parte 7

Integrare il controllo in un progetto ASP.NET

Per integrare il controllo in un progetto di Visual Web Developer è necessario compilarlo per ottenere una DLL, copiarla poi nella cartella bin del progetto non è sufficiente perché significherebbe rinunciare alla possibilità di integrarlo all'interno dell'interfaccia offerta da Visual Studio, ma seguendo pochi semplici passi è possibile includerlo nel toolbox per poterlo poi utilizzare come un qualunque altro controllo:

1 - Aggiungere il controllo al toolbox cliccano con il tasto di destra sul toolbox stesso, selezionando poi la voce "Choose Items ..." e infine caricando la DLL appena compilata.

2 - Copiare il file .js con le funzioni necessarie al funzionamento del controllo all'interno della directory del sito e ricordarsi di referenziarlo all'interno dell'header di ogni pagina aspx nel quale intendiamo utilizzare il controllo:



E adesso è possibile iniziare ad utilizzare il controllo. Piazziamo il controllo sulla pagina e valorizziamo le proprietà principale, da codice creiamo l'array MenuItem che definisce le voci di menu e lo passiamo al controllo:

#using ExploWCC;

...

if (!IsPostBack)
{
MenuItem[] yv = new MenuItem[4];

yv[0].Title = "Menu numero 1";
yv[0].ToolTip = "Questo è il tooltip 1";

yv[1].Title = "Menu numero 2";
yv[1].ToolTip = "Questo è il tooltip 2";

yv[2].Title = "Menu numero 3";
yv[2].ToolTip = "Questo è il tooltip 3";

yv[3].Title = "Menu numero 4";
yv[3].ToolTip = "Questo è il tooltip 4";

MenuLeft.MenuItems = yv;
}

Poi è necessario gestire l'evento aggiungendo il seguente codice:

protected void MenuLeft_MenuChange(object sender, int e)
{
MenuLeft.Selected = e;
}

e valorizzare l'attributo OnMenuChange nel tag del controllo:

OnMenuChange="MenuLeft_MenuChange"

Fine, è tutto (o quasi, è evidente che per arricchire il controllo è necessario definire stili, aggiungere immagini ... ma questo è lavoro per il webdesigner. Nella prossima, ed ultima, puntata integrerò il nostro controllo in un progetto Ajax e infine renderò possibile per lo scaricamento il progetto completo sia del controllo che del sito che lo utilizza.

Creare un web custom control - Parte 6

Eventi

Per completare il controllo è necessario dotarlo della capacità, in corrispondenza del click su una voce di menu, di generare un evento lato client che scateni l'esecuzione di codice lato server.

La sequenza di operazioni che porta al raise di un evento all'interno dell'architettura ASP.NET è la seguente:

1. javascript, in genere in risposta ad un evento DHTML, invoca la funzione __doPostBack con due argomenti: eventTarget con il nome del controllo che ha generato l'evento e eventArgument come variabile dove inserire dei parametri aggiuntivi.
2. a questo punto l'esecuzione del comando è presa in carico dalle librerie javascript di ASP.NET che provvedono a passare i dati al server tramite un normale postback con ricaricamento della pagina in un tradizionale progetto ASP.NET o tramite la classe XMLHttpRequest nei progetti che ricorrono ad Ajax.
3. il server elabora la richiesta eseguendo il codice necessario compreso il codice corrispondente all'evento e risponde al client rinviando i dati in formato XML oppure HTML a seconda che si stia lavorando in Ajax o meno.
4. In un progetto Ajax è ancora la libreria ASP.NET client ad elaborare la risposta e ad aggiornare l'aspetto della pagina, in un progetto tradizionale è il browser che esegue il rendering della pagina.

Nel nostro progetto la funzione javascript che si occupa di eseguire un __doPostBack è YVChgBkgMnu come è possibile verificare nella libreria js riportata nel secondo articolo dove si può notare che come secondo argomento della funzione è passato l'indice (0 ... n-1) della voce di menu cliccata.

Decidiamo di chiamare il nostro evento con il nome di MenuChangeHandler, nel codice C# è necessario quindi dichiararlo:

public delegate void MenuChangeHandler(object sender, int e);

All'interno della classe dichiariamo il delegate MenuChange:

public event MenuChangeHandler MenuChange;

E inseriamo il codice di risposta all'evento:

public void RaisePostBackEvent(string
{
   if (MenuChange != null)
      MenuChange(this, Convert.ToInt16(eventArgument));
}

La nostra nuova classe Menu.cs può essere visualizzata cliccando qui.

Creare un web custom control - Parte 5

Il metodo Render

Il metodo Render si occupa di generare il codice HTML che rappresenta il controllo in base al valore delle delle proprietà e ad altri parametri come per esempio lo user agent.
Nel nostro caso si tratta di creare un nuovo metodo Render che sovrascriva quello standard del controllo e che si occupi di generare le sequenze di <div>, <table> e <img> che costituiscono il menu secondo la struttura indicata nel secondo articolo.

Il metodo Render non restituisce nessun valore e accetta in ingresso un parametro di tipo HtmlTextWriter.

Il listato del metodo Render è scaricabile qui

Per gestire i differenti meccanismi con i quali i principali browser gestiscono la trasparenza è stata introdotta la funzione opacity così definita:

private string opacity(int x)
{
if (Page.Request.UserAgent.Contains("MSIE"))
{
return "filter:alpha(opacity=" + x.ToString() +");";
}
else
{
string op = ((x + 1000).ToString()).Substring(1);
return "opacity:" + op.Substring(0, 1) + "." + op.Substring(1) + ";";
}
}

Nota: il metodo Render richiama anche dei metodi privati della classe il cui codice sarà presente nel download finale del progetto, ma che adesso è preferibile trascurare per semplicità. Inoltre per il corretto funzionamento di tutto il nuovo codice aggiunto è necessario includere i namespace System e System.Web.UI aggiungendo in testa al listato della classe le righe:

using System;
using System.Web.UI;

oltre ad aggiungere un riferimento agli assembly System.Drawing e System.Web.Extensions:

Creare un web custom control - Parte 4

Le proprietà di default e custom

Come ogni controllo, anche il nostro avrà una serie di proprietà, alcune ereditate dalla classe WebControl da cui è derivato, alcune create appositamente. Le proprietà entreranno in gioco in fase di rendering del controllo caratterizzando il codice HTML.

Le proprietà ereditate che gestiremo sono:

ID
Visible
Width
BorderStyle
BorderWidth
BackColor
BorderColor

mentre le nuove proprietà introdotte sono:

Opacity (int)
CssClassMenuOver (string)
CssClassMenu (string)
CssClassToolTip (string)
Selected (int)
Top (Unit)
Left (Unit)
ZIndex (int)
MenuItems (array di elementi di tipo MenuItem)

con MenuItem definito in questo modo:

public struct MenuItem
{
   public string Title;
   public string ToolTip;
   public bool Hidden;
   public string Style;
}

e definisce le caratteristiche di una singola voce di menu.

Quindi al codice della classe è necessario aggiungere le seguenti righe di codice:

#region Properties
private int _opacity = 20;
public int Opacity
   {
      set
      {
         _opacity = value;
         if (_opacity < 0)
            _opacity = 0;
         if (_opacity > 100)
            _opacity = 100;
      }
      get
      {
         return _opacity;
      }
   }
   private MenuItem[] _menuitems;
   public MenuItem[] MenuItems
   {
      set
      {
         _menuitems = value;
      }
      get
      {
         return (_menuitems);
      }
   }
   private string _cssclassmenuover;
   public string CssClassMenuOver
   {
      set
      {
         _cssclassmenuover = value;
      }
      get
      {
         return _cssclassmenuover;
      }
   }
   private string _cssclassmenu;
   public string CssClassMenu
   {
      set
      {
         _cssclassmenu = value;
      }
      get
      {
         return _cssclassmenu;
      }
   }
   private string _cssclasstooltip;
   public string CssClassToolTip
   {
      set
      {
         _cssclasstooltip = value;
      }
      get
      {
         return _cssclasstooltip;
      }
   }
   private int _selected;
   public int Selected
   {
      set
      {
         _selected = value;
      }
      get
      {
         return _selected;
      }
   }
   private Unit _top = 0;
   public Unit Top
   {
      set
      {
         _top = value;
      }
      get
      {
         return _top;
      }
   }
   private Unit _left = 0;
   public Unit Left
   {
      set
      {
         _left = value;
      }
      get
      {
         return _left;
      }
   }
   private int _zindex = 0;
   public int ZIndex
   {
      set
      {
         _zindex = value;
      }
      get
      {
         return _zindex;
      }
   }
#endregion

Nota: siccome abbiamo definito delle proprietà e delle variabili di tipo Unit è necessario includere anche il namespace System.Web.UI.WebControls aggiungendo in testa del file della classe la seguente riga di codice:

using System.Web.UI.WebControls;

Creare un web custom control - Parte 3

La classe Menu.cs

Finalmente è arrivato il momento di mettere mano al codice C#, quindi avviamo il Visual C# e creiamo un nuovo progetto di tipo "Class Library" e gli diamo il nome "ExploWCC" (Explobot Web Custom Controls).


Visual C# ci crea la struttura di progetto, compreso la classe Class1.cs che rinominiamo in Menu.cs.


La nostra nuova classe, siccome vuole essere un web control, eredita da System.Web.UI.WebControls.WebControl, assumendo quindi il seguente aspetto:

namespace ExploWCC
{
      public class Menu : System.Web.UI.WebControls.WebControl
      {
      }
}

Se proviamo a compilare questa semplicissima classe ci vengono segnalati una serie di errori che ci stanno ad indicare la necessità di inserire un riferimento all'assembly System.Web seguendo dei semplici passaggi:

• click con il tasto di destra sul nome della libreria (ExploWCC) nel Solution Explorer
• nel menu che compare selezionare la voce "Add Reference ..."
• nella label ".NET" del pannello che compare fare doppio click su System.Web

A questo punto la compilazione può avvenire senza errori, quindi nel Solution Explorer, nella cartella References compare anche System.Web (nel mio caso sono presenti anche la System.Data e la SystemXml che ho rimosso perché al momento non mi servono):

Creare un web custom control - Parte 2

HTML e Javascript

Il controllo che vogliamo realizzare è un menu verticale in cui l'elemento selezionato viene evidenziato con due righe orizzontali sopra e sotto con uno sfondo di colore diverso con la prerogativa di poter settare il coefficiente di trasparenza; inoltre un'altra peculiarità è quella di poter mostrare dei baloon in corrispondenza dell'elemento sul quale si posiziona il mouse.

Il menu è stato ottenuto, a differenza dei menu CSS più recenti, non con i tag <UL> e <LI> (come spiegato qui per esempio), ma nel più tradizionale metodo con una serie di <DIV>, uno per ogni voce di menu oltre a uno per lo sfondo dell'elemento selezionato, uno per le sottolineature superiori ed inferiori sempre dell'elemento selezionato, uno per il contenuto del baloon e uno per l'ombra del baloon.

Il codice HTML di cui si compone un menu è quindi di questo tipo:

<DIV id=NomeMenu ... >
      <DIV ... >Menu 1</DIV>
      <DIV ... >Menu 2</DIV>
      ...
      <DIV id=NomeMenu_bkg ...></DIV>
      <DIV id=NomeMenu_border ...></DIV>
      <DIV id=NomeMenu_baloon ...>
      <DIV id=NomeMenu_ombra ...></DIV>
            <TABLE>
                  <TR>
                        <TD class=tooltip id=NomeMenu_text>&nbsp;</TD>
                  </TR>
            </TABLE>
            <IMG id=NomeMenu_freccia ... >
      </DIV>
</DIV>

Evidentemente, non facendo ricorso ad automatismi CSS, a corredo del controllo c'è una libreria di funzioni javascript che gestisce l'interazione utente<->browser<->server; clicca qui per visualizzare la libreria, oppure qui per scaricarla.

// Raccolta di variabili e funzioni javascript necessarie al menu

var curdiv;
var curmenuctrl;
var curmenuitem;
var curclass;

// Attiva l'elemento di menu 'num' del controllo di nome 'cntrl'
function YVSetMenu(cntrl,num)
{
      var m = document.getElementById(cntrl).getElementsByTagName("div")[num];
      var y = m.offsetTop;
      var h = m.clientHeight;

      bkg = document.getElementById(cntrl + "_bkg");
      brd = document.getElementById(cntrl + "_border");
      bkg.style.height = h;
      bkg.style.top = y;
      brd.style.height = h;
      brd.style.top = y;
      bkg.style.display = "block";
      brd.style.display = "block";
}

// Seleziona l'elemento dimenu cliccato e fa una chiamata per generar l'evento lato server
function YVChgBkgMnu()
{
      YVSetMenu(curmenuctrl, curmenuitem);
      __doPostBack(curmenuctrl, curmenuitem);
}

// Mostra il tooltip i corrispondenza dell'elemento di
// menu sul quale si trova il puntatore del mouse
function YVShowTooltip(cntrl, mnu, txt, clss)
{
      if(cntrl!=undefined)
      {
            curdiv = document.getElementById(cntrl).getElementsByTagName("div")[mnu];
            curmenuitem = mnu;
            curmenuctrl = cntrl;
            curclass = clss;
            document.body.style.cursor = "hand";
      
            posy = curdiv.offsetTop + (curdiv.offsetHeight / 2);
            curdiv.className = curclass;
            
            if(txt!="")
            {
                  document.getElementById(curmenuctrl + "_baloon").style.top = posy - 77;
                  document.getElementById(curmenuctrl + "_baloon").style.display = 'block';
                  document.getElementById(curmenuctrl + "_text").innerHTML= unescape(txt);
            }
            else
            {
                  document.getElementById(curmenuctrl + "_baloon").style.display = 'none';
            }
      }
      else
            document.getElementById(curmenuctrl + "_baloon").style.display = 'block';
}

// Nasconde il tooltip
function YVHideTooltip(clss)
{
      document.body.style.cursor = "default";
      curdiv.className = clss;
      document.getElementById(curmenuctrl + '_baloon').style.display = 'none';
}

Altre funzioni javascript sono cablate all'interno del codice HTML nel momento in cui viene generato dall'evento Render del controllo, ma questo verrà visto in una prossima lezione.

Creare un web custom control - Parte 1

Introduzione

ASP.NET permette l'utilizzo di controlli web personalizzati di 2 tipi differenti:

1. User control
2. Custom control
   

I web user control sono più semplici da realizzare e si ottengono assemblando controlli già esistenti, mentre con i web custom control il programmatore si deve occupare anche della generazione del codice HTML associato e quindi sono più complessi da realizzare, ma anche più versatili e permettono di ottenere risultati difficilmente ottenibili con i web user control.

In questa serie di articoli mi occuperò appunto dei web custom control, illustrerò come realizzare un menu ampiamente configurabile e con qualche effetto originale (come per esempio i baloon per le voci del menu o l'effetto trasparenza) questo mi permetterà di illustrare alcuni punti interessanti come la possibilità di generare un evento lato server utilizzando javascript, come generare codice HTML differente a seconda dello user agent, come utilizzare le proprietà standard dei controlli web standard (System.Web.UI.WebControls.WebControl) e come crearne di personalizzate e integrate con le funzionalità di intellisense e infine come integrarle in una pagine aspx illustrando come continui a funzionare egregiamente anche in un progetto ASP.NET con supporto Ajax.

Per poter seguire l'articolo e utilizzare il codice dell'esempio che fornirò è necessario aver installato almeno Visual Studio C# 2005 Express per realizzare il controllo, Visual Web Developer 2005 Express con estensioni Ajax per testarlo.

Se volete dare un'occhiata al risultato finale andate sul mio sito The Yellow Van.