Il grosso scoglio dell'approccio a questo framework è, dal mio punto di vista, la difficoltà di recuperare documentazione e esempi in rete. Dopo un lungo girovagare, prendendo spunto qua e là sono arrivato ad un modo semplice e poco oneroso (dal punto di vista di codice da scrivere) per effettuare il popolamento asincrono di dropdown a cascata.

Nel mio caso ho una combo popolata al caricamento della pagina ed una seconda caricata con Ajax in asincrono a seconda del valore selezionato sulla prima.

Vediamo innanzitutto il controller

 

public void DatiPersonali()
        {
            provinceDao = DaoFactory.GetProvinceDao();
            // carica la combo provincia nascita
            IList<Province> province = provinceDao.GetAllOrderedBy("Provincia");
            PropertyBag["province"] = province;
        }

Recupero dal factory il dao per le province, carico tutte le province in un IList e metto in propertyBag, a disposizione della vista.

Ecco la parte relativa alle combo della vista (Nvelocity):

<tr id="trProvinciaNascita">
   <td class="colonnasx obbligatorio">
      $Form.LabelFor("candidato.ProvinciaNascita", "Provincia di nascita")&nbsp;*
   </td>
   <td class="colonnadx" colspan="3">
      $Form.Select("candidato.ProvinciaNascita", 
         $province, 
         "%{class='required' 
            title='campo obbligatorio' 
            onchange='fillComuniNascita(this.value)' 
            value='CodIstatProvincia',
            text='Provincia', 
            firstoption='Seleziona', 
            firstoptionvalue=''}")
   </td>
</tr>
<tr id="trLuogoNascita">
   <td class="colonnasx obbligatorio">
      $Form.LabelFor("candidato.LuogoNascita", "Comune di nascita")&nbsp;*
   </td>
   <td class="colonnadx" colspan="3">
      <div id="divComuniNascita">
         $Form.Select("candidato.LuogoNascita", 
            $comuni, 
            "%{class='required' 
               title='campo obbligatorio' 
               style='width: 200px;'}")
      </div>
   </td>
</tr>

Da notare come all'interno del secondo TD della seconda riga TR della tabella sia presente un div contenente una combo inizialmente vuota. All'evento onchange della combo "parent" ovvero della provincia, viene lanciato un metodo Javascript che si può vedere qui sotto:

    function fillComuniNascita(provincia)
    {
       new Ajax.Updater('divComuniNascita', 'GetComuni.castle', 
           {method: 'post', 
            onComplete: onSuccededComuni, 
            onFailure: reportError, 
            parameters: {code: provincia} } );
    }
 
    function onSuccededComuni(originalRequest)
    { 
        $("candidato.LuogoNascita").options.selectedIndex = 
           getIndexByValue($("candidato.LuogoNascita"),
                           $("sLuogoNascita").value);
    }

La function javascript si occupa di recuperare e di fare l'update del div "divComuniNascita", recuperando le options relative alla combo dalla action "GetComuni" e dalla vista relativa:

Quindi sul controller:

public void GetComuni(string code) {
   if (!String.IsNullOrEmpty(code)) {
      provinceDao = DaoFactory.GetProvinceDao();
      // recupero la provincia
      IList<Province> provincie = provinceDao.GetByPropertyName(code, "CodIstatProvincia");
      if (provincie.Count != 1) {
         throw new Exception("Provincia non trovata");
      }
      Province provincia = provincie[0];
      // Carico nella properyBag i comuni relativi alla provincia selezionata
      IList<Comuni> comuni = provincia.Comuni;
      PropertyBag["comuni"] = comuni;
   }
   // effettuo la render di una vista apposita per la combo comuni
   RenderView("_Comuni");
   // chiamo la cancellayout per evitare che il framework mi faccia la render della
   // vista "GetComuni"
   CancelLayout();
}
 

E la vista _Comuni per popolare le options della select:

#if ($comuni.Count > 0) 
    $Form.Select("candidato.LuogoNascita", 
       "", 
       $comuni ,
       "%{onchange='onChangeComuniNascita()', 
          value='CodiceIstat',
          text='Comune', 
          firstoption='Seleziona', 
          firstoptionvalue=''}")
#end

La combo è così popolata con Ajax in asincorno ... e tutto funzione perfettamente.

Technorati Tags: ,