2015-10-30 6 views
5

Obwohl Bündelung ist eine nette Funktion von VS, manchmal möchte ich ein Skript oder CSS für eine bestimmte Seite zur Verfügung stehen. Auf diese Weise kann ich sicherstellen, dass Namenskonflikte und/oder Überschreibungen vermieden werden.Ist es möglich, Skripte und Stile pro Seite zu bündeln

Ist es möglich, Dateien so zu bündeln, dass nur globale und seitenspezifische Dateien verfügbar sind?

So zum Beispiel sagen, ich habe eine Seite namens Cabinet.cshtml. Und ich habe auch Cabinet.js und Cabinet.css Dateien. Auf der anderen Seite habe ich eine andere Seite namens AdminPanle.cshtml mit den Dateien admin.js und admin.css.

Jetzt möchte ich, dass diese beiden Ansichten Zugriff nur auf ihre entsprechenden Dateien und auch jQuery und jQuery ui haben. Also muss jQuery global sein.

+1

Sie können jederzeit Ihre eigenen Bundles erstellen - 'neuer Scriptbundle (" ~/bundles/cabinet ")' usw., die 'jquery',' jquery-ui' und 'cabinet' enthalten und' 'Scripts.Render (" ~/bundles/cabinet ")' aus Ihrer Sicht enthalten. Oder erstellen Sie einfach nur das Paket mit 'cabinet' und Sie haben das Hauptpaket in Ihrem Layout und das spezifische Paket auf Ihrer Seite. –

+0

Oh, das ist großartig. Wenn Sie '@ Scripts.Render (" ~/bundles/cabinet ")' in nur der Datei Cabinet.cshtml haben, wird das Problem gelöst. Danke Stephen. –

Antwort

12

Also, was ist das Problem? Standardmäßig in Ihrem BundleConfig.cs Sie haben:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
        "~/Scripts/jquery-{version}.js")); 

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
        "~/Scripts/jquery-ui-{version}.js")); 

so dass diese Bündel setzen im Kopf Ihrer _Layout.cshtml:

@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/jqueryui") 

Und erstellen 4 weitere Bundles:

//scripts 
bundles.Add(new ScriptBundle("~/bundles/cabinet").Include(
        "~/Scripts/Cabinet.js")); 
bundles.Add(new ScriptBundle("~/bundles/admin").Include(
        "~/Scripts/admin.js")); 
//styles 
bundles.Add(new StyleBundle("~/Content/cabinet").Include("~/Content/Cabinet.css")); 
bundles.Add(new StyleBundle("~/Content/admin").Include("~/Content/admin.css")); 

Jetzt können Sie trennen diese Skripte und Stile und fügen Sie sie nur auf der Seite hinzu, die Sie benötigen.

Auch ich denke, es ist gut, 2 Abschnitte in Ihrem _Layout.cshtml in head Tag zu definieren.

<head> 
    //other scripts and styles here 
    @RenderSection("scriptslib", required: false) 
    @RenderSection("csslib", required: false) 
</head> 

So, jetzt in Ihren Ansichten (Cabinet.cshtml und AdminPanle.cshtml) Sie Libs platzieren können, wo sie so sein annehmen:

@section scriptslib{ 
    @Scripts.Render("~/bundles/cabinet") 
    } 
+0

Was ich vermisst habe, war, dass ich vergessen habe, dass ich sie auf bestimmten Seiten separat rendern könnte. –

+0

Ich habe auch RenderSection total vergessen! lol – zerohero