Progettare ViewComponets riutilizzabili

giugno 27, 2017
by Andrea Tosato

I ViewComponent sostituiscono le ChildView di MVC 5 e ci consentono di riutilizzare dei pezzi di logica in più punti delle nostre applicazioni. Una delle funzionalità più interessanti è quella di poter scrivere i ViewComponent in progetti separati e di includerli in una o più applicazioni ASP .NET Core.
In questo script ci soffermeremo su come è possibile incapsulare i ViewComponent in un progetto esterno e riutilizzarlo a seconda delle necessità dei prodotti che vogliamo sviluppare.

Le Cartelle

Creiamo una soluzione contenente una Class Library di tipo .NET Core nella quale inseriremo il codice delle classi dei ViewComponent e le View.
Le View verranno cercate dal runtime di ASP .NET Core in opportuni percorsi.

  • Views/<controller_name>/Components/<view_component_name>/<view_name>
  • Views/Shared/Components/<view_component_name>/<view_name>

La differenza tra i due percorsi è la visibilità all’interno del progetto, nel primo caso il viewcomponent è disponibile solamente alle View che vengono definite all’interno di uno specifico Controller: <controller_name>. I ViewComponent inseriti in Shared possono essere utilizzati da tutti i Controller della nostra applicazione.

ViewComponent folder

ViewComponent folder

Definita la cartella in cui inserire i ViewComponent è necessario creare la View che descriverà il componente. Il nome ricercato di default dal runtime è Default.cshtml. Nel prossimo capitolo vedremo come potrà essere possibile utilizzare View con nomi diversi da Default.
Facciamo notare come i file contenti le View debbano essere impostati con la proprietà EmbeddedResource, vedremo in dettaglio il motivo nelle sezioni successive.

La classe ViewComponent

Definita la cartella in cui inserire le nostre View, andiamo ora a scrivere il codice della classe che rappresenterà il nostro ViewComponent. Il Codice del ViewComponent non deve essere inserito in cartelle particolari ma consigliamo di creare una cartella in cui raggrupparli tutti.
Ci sono alcune piccole accortezze da tenere in considerazione per la scrittura di un ViewComponent: il nome della classe deve concludersi con ViewComponent, deve estendere la classe ViewComponent, deve avere l’attributo [ViewComponent], il metodo da definire si chiama InvokeAsync e deve essere restituire l’interfaccia IViewComponentResult.
Riportiamo un semplice esempio che accetta tre parametri in ingresso e che nel prossimo capitolo vedremo come impostare.

[ViewComponent]
public class ButtonViewComponent : ViewComponent
{
  public async Task<IViewComponentResult> InvokeAsync(string text, string glyphicon, string buttontype)
  {
    ButtonViewModel model = new ButtonViewModel
    {
      Glyphicon = string.Concat("glyphicon-", glyphicon),
      ButtonType = buttontype,
      Text = text
    };
    return View(model);
  }
}

Nel ViewComponent è possibile scrivere codice come se fossimo in un Controller; si potrà accedere al database, alla cache o richiedere oggetti al motore di Dependency Injection.
Se volessimo richiamare una View diversa da quella di default, descritta nel capitolo precedente, dovremmo richiamare il nome della View nell’istruzione di ritorno; un po’ come accade nei Controller MVC.
Ad esempio: return View(“MiaView”, model);

Registrare i ViewComponent in un progetto ASP .NET Core

Una volta definito il progetto è necessario agganciare tutti i ViewComponents all’engine delle pagine Razor.
Prima di procedere è necessario aggiungere una nuova estensione al progetto ASP .NET Core sul quale vogliamo includere i nuovi ViewComponent. L’estensione Microsoft.Extensions.FileProviders.Embedded ci consente di registrare le View definite in precedenza come EmbeddedResource.

Andiamo ora a registrare nell’engine Razor le View appena scritte, in particolare dovremmo aggiungere del codice nella funzione ConfigureServices che si trova nel file di Startup.
Appena prima di registrare il motore Mvc configureremo i file Embedded contenuti nell’assembly come da seguente script:

public void ConfigureServices(IServiceCollection services)
{
  var moduleAssembly = typeof(Share.ViewComponents.TitleViewComponent).GetTypeInfo().Assembly;
  services.Configure<RazorViewEngineOptions>(option =>
  {
    option.FileProviders.Add(new EmbeddedFileProvider(moduleAssembly));
  });
  services.AddMvc();
}

Ricaviamo l’oggetto Assembly relativo al progetto esterno e andiamo ad aggiungere alle opzioni del RazorViewEngine i file Embedded presenti in esso.

Per richiamare i ViewComponet appena creato, sarà necessario inserire il tag helper opportuno all’interno della View. I parametri specificati in esso sono quelli richiesti nel metodo InvokeAsync dichiarato in precedenza; text, glyphicon, buttontype.
Richiameremo i ViewComponent con la sintassi tipica dei tagHelper.

<vc:Button text="Pen" glyphicon="pencil" buttontype="danger"></vc:Button>

Per poter richiamare il ViewComponent è necessario inserire nel file _ViewImports.cshtml la seguente istruzione:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, ViewComp.Share

Il codice completo dello script è presente al seguente link: https://github.com/andreatosato/ViewComponents

About

Senior Software Developer . NET