2015-03-03 12 views
7

Sto cercando di includere il pacchetto di temi CSS jQuery UI nel mio progetto. Ho tutti i file necessari nella mia directory ~/Content/themes, e impostare il mio BundleConfig.cs come segue:ASP.NET MVC 5 non rendering jQuery UI Pacchetto CSS

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"));    
    } 
} 

mio _Layout.cshtml ha la seguente <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> 

Tuttavia, questo è il codice HTML che viene emessa (nota gli assenti jQuery CSS tema):

<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> 

Ecco la mia struttura in soluzione:

0.123.

enter image description here

Cosa mi manca?

risposta

24

A meno che non manchi qualcosa, sembra che nessuno dei tuoi file abbia il prefisso jquery.ui., ma nel tuo BundleConfig lo sono.

Ad esempio, si utilizza jquery.ui.core.css in BundleConfig, ma il file in Solution Explorer è denominato core.css.

+0

Questo è quello che ottengo per l'utilizzo del codice di qualcun altro;) Grazie! –

+0

ECCELLENTE !! Stavo avendo lo stesso identico problema e questo lo aggiustò - kudos @Sam urtò su –

+0

Mi sento estremamente stupido in questo momento lol –

Problemi correlati