Nativamente Boostrap non crea un sito con la pagina che sfrutta tutta la larghezza dello schermo, ora vedremo come fare ad ottenere questo risultato.
Basta modificare la classe del nostro container da .container:
<div class="container">
a .container-fluid:
<div class="container-fluid">
Ovviamente container-fluid essendo una classe già presente in Bootstrap il nostro sito risulta responsivo su tutti i dispositivi.
Buona programmazione!
In questo articolo spiegheremo come risolvere i problemi nell’utilizzo del Datapicker di jQuery UI all’interno dell’ambiente ASP.NET MVC (Model-View-Controller).
MVC effettua le chiamate ai vari file .js di jQuery tramite il file BundleConfig.cs, presente all’interno della direcoty “App_Start“, questa modalità, configurata di default alla creazione di un progetto ASP.NET MVC, presenta purtroppo una limitazione nell’integrazione di tutte le funzionalità offerte da jQuery e jQuery UI, utili ad esempio per l’utilizzo del Datapicker (un comodo calendario per la selezione delle date, utile soprattutto in quanto ad oggi non tutti i browser – vedi Firefox – utilizzano l’imput type date secondo gli standard HTML 5).
Se con l’aggiunta di jQuery UI tramite lo strumento NuGet offerto da Visual Studio non dovessero funzionare tutte le funzionalità di jQuery UI potete procedere in questo modo:
dalla pagina _Layout.cshtml commentare la riga
@Scripts.Render("~/bundles/jquery")
che serve a caricare i file jQuery trmite il file BundleConfig.cs.
La nostra riga apparirà di conseguenza in questo modo
@*@Scripts.Render("~/bundles/jquery")*@
Ora posizionamoci all’interno del tag <head> ed effettuiamo le chiamate ai nostri file .js emplicemente trascinandoli dall’esplora soluzioni di VisualStudio.
Otteremo cosi gli include degli script necessari al corretto funzionamento di jQuery e jQuery UI:
<script src="~/Scripts/jquery-1.12.4.js"></script> <script src="~/Scripts/jquery-ui.js"></script> <link href="~/Content/jquery-ui.css" rel="stylesheet" /> <script src="~/Scripts/datepicker-it.js"></script> @*Localizzazione per jquery ui*@
Ora possiamo utilizzare il nostro Datapicker senza problemi su tutti i browser in questo modo:
<input type="text" id="datepicker">
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</script>
Et voilà! Come per magia ora funziona tutto!
