MVC jQuery UI CSS URLs werden nach dem Deployment nicht aufgelöst

Question

Der Titel sagt eigentlich schon alles aus. In der jquery-ui.css definiert es Styles wie:

ui-widget-content {
border: 1px solid #aaaaaa/*{borderColorContent}*/;
background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*
color: #222222/*{fcContent}*/;
}

In der Entwicklungsumgebung funktioniert dies gut, aber sobald es ausgeliefert wird, wird die URL nicht mehr aufgelöst. Die Website ist unter dem Standard-Webstandort in IIS7 bereitgestellt. Daher sehe ich im Browserkonsole, dass es nach dem Bild unter

http:// (servername)/(appName)/Content/images/ui-bg\_glass\_75\_e6e6e6\_1x400.pngsucht anstatt von    http:// (serverName)/(appName)/content/themes/base/images...

Hier ist die Bündelkonfiguration:

bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/themes/base/jquery-ui.css",
            "~/Content/site.css"
));

Wie kann ich sicherstellen, dass diese URLs korrekt aufgelöst werden?

Answer 1

Ufuks Antwort hat mich zum Nachdenken gebracht. Das Anhängen des App-Namens an den Anfang des virtuellen Pfades des Bundles hat alle meine Styles kaputt gemacht.

Die Bundle-Funktion nimmt alle CSS-Dateien innerhalb der Include-Anweisung und minimiert sie zu einer Datei an der URL, die im virtuellen Pfad des Bundles angegeben ist. Die URLs, die in den CSS-Dateien angegeben sind, die in diesem Bundle enthalten sind, verwenden den gegebenen virtuellen Pfad des Bundles, um ihre URL zur Laufzeit aufzubauen. Dies funktioniert gut in der Entwicklung, weil die Entwicklung die Bundles nicht verwendet, sie verweist auf jede CSS-Datei einzeln/direkt.

Die Lösung bestand darin, ein Bundle mit dem richtigen virtuellen Pfad zu erstellen:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery-ui.css")):

Danke Ufuk für den Rat und die Anleitung.

Answer 2

Sie sollten den virtuellen Pfad Ihres Bundles wie folgt aktualisieren:

bundles.Add(new StyleBundle("~/appName/Content/css").Include(
            "~/Content/themes/base/jquery-ui.css",
            "~/Content/site.css"
));

Auf diese Weise starten relative URLs in Ihrer CSS-Datei von ~/appName. Beachten Sie dies, wenn Sie weitere relative URLs in der Datei site.css haben.

Answer 3

Nachdem ich meine Lösung mit dem nuGet-Paketmanager auf die neuesten jqueryui-Dateien der Version 1.11 aktualisiert hatte, wurden die css-Dateien von jqueryui nicht geladen. Also überprüfte ich die BundleConfig-Klasse nur um festzustellen, dass das jqueryui css immer noch den alten Pfad verwendet, wie:
"~/Content/themes/base/jquery.ui.theme.css"
Ich ersetzte diese durch:
"~/Content/themes/base/theme.css"
und dann lief meine Seite wieder.