Costruzione di composite control

2 pagine in totale: <<Indietro 1 [2]

Creazione dei controlli figlio presenti nel custom control

La funzione CreateChildControls si occupa di creare i controlli figli per il rendering del composite control. E' pertanto all'interno di essa che sarà da inserire tutto il codice necessario:

  • Sarà creato un controllo HtmlInputText che conterrà il testo selezionato dal ListBox o, in alternativa, il testo nuovo o modificato.
  • Verrà creato un controllo HtmlInputHidden per contenere il valore ?Value? legato al DropDown. Verrà creato un controllo HtmlAnchor per potere espandere la lista delle opzioni disponibili.
  • Infine sarà creato un controllo ListBox per contenere le voci caricate dal un DataSource passato come proprietà al controllo.
Protected Overrides Sub CreateChildControls()
   Dim IDControllo As String = Me.ID
   txt = New System.Web.UI.HtmlControls.HtmlInputText
   val = New System.Web.UI.HtmlControls.HtmlInputHidden
   lnk = New System.Web.UI.HtmlControls.HtmlAnchor
   lst = New System.Web.UI.WebControls.ListBox
   txt.Style("WIDTH") = "100%"
   txt.ID = IDControllo
   txt.Name = IDControllo
   If Not IsNothing(mtxtValue) Then
     If mtxtValue <> "" Then txt.Value = mtxtValue
   End If
   val.ID = "Value_" & IDControllo
   val.Name = "Value_" & IDControllo
  
   If Not IsNothing(mvalValue) Then
     If mvalValue <> "" Then val.Value = mvalValue
   End If
   lnk.InnerHtml = "..."
   lst.ID = "Dictionary_" & LCase(IDControllo)
   lst.DataSource = mDictionary
   lst.DataValueField = mDictionaryValueField
   lst.DataTextField = mDictionaryTextField
   lst.DataBind()
   lst.Width = Unit.Percentage(100)
   lst.Style("display") = "none"

Si dovranno poi creare delle funzioni Javascript che si occuperanno, lato client, di:

  • mostrare il Listbox con le possibili voci di dizionario;
  • scrivere nella casella di testo la voce selezionata dal ListBox;
  • scrivere nella casella di testo nascosta il valore della proprietà Value per poterla restituire al client;
lst.Attributes.Add("onChange", "return SetDictionaryValue(this, '" & txt.UniqueID & "','" & val.UniqueID & "','" & lst.UniqueID & "');")
txt.Attributes.Add("onChange", "return SetValue('" & txt.UniqueID & "','" & val.UniqueID & "','" & lst.UniqueID & "');")

Dim jsExpansClientSide As String = "javascript:ShowDictionary('" & lst.UniqueID & "')"
lnk.HRef = jsExpansClientSide
If (Not Page.IsStartupScriptRegistered("FindElement")) Then
  Dim scr As String
  scr = "<script> " & _
   "function FindElement(cosa) { " & _
   " var eForm = document.forms[0]; " & _
   " var iNumElems = eForm.elements.length; " & _
     " var idElement = ''; " & _
     " var idCurrEl = ''; " & _
    " for (var i=0; i<iNumElems; i++) { " & _
     "   idCurrEl = eForm.elements[i].id; " & _
     " if (idCurrEl.indexOf(cosa)>=0) { " & _
     "   idElement = idCurrEl; " & _
     "   i=iNumElems; " & _
     "   } " & _
     "  } " & _
     " return idElement; " & _
     "} " & _
     ""</script>"
     "Page.RegisterStartupScript("FindElement", scr)
End If
If (Not Page.IsStartupScriptRegistered("ShowDictionaryFunction")) Then
  Dim scr As String
  scr = "<script> " & _
   "function ShowDictionary(cosa) { " & _
     " var idCosa = FindElement(cosa); " & _
     " paragrafo = document.getElementById(idCosa).style; " & _
     " if (paragrafo.display==""none"") { " & _
     "   paragrafo.display=""""; " & _
     " }else{ " & _
     "   paragrafo.display=""none""; " & _
     " } " & _
     "} " & _
     "</script>"
     "Page.RegisterStartupScript("ShowDictionaryFunction", scr)
End If
If (Not Page.IsStartupScriptRegistered("SetDictionaryFunction")) Then
  Dim scr As String
  scr = "<script> " & _
     "function SetDictionaryValue(lst,txt,val,parag) { " & _
     " var indexselval = lst.selectedIndex; " & _
     " var seltxt = lst.options[indexselval].text; " & _
     " var selval = lst.options[indexselval].value; " & _
     " var idTxt = FindElement(txt); " & _
     " document.getElementById(idTxt).value=seltxt; " & _
     " var idVal = FindElement(val); " & _
     " document.getElementById(idVal).value=selval; " & _
     " var idParag = FindElement(parag); " & _
     " paragrafo = document.getElementById(idParag).style; " & _
     " paragrafo.display=""none""; " & _
     " return true; " & _
     "} " & _
     "</script>"
     Page.RegisterClientScriptBlock("SetDictionaryFunction", scr)
End If
If (Not Page.IsStartupScriptRegistered("DelValueFunction")) Then
  Dim scr As String
  scr = "<script> " & _
     "function SetValue(txt,val,lst) { " & _
     " var idTxt = FindElement(txt); " & _
     " var testo = document.getElementById(idTxt).value;" & _
     " var idLst = FindElement(lst); " & _
     " var lista = document.getElementById(idLst);" & _
     " var valore=-1; " & _
     " for (var i=0; i<lista.size; i++) { " & _
     "   if (lista.options[i].text==testo) { " & _
     "   valore=lista.options[i].value;" & _
     "   } " & _
     " } " & _
     " var idVal = FindElement(val); " & _
     " document.getElementById(idVal).value=valore; " & _
     " return true; " & _
     "} " & _
     "</script>"
     Page.RegisterClientScriptBlock("DelValueFunction", scr)
End If

La funzione JavaScript SetValue si occupa di impostare il valore dell'HtmlInputHidden in modo da contenere la proprietà Value dell'elemento selezionato nel ListBox o, nel caso venga modificata la voce selezionata o aggiunta una nuova voce, si occupa di impostare il valore -1, per enfatizzare che si è selezionata una voce non presente nel dizionario.

I controlli creati saranno poi aggiunti ad una tabella, per posizionarli correttamente nella pagina che conterrà il custom control:

   Dim tbl As Table = New Table
   tbl.cellspacing = 0
   tbl.cellpadding = 0
   tbl.BorderWidth = Unit.Pixel(0)
   tbl.Width = Me.Width
   Dim rigaTxtBtn As TableRow = New TableRow
   Dim cellaTxt As TableCell = New TableCell
   cellaTxt.Width = Unit.Percentage(100)
   cellaTxt.Controls.Add(txt)
   rigaTxtBtn.Controls.Add(cellaTxt)
   Dim cellaBtn As TableCell = New TableCell
   cellaBtn.Controls.Add(lnk)
   rigaTxtBtn.Controls.Add(cellaBtn)
   tbl.Controls.Add(rigaTxtBtn)
   Dim rigaContenitore As TableRow = New TableRow
   Dim cellaContenitore As TableCell = New TableCell
   cellaContenitore.ColumnSpan = 2
   cellaContenitore.Controls.Add(lst)
   rigaContenitore.Controls.Add(cellaContenitore)
   tbl.Controls.Add(rigaContenitore)
   Dim rigaVal As TableRow = New TableRow
   Dim cellaVal As TableCell = New TableCell
   cellaVal.ColumnSpan = 2
   cellaVal.Controls.Add(val)
   rigaVal.Controls.Add(cellaVal)
   tbl.Controls.Add(rigaVal)
   Controls.Add(tbl)

Rendering dell'output

Infine non ci resterà che generare l'output da restituire alla pagina che conterrà il custom control:

Protected Overrides Sub Render(ByVal output As System.Web.UI.HtmlTextWriter)
  EnsureChildControls()
  RenderChildren(output)
End Sub

Immagine

Utlizzo del controllo

Per utilizzare il controllo creato nella pagine ASP.NET è possibile aggiungere nella posizione desiderata un PlaceHolder e, tramite codice, inserire il controllo in questo modo:

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
  Dim xdd As xShare.WebControls.xFreeDropDown = New xShare.WebControls.xFreeDropDown
  xdd = New xShare.WebControls.xFreeDropDown
  If Not Page.IsPostBack Then
   xdd.Text = "Minnie"
   xdd.Value = "Goofy"
  End If
  xdd.DataSource = DataViewVociDizionario
  xdd.DataTextField = "Value"
  xdd.DataValueField = "Key"
  xdd.ID = "freedropdown"
  xdd.Width = Unit.Pixel(300)
  PlaceHolder1.Controls.Add(xdd)
End Sub

Per leggere il testo ed il valore selezionato dovremo invece utilizzare questo codice:

Dim ctr As Control = Page.FindControl("freedropdown")
Dim xdd As xShare.WebControls.xFreeDropDown = DirectCast(ctr, xShare.WebControls.xFreeDropDown)
Dim Testo As String = xdd.Text
Dim Valore As String = xdd.Value

Nell'esempio allegato compare anche il codice per individuare testo e valore nel caso in cui il custom control sia inserito in uno user control.

Immagine

Conclusioni

Questo controllo vuole essere solo uno spunto sulla creazione di un DropDownList più flessibile di quanto già presente, è pertanto passibile di miglioramenti nell'efficienza delle funzioni Javascript e nella grafica, ma rappresenta un ottimo esempio per partire alla costruzione di Composite Control.

Approfondimenti

2 pagine in totale: <<Indietro 1 [2]

Attenzione: Questo articolo contiene un allegato

Contenuti dell'articolo

Commenti
Dai un voto a questo articolo, ci aiuterà a migliorare il nostro sito (1 è il voto minimo, 5 il massimo).

Per procedere al rating dell'articolo devi essere autenticato.

Aggiungi un nuovo commento »»»
Per inserire un commento, devi registrarti alla nostra community.

Feedback
3,03,03,03,03,0 Difficoltà
4,04,04,04,04,0 Utilità
5,05,05,05,05,0 Contenuti
Autore: Valeriomarco Montanari
Data: 28 giugno 2005

Categorie: ASP.NET
Tutorial: ASP.NET avanzato
Livello: 300 (?)
Tags: , ,
Requisiti: ASP.NET 1.1 VB.NET
Stampa Stampa Download

Contenuti dell'articolo:


TUTORIALS

ASP.NET
.NET Framework 3.0
.NET Framework 3.5
Silverlight
Classic ASP
Database
Altri argomenti
TOP TEN ARTICOLI
NOTIFICHE

Iscriviti alla nostra newsletter nuoviarticoli per ricevere e-mail le notifiche!

Indirizzo e-mail:
PROVIDER ASP.NET 2.0

Seleziona il database per avere il web.config pronto per Membership, Roles e Profile API.

MEDIA

Tutti i media



IN EVIDENZA
MISC