Questo post è stato scritto da Andrea Dottor
L’uscita di ASP.NET MVC 5 ha portato grandi novità, una tra queste è l’introduzione di Bootstrap all’interno dei template di progetto in Visual Studio 2013.
Bootstrap è uno trai i più popolari framework per lo sviluppo di interfacce web, ed è stato creato da Twitter. Bootstrap mette a disposizione degli sviluppatori tutta una serie di stili e funzionalità (pronte all’uso) che velocizzano notevolmente la fase di sviluppo, permettendo di avere in poco tempo un’interfaccia graficamente molto gradevole che sfrutta a pieno CSS3 e il responsive design.
Responsive design
Una funzionalità che otteniamo a gratis realizzando la nostra applicazione dal template di progetto di Visual Studio 2013 è la capacità della nostra applicazione di adattarsi in modo automatico alla dimensione del browser ottimizzandone il layout, ed il tutto grazie all’utilizzo che Bootstrap fa delle media-query di CSS3.
Ecco come appare un’applicazione ASP.NET MVC appena creata: l’elemento più evidente che viene modificato in base alla larghezza della pagina è il menu. Come si può notare dall’immagine, il menu è completamente visibile e con gli item disposti in orizzontale. 
Ridimensionando la pagina (modificando la larghezza della finestra del browser o navigando da un dispositivo mobile) l’aspetto del menu viene modificato, e si può notare che le voci del menu ora sono nascoste e saranno rese visibili al click sull’apposita icona (posta in alto a destra), come da immagine seguente.
Il menu in questo caso ha gli elementi disposti in verticale, rendendo così il layout ottimizzato per tutti gli utenti che staranno navigando da dispositivi mobile.
Come personalizzare l’applicazione?
L’applicazione così creata è facilmente personalizzabile utilizzando un qualsiasi tema di Bootstrap. Esistono siti come http://bootswatch.com/ e http://wrapbootstrap.com/ che permettono il download di temi completi.
Per modificare l’aspetto dell’applicazione sarà sufficiente sostituire i file boostrap.css e boostrap.min.css appena scaricati, sostituendoli a quelli presenti nella cartella Content. Nel caso volessimo mantenere i CSS originali, possiamo rinominare i file con il nuovo tema in bootstrap.nometema.css e bootstrap.nometema.min.css, copiarli nella cartella Content ed infine andare a modificare il file BundleConfig.cs (presente nella cartella AppStart) sostituendo “boostrap.css” con il nome del file css che vogliamo applicare. 
Nessuno però ci vieta di modificare a mano gli stili di Bootstrap. In questo caso vi consiglio di visitare la pagina http://getbootstrap.com/customize/ in quanto permette (grazie all’uso di less.css) di creare in modo facilitato un proprio tema e di scegliere quali funzionalità inserire al suo interno, permettendo così di poter ridurre il peso dei file.
Uso di Bootstrap in un’applicazione ASP.NET MVC
Essendo Bootstrap una libreria basata su apposite classi css, per poterlo utilizzare al meglio si dovrà andar a specificare una o più classi css negli elementi delle View a seconda dell’aspetto e comportamento che vorremmo avere.
Per personalizzare un link e far si che questo acquisisca il classico aspetto dei pulsanti di Bootstrap sarà necessario decorarlo con le classi “btn btn-default”.
Utilizzando l’helper ActionLink ci si dovrà ricordare di utilizzare l’override che offre la possibilità di specificare gli attributi html (http://msdn.microsoft.com/en-us/library/dd492124(v=vs.118).aspx ) come da esempio seguente:
@Html.ActionLink("Home", "Index", "Home", null, new { @class = "btn btn-default"})
La stessa metodologia va utilizzata anche per gli altri helper.
es: http://msdn.microsoft.com/en-us/library/hh833699(v=vs.118).aspx e http://msdn.microsoft.com/en-us/library/hh833699(v=vs.118).aspx
<div class="form-group">
@Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
</div>
</div>
Essendo la keyword ‘class’ riservata, per poterla specificare come attributo html è necessario inserire il carattere ‘@’ come prefisso.
Per conoscere tutte le classi css messe a disposizione da Bootstrap vi rimando alla documentazione ufficiale su http://getbootstrap.com/css/ .
Vuoi approfondire le potenzialità di ASP.NET MVC?
Se vuoi approfondire le possibilità che offre ASP.NET MVC la community XeDotNet ospita un meeting Venerdì 31 Gennaio
http://www.xedotnet.org/Home/Meeting/20140131 dal nome “The future of the web”.
read full article
