2016-05-09 8 views
1

Ich versuche, mein ASP.NET MVC-Projekt für die Verwendung der JQuery-Benutzeroberfläche bereit zu machen, und habe den Blogpost here verwendet.Wo sind die Bundles für jQuery UI CSS und Scripts und wie genau heißen sie?

folgte ich den expliziten Schritte, aber nicht wissen, über diese:

„... sind die Pakete auch für jQuery UI CSS und Scripts“

Genau das, was die „Bündel sind für jQuery UI CSS und Skripte "?

Dies ist, was ich getan habe:

  1. NuGot die Referenzen ("jQuery UI (Combined Library)")

  2. hat dieses Bild auf den Boden des BundleConfig.cs:

    bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
    "~/Scripts/jquery-ui-{version}.js")); 
    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")); 
    
  3. Changed _Layout.cshtml von dieser:

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@ViewBag.Title - Platypus</title> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
    
    <script type="text/javascript"> 
        var appInsights=window.appInsights||function(config){ 
         function r(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o="script",s=u.createElement(o),i,f;for(s.src=config.url||"//az416426.vo.msecnd.net/scripts/a/ai.0.js",u.getElementsByTagName(o)[0].parentNode.appendChild(s),t.cookie=u.cookie,t.queue=[],i=["Event","Exception","Metric","PageView","Trace","Ajax"];i.length;)r("track"+i.pop());return r("setAuthenticatedUserContext"),r("clearAuthenticatedUserContext"),config.disableExceptionTracking||(i="onerror",r("_"+i),f=e[i],e[i]=function(config,r,u,e,o){var s=f&&f(config,r,u,e,o);return s!==!0&&t["_"+i](config,r,u,e,o),s}),t 
        }({ 
         instrumentationKey:"6fc2e00b-8657-47e9-841c-e033cbac3789" 
        }); 
    
        window.appInsights=appInsights; 
        appInsights.trackPageView(); 
    </script> 
    

    @RenderBody()

    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
    @RenderSection("scripts", required: false) 
    

... dazu:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@ViewBag.Title - Platypus</title> 
    @Scripts.Render("~/bundles/jquery") 
    @Styles.Render("~/Content/css") 
    @Styles.Render("~/Content/themes/base/css") 
    @Scripts.Render("~/bundles/modernizr") 
    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
    @Scripts.Render("~/bundles/jqueryui") 
    @Scripts.Render("~/bundles/modernizr") 

    <script type="text/javascript"> 
     var appInsights=window.appInsights||function(config){ 
      function r(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o="script",s=u.createElement(o),i,f;for(s.src=config.url||"//az416426.vo.msecnd.net/scripts/a/ai.0.js",u.getElementsByTagName(o)[0].parentNode.appendChild(s),t.cookie=u.cookie,t.queue=[],i=["Event","Exception","Metric","PageView","Trace","Ajax"];i.length;)r("track"+i.pop());return r("setAuthenticatedUserContext"),r("clearAuthenticatedUserContext"),config.disableExceptionTracking||(i="onerror",r("_"+i),f=e[i],e[i]=function(config,r,u,e,o){var s=f&&f(config,r,u,e,o);return s!==!0&&t["_"+i](config,r,u,e,o),s}),t 
     }({ 
      instrumentationKey:"6fc2e00b-8657-47e9-841c-e033cbac3789" 
     }); 

     window.appInsights=appInsights; 
     appInsights.trackPageView(); 
    </script> 
</head> 
<body> 
    <div class="container body-content"> 
     @RenderBody() 
    </div> 

    @*@Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap")*@ 
    @RenderSection("scripts", required: false) 
</body> 
</html> 

Das Projekt läuft noch, und die Seite sieht gleich aus (Der erste Teil war etwas unexpekt Allerdings war der zweite Teil zu erwarten, da ich noch keinen jQuery-UI-spezifischen Code hinzugefügt habe), aber ich befürchte, dass ich "... auch die Bundles für jQuery einschließen würde UI CSS und Scripts "wird mich am Ende in den Esel beißen, aber ich weiß nicht, was/wo sie sind (wie sie heißen).

Antwort

1

Sie haben die jQuery-Skript und CSS-Bundles enthalten. Die Zeilen, die Sie zu BundleConfig.cs hinzugefügt haben, haben zwei Bundles erstellt. Eine ScriptBundle mit der Ressource Speicherort (Name) "~/Bundles/jqueryui", die das jQuery UI-Skript enthält, die andere eine StyleBundle mit der Ressource Speicherort (Name) "~/Inhalt/themes/base/css", die alle enthält jQuery UI CSS-Dateien.

Die Linien:

@Styles.Render("~/Content/themes/base/css") 

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

Tells Rasiermesser entweder Ausgang der gebündelten (verketteten) Inhalt der Dateien, die in den jeweiligen Bündeln als script enthalten ist, oder einen script-Tag mit einem src, die an einen Ort verbinden Ihr Server, auf dem das Asp.Net MVC-System eine Datei mit den Inhalten der im Paket enthaltenen Dateien bereitstellt.

Im Debug-Modus werden standardmäßig Javascript-Bundles als einzelne nicht-minimierte Dateien zur einfacheren Skript-Fehlerbehebung bereitgestellt. Im Produktionsmodus verkettet und verkleinert es die Skripte in eine einzige Javascript-Datei, um das Debuggen zu erleichtern.