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.


Aggiungi Commento

di .NET e di altre amenità

M'è capitato di sentir parlare dell'entity designer di LINQ come "uno dei tanti inutili designer" di Visual Studio. Non sono un amante dei designer, e quando posso li evito. Ad esempio, per quanto ben fatto sia il designer delle WebForm mi capita di usarlo molto di rado per il semplice fatto che di solito scrivere il codice a mano mi è più rapido.

Ed è proprio questo il punto... il designer deve essere uno strumento che aiuta a risparmiare tempo e non a complicare la vita, perciò mentre un designer come quello per le WebForms ha un utilità relativamente bassa, quello di LINQ è pressochè indispensabile. Per quanto sia possibile scriversi a mano le classi di Linq To SQL chi ci abbia provato si sarà sicuramente reso conto che si tratta di un lavoro improbo e ripetitivo. Non si tratta infatti semplicemente di creare proprietà e metodi, ma anche implementare le interfaccie INotifyPropertyChanged e INotifyPropertyChanging che implicano i dover intervenire sulle proprietà una ad una. Questa implementazione è resa obbligatoria dal fatto che l'object tracking si basa su queste interfacce e senza di esse non sarà in grado di garantire il corretto funzionamento perdendo una delle caratteristiche più importanti di LINQ.

L'uso del designer consente di risparmiare moltissimo tempo e per questo motivo è sicuramente opportuno usarlo.

Technorati Tag: ,

Aggiungi Commento