Spesso può risultare molto comodo caricare una porzione di html dal server, magari generata da una partial view di ASP.NET MVC (o magari proprio da una View, perchè no?). con angular questo è del tutto possibile grazie alla direttiva ng-include che consente di specificare l'url da cui  caricare una risorsa all'interno della pagina. Vediamo un esempio con typescript:

Per prima cosa si crea una partialview  che dimostri un po' di dinamismo. Ecco un semplice esempio:

   1: <h2>@DateTime.Now.ToLongDateString()</h2>
   2: <h3>@DateTime.Now.ToLongTimeString()</h3>

In seguito aggiungiamo al controller il codice per poterla chiamare dal browser:

   1: public ActionResult _PartialContent()
   2: {
   3:     return PartialView();
   4: }

A questo punto diciamo che l'url per raggiungere la partial view sia il seguente:

/Include/_PartialContent

Creaiamo quindi un controller come segue:

   1: class IncludeController
   2: {
   3:     count: number = 0;
   4:     includeUri: string = undefined;
   5:  
   6:     click(): void
   7:     {
   8:         this.includeUri = '../Include/_PartialContent?ts=' + (++this.count).toString();
   9:     }
  10: }
  11:  
  12: angular.module('include', ['ngRoute'])
  13:     .controller('includeIndex', IncludeController);

Nel controller usiamo una variabile "count" per tenere conto delle volte in cui l'utente clicca il pulsante di test. Questo valore viene accodato all'uri della partial-view per forzarne il caricamento a ciascun click. L'uri così calcolato viene riposto nella proprietà includeUri. Vediamo ora la view:

   1: @{
   2:     ViewBag.Title = "Test Include";
   3: }
   4: <div>
   5:     &nbsp;
   6: </div>
   7: <div ng-app="include" ng-controller="includeIndex as ct" class="row">
   8:     <form>
   9:         <button type="button" class="btn btn-primary" ng-click="ct.click();">Click Me!</button>
  10:         <p ng-show="ct.count>0">clicked {{ct.count}} times</p>
  11:         <div ng-include="ct.includeUri"></div>
  12:     </form>
  13: </div>
  14: @section Scripts {
  15:     <script src="~/Scripts/Views/Include/index.js"></script>
  16: }

Niente più di un normale binding, con un pulsante per invocare la funzione click(), la visualizzazione del count e l'assegnazione della direttiva ng-include sulla variabile includeUri. Il risultato è che la partial view viene inclusa all'interno delle pagina ogni volta che clicchiamo il pulsante.

Interessante notare che mediante questa tecnica possiamo agevolmente caricare nella pagina qualunque tipo di file il server sia in grado di servire. Se ad esempio all'url della partial sostituiamo quello del file TS vedremo apparire il codice.


della mia vita e di altre amenità

Dare Obasanjo nel post che riporto qui sotto, informa sull'intenzione di migrare il suo RSSBandit al framework 2.0 solo quando un tale framework avrà raggiunto una certa base di utenza. Questo a quanto pare non avverrà prima di 1 o 2 anni!!! Mi spiace molto leggere questa notizia, infatti l'adozione del nuovo framework dalle applicazioni di uso più comune avrebbe essa stessa la capacità di velocizzare la sua diffusione. Pur comprendendo in parte le motivazioni che spingono Dare a questa decisione, credo che in questo modo si perda una bella occasione per fare giungere il framework agli utenti finali molto più rapidamente. E non credo che questo potrebbe arrecare danno a RSSBandit, infatti grazie alla possibilità di unire il setup del framework a quello della propria applicazione il passaggio è praticamente indolore.

Link: RSS Bandit & .NET Framework v2.0

powered by IMHO 1.3


Commenti (2) -

# | Lorenzo | 09.11.2005 - 19.27

E quanto diventa grande l'applicazione...
Non lo so... purtroppo è normale pensare che non tutti hanno la possibilità di scaricare subito i 24mb del framework...
negli USA soprattutto la banda larga non è ancora così diffusa...

# | Andrea Boschin | 09.11.2005 - 20.16

a parte che mi sorprende il fatto che la larga banda in USA non sia diffusa, credo comunque che gli utenti abituati all'uso di RSSBandit difficilmente rinunceranno al download dell'applicazione.

Aggiungi Commento