Relative Pfade und MVC-Bundling

ASP.NET MVC 4 beschert uns ein u.a. ein tolles neues Feature: Bundling&Minification. Darüber habe ich an derer Stelle bereits berichtet. Hier geht es nun um die Vermeidung eines ganz bestimmten Stolpersteines beim unbedachten Einsatz.

Problem

Mir ist da gerade was unangenehmes passiert. Ich setze jQuery Datatables ein, um Daten-Matrizen auf meiner ASP.NET-4-Seite mit AJAX usw. darzustellen. Das klappt ganz gut. Was nicht so schön war, war plötzlich folgender Fehler in der Firebug-Konsole:

Abb. 1: Fehlermeldung im Firebug

Der ausgeblendete Text ist dabei mein Root-Folder. Mit anderen Worten: Meine Seite sucht die beiden Bilder im Ordner „images“ direkt unterhalb meines Root-Folders. Dort liegen die Bildchen aber nicht. Hier meine Struktur im Visual Studio:

Abb. 2: Projektstruktur im VS

Ich habe mal hervorgehoben, was das Problem ist. In meinem Projekt befinden sich die Bilder im Order „Content/DataTables-1.9.4/media/images“ und nicht in „/images“. Logisch, dass er es nicht findet! Welcher Code teilt ihm aber diesen Schrott mit? Noch verwunderlicher: Warum funktioniert es im PageInspector wunderbar? Die Recherche beginnt.

CSS?

Mein erster Verdächtiger ist „jQuery.dataTables.css“. Schließlich wird in dieser Datei ja der Style festgelegt. Hier der interessierende Auszug:

/*
 * Sorting
 */
.sorting { background: url('../images/sort_both.png') no-repeat center right; }
.sorting_asc { background: url('../images/sort_asc.png') no-repeat center right; }
.sorting_desc { background: url('../images/sort_desc.png') no-repeat center right; }

.sorting_asc_disabled { background: url('../images/sort_asc_disabled.png') no-repeat center right; }
.sorting_desc_disabled { background: url('../images/sort_desc_disabled.png') no-repeat center right; }
 
table.dataTable thead th:active,
table.dataTable thead td:active {
	outline: none;
}

Hmmm. Eigentlich alles sauber. Ein relativer Pfad, der zunächst zurück auf „Content/DataTables-1.9.4/media“ und dann rein in „images“ weist. Sollte laufen! Tut es aber nicht.

Bundling

Nach langem Grübeln und Probieren sehe ich mir schließlich mal die Einbindung des CSS in die _Layout an und sehe folgendes:

@Styles.Render("~/Content/jqtable")

Das funktioniert, weil ich in der BundleConfig.cs folgendes definiert habe:

bundles.Add(new StyleBundle("~/Content/jqtable").Include(
            "~/Content/DataTables-1.9.4/media/css/jquery.dataTables.css"));

Pfade

Und genau in Listing 3 versteckt sich auch das Problem. Der Pfad, dem man dem StyleBundle-Konstruktor übergibt gilt nämlich zur Ausführungszeit als Ankerpfad für das Stylesheet. Was ich da also genau tue ist, das css aus seinem Ordner zu „zerren“ und unter dem Namen „jqtable“ im css-Ordner unterhalb des Root einzubinden. Jetzt macht es natürlich Sinn, dass er dann bei „../images“ im Root-Image-Ordner landet.

Lösung

Die Änderung sind eigentlich trivial:

bundles.Add(new StyleBundle("~/Content/DataTables-1.9.4/media/css/jqtable").Include(
            "~/Content/DataTables-1.9.4/media/css/jquery.dataTables.css"));

und

@Styles.Render("~/Content/DataTables-1.9.4/media/css/jqtable")

Das wars auch schon! Nun wird das Bundle „jqtable“ an der richtigen Ordner-Struktur eingebunden und damit stimmen auch die darin enthaltenen relativen Pfade wieder.

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.