Scripte und Stylesheets in Views einbinden

JavaScript

JavaScript sollte in die Views nicht direkt eingebunden werden wie im folgenden Beispiel, da z.B. das Scriptdebuggen von Scriptcode direkt in der View nicht unterstützt wird:

@section Scripts {
    @* Achtung: JavaScripte sollten immer in einer separaten .js Date definiert werden, die mittels 
       Bundel- Konfiguration (Ordner App_Start\BundelConfig) in eine View eingebunden werden.
       Sonst funktioniert z.B. das Scriptdebugging in VisualStudio nicht ! *@
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")   
    <script>
        // Hier wird auf dem DOM mittels jQuery eine Operation ausgeführt, welche bewirkt,
        // das alle title- Attribute als Tooltips dienen
        // Achtung: in Visual Studio nicht debuggbar, da nicht über Bundel- config eingebunden (siehe oben)
        jQuery( document ).tooltip();
    </script> 
}

Stattdessen ist das Script in eine .js- Datei auszulagern, die im Scriptordner abgelegt wird. Das Script wird dann mittel @Script.Render("Url ") in die View eingebunden:

@section Scripts {
    @Scripts.Render("~/bundles/Stat")
}

Beispiele

→ ASP.MVC\MVC.Intro\8. Diagramme im Browser: JQPlot und Datenabruf mittels Ajax
→ ASP.MVC\MVC.Intro\9. Upload eines Bildes für einen Himmelskörper (HTML 5 File API)
→ CanvasScriptServer

Scriptbundles

Das Laden vieler kleiner Scripte erfordert für jedes Script einen Request/Response. Jeder Request/Response hat einen Overhead, der sich beim Laden vieler kleiner Scripte zu einem bedeutenden Anteil an der gesamten Ladezeit summiert. Das Laden vieler kleiner Scripte ist somit ineffizient.

Ein weiteres Problem ist die Reihenfolge, in der Scripte geladen werden. Wird zuerst ein Script geladen, welches zur Ausführung Funktionen und Objekte benötigt, die erst in späteren geladenen Scripten enthalten sind, dann kommt es zu einem Laufzeitfehler.

Die Lösung der Probleme ist simpel: man kopiere alle benötigten Scripte in der richtigen Reihenfolge in eine große Datei.

In ASP.NET MVC wird dies automatisiert. Im Ordner App_Start befindet sich die BundleConfig.cs. Hier werden Funkmtionen konfiguriert, die das Zusammenkopieren der Scriptdateien durchführen.