ASP.NET MVC 5 Rendering von jQuery UI CSS-Bundle

Ich versuche, das CSS-Thema-Bundle jQuery UI in mein Projekt aufzunehmen. Ich habe alle erforderlichen Dateien in meinem ~/Content/themes Verzeichnis und einrichten meine BundleConfig.cs wie folgt:ASP.NET MVC 5 Rendering von jQuery UI CSS-Bundle

public class BundleConfig 
{ 
    // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862 
    public static void RegisterBundles(BundleCollection bundles) 
    { 
     bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
        "~/Scripts/jquery-{version}.js")); 

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

     bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
        "~/Scripts/jquery.validate*")); 

     // Use the development version of Modernizr to develop with and learn from. Then, when you're 
     // ready for production, use the build tool at http://modernizr.com to pick only the tests you need. 
     bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
        "~/Scripts/modernizr-*")); 

     bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
        "~/Scripts/bootstrap.js", 
        "~/Scripts/respond.js")); 

     bundles.Add(new StyleBundle("~/Content/css").Include(
        "~/Content/bootstrap.css", 
        "~/Content/site.css")); 

     bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
      "~/Content/themes/base/jquery.ui.core.css", 
      "~/Content/themes/base/jquery.ui.resizable.css", 
      "~/Content/themes/base/jquery.ui.selectable.css", 
      "~/Content/themes/base/jquery.ui.accordion.css", 
      "~/Content/themes/base/jquery.ui.autocomplete.css", 
      "~/Content/themes/base/jquery.ui.button.css", 
      "~/Content/themes/base/jquery.ui.dialog.css", 
      "~/Content/themes/base/jquery.ui.slider.css", 
      "~/Content/themes/base/jquery.ui.tabs.css", 
      "~/Content/themes/base/jquery.ui.datepicker.css", 
      "~/Content/themes/base/jquery.ui.progressbar.css", 
      "~/Content/themes/base/jquery.ui.theme.css"));    
    } 
}

Mein _Layout.cshtml hat folgende <head>:

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@ViewBag.Title</title> 
    <link href="//fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet" type="text/css"> 
    @Styles.Render("~/Content/themes/base/css", "~/Content/css", "~/Content/datepicker3.css") 
    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/jqueryui") 
    @Scripts.Render("~/bundles/bootstrap") 
    @Scripts.Render("~/bundles/modernizr") 
    @Scripts.Render("~/Content/bootstrap-datepicker.js") 
    @RenderSection("head", required: false) 
    <link rel="icon" href="@Url.Content("~/Content/favicon.ico")" /> 
</head>

Dies ist jedoch die HTML ist, der ausgegeben hat (Anmerkung das abwesende jQuery CSS Thema):

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title></title> 
    <link href="//fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet" type="text/css"> 
    <link href="/PackageManager/Content/bootstrap.css" rel="stylesheet"/> 
    <link href="/PackageManager/Content/site.css" rel="stylesheet"/> 
    <link href="/PackageManager/Content/datepicker3.css" rel="stylesheet"/> 
    <script src="/PackageManager/Scripts/jquery-1.10.2.js"></script> 
    <script src="/PackageManager/Scripts/jquery-ui-1.11.3.js"></script> 
    <script src="/PackageManager/Scripts/bootstrap.js"></script> 
    <script src="/PackageManager/Scripts/respond.js"></script> 
    <script src="/PackageManager/Scripts/modernizr-2.6.2.js"></script> 
    <script src="/PackageManager/Content/bootstrap-datepicker.js"></script>  
    <link rel="icon" href="/PackageManager/Content/favicon.ico" /> 
</head>

Hier ist meine Lösung Struktur:

enter image description here

Was fehlt mir?

Quelle

2015-03-03 Mark Richman

Wenn ich etwas nicht vermisse, sieht es so aus, als ob keiner Ihrer Dateien jquery.ui. vorangestellt wird, aber in Ihrem BundleConfig sind sie.

Zum Beispiel verwenden Sie jquery.ui.core.css in BundleConfig, aber die Datei in Ihrem Projektmappen-Explorer heißt core.css.

Quelle

2015-03-03 20:53:13 Sam

Das ist, was ich für die Verwendung von jemand anderen Code bekommen;) Danke! –

AUSGEZEICHNET !! Ich hatte genau das gleiche Problem und das reparierte es - Kudos @Sam bump up –

Ich fühle mich jetzt extrem dumm lol –

ASP.NET MVC 5 Rendering von jQuery UI CSS-Bundle

Antwort

Verwandte Themen