JavaScript, IntelliSense und ASP.NET MVC-Sections

Ein kleines Ärgernis kommt einher mit der eigentlich gut gemeinten Funktion der Section. Sie zu nutzen ist in vielen Fällen unabdingbar und trotzdem nervig, weil die Code-Formatierung, IntelliSense usw. nicht mehr wie gewohnt arbeiten. codingfreaks zeigt eine Möglichkeit, das Problem zu umgehen.

Worum gehts eigentlich?

Einer der Faktoren, der die Nutzung von ASP.NET MVC so elegant machen (zumindest aus Programmierer-Sicht) ist das Konzept der Layout-Page. Man definiert ja eigentlich eine Art Schablone und definiert darauf Bereiche, die später durch Detail-Seiten gefüllt werden. Ein Beispiel:

        <!-- ... -->     
        </footer>
        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>

Sehen wir uns mal Zeile 4 genauer an. An dieser Stelle wird ja letztlich nur folgendes definiert: Wenn eine Seite, die diese Layout-Page nutzt eine Section namens „scripts“ definiert, was sie nicht muss (required: false), dann würde der gesamte Inhalt der Section hier gerendert werden.

Das ist interessant im Zusammenhang mit der Zeile 3 in Listing 1. Dort wird bereits jQuery eingebunden, sodass also alle JavaScript-Definitionen, die später in der Section eingebunden werden sich darauf verlassen können, dass jQuery bereits verfügbar ist.

Das ganze würde dann z.B. im View Home/Index.cshtml ungefähr so aussehen:

@section scripts
{
    alert($('#someElement').attr('id');
}

Das Problem

So weit, so gut. Nun passen wir Listing 1 aber etwas an:

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
<script type="text/javascript">
    $(function() {
        @RenderSection("docready", required: false)
    });
</script>

Was haben wir nun? Eine weitere Section, die jeder View nutzen kann. Der Vorteil ist nun, dass wir innerhalb der Section davon ausgehen können, dass der Code per jQuery automatisch ausgeführt wird, wenn das Dokument fertig gerendert ist.

Das ist cool, denken wir und passen Index.cshtml an:

@section docready
{
    alert('Das Dokument ist fertig!');
}

Führen wir nun das Projekt aus, sollte bei Aufruf der Startseite die JS-MessageBox erscheinen:

Abb. 1: Message erscheint
Abb. 1: Message erscheint

Das Ziel ist also erreicht, doch wir haben ein Problem. Wenn wir uns den Quellcode der Index.cshtml im VS-Editor ansehen, dann sehen wir folgendes:
Abb. 2: Keine Code-Erkennung in Section
Abb. 2: Keine Code-Erkennung in Section

Der VS-Editor erkennt nicht, dass es sich bei unserer Zeile 48 um JavaScript handelt. An dieser Stelle untersucht VS leider nicht, wo in der Layout-Page die Section eingebunden wäre und sieht dementsprechend auch nicht, dass davor ein <script/>-Tag ist.

Mit anderen Worten: Wir verlieren den ganzen schönen Visual-Studio-Kram, wie IntelliSense und Syntax-Highlighting, wenn wir Sections so einsetzen.

Die Lösung

Die Lösung ist denkbar einfach. Wir verschieben unsere Script-Logik in eine mit einem <script/> eingeschlossene Funktion und rufen in der Section nur noch die Funktion selbst auf:

<script type="text/javascript">
    function OnDocReady() {
        alert('Das Dokument ist fertig!');
    }   
 </script>
@section docready
{
    OnDocReady();
}

Sehen wir uns nun den Quelltext im VS an, ist alles wieder so, wie man es will:

Abb. 3: Alles wieder gut
Abb. 3: Alles wieder gut

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.