Skip to content

Script and style bundles

Steffen Habermehl edited this page Mar 23, 2017 · 9 revisions

This topic contains information for traditional project types (.csproj/Web.config). You can find information for the new ASP.NET Core based project types (.xproj, project.json) here.

Overview

The Backload Nuget package adds client side script and style bundles to the Backload.Core package. The bundles are registered in "~/Backload/Bundles/BackloadBundles.cs". The RegisterBundles method is called from the global RegisterBundles method in "~/App_Start/BundleConfig.cs" with the call BackloadBundles.RegisterBundl(bundles); Bundles are based on the main themes and have the following virtual naming schema: ~/backload/[vendor]/[plugin] for scripts and ~/backload/[vendor]/[plugin]/css for styles.

Note: The license for the server side Backload component does not include a license for the client side plugins. Please read the license terms of the plugin you want to use in your project (Licenses: jQuery File Upload Plugin, PlUpload, Fine Uploader).

 

Bundles

JQuery File Upload Plugin

Basic Theme

Name: "~/backload/blueimp/bootstrap/Basic" ("~/backload/blueimp/bootstrap/Basic/css")
Razor: @System.Web.Optimization.Scripts.Render("~/backload/blueimp/bootstrap/Basic")
ASPX: <%= System.Web.Optimization.Scripts.Render("~/backload/blueimp/bootstrap/Basic") %>
Demo: JQuery File Upload Plugin - Basic Theme
Substitutes:

 <html>
     <head>
         ...
         <link href="~/Backload/Client/blueimp/fileupload/css/jquery.fileupload.css" rel="stylesheet" />
     </head>
     <body>
         ...
         <script src="~/Backload/Client/blueimp/fileupload/js/vendor/jquery.ui.widget.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.iframe-transport.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/themes/jquery.fileupload-themes.js"></script>
     </body>
 </html>

 

Basic Plus Theme

Name: "~/backload/blueimp/bootstrap/BasicPlus" ("~/backload/blueimp/bootstrap/BasicPlus/css")
Razor: @System.Web.Optimization.Scripts.Render("~/backload/blueimp/bootstrap/BasicPlus")
ASPX: <%= System.Web.Optimization.Scripts.Render("~/backload/blueimp/bootstrap/BasicPlus") %>
Demo: JQuery File Upload Plugin - Basic Plus Theme
Substitutes:

 <html>
     <head>
         ...
         <link href="~/Backload/Client/blueimp/fileupload/css/jquery.fileupload.css" rel="stylesheet" />
     </head>
     <body>
         ...
         <script src="~/Backload/Client/blueimp/loadimage/js/load-image.all.min.js"></script>
         <script src="~/Backload/Client/blueimp/blob/js/canvas-to-blob.min.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/vendor/jquery.ui.widget.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.iframe-transport.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload-process.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload-image.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload-audio.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload-video.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload-validate.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/themes/jquery.fileupload-themes.js"></script>
     </body>
 </html>

 

Basic Plus UI Theme

Name: "~/backload/blueimp/bootstrap/BasicPlusUI" ("~/backload/blueimp/bootstrap/BasicPlusUI/css")
Razor: @System.Web.Optimization.Scripts.Render("~/backload/blueimp/bootstrap/BasicPlusUI")
ASPX: <%= System.Web.Optimization.Scripts.Render("~/backload/blueimp/bootstrap/BasicPlusUI") %>
Demo: JQuery File Upload Plugin Basic Plus UI Theme
Substitutes:

 <html>
     <head>
         ...
         <link href="~/Backload/Client/blueimp/gallery/css/blueimp-gallery.min.css" rel="stylesheet" />
         <link href="~/Backload/Client/blueimp/fileupload/css/jquery.fileupload.css" rel="stylesheet" />
         <link href="~/Backload/Client/blueimp/fileupload/css/jquery.fileupload-ui.css" rel="stylesheet" />
     </head>
     <body>
         ...
         <script src="~/Backload/Client/blueimp/templates/js/tmpl.min.js"></script>
         <script src="~/Backload/Client/blueimp/loadimage/js/load-image.all.min.js"></script>
         <script src="~/Backload/Client/blueimp/blob/js/canvas-to-blob.min.js"></script>
         <script src="~/Backload/Client/blueimp/gallery/js/blueimp-gallery.min.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/vendor/jquery.ui.widget.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.iframe-transport.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload-process.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload-image.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload-audio.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload-video.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload-validate.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload-ui.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/themes/jquery.fileupload-themes.js"></script>
     </body>
 </html>

 

AngularJS Theme

Name: "~/backload/blueimp/angularjs" ("~/backload/blueimp/angularjs/css")
Razor: @System.Web.Optimization.Scripts.Render("~/backload/blueimp/angularjs")
ASPX: <%= System.Web.Optimization.Scripts.Render("~/backload/blueimp/angularjs") %>
Demo: JQuery File Upload Plugin AngularJS Theme
Substitutes:

 <html>
     <head>
         ...
         <link href="~/Backload/Client/blueimp/gallery/css/blueimp-gallery.min.css" rel="stylesheet" />
         <link href="~/Backload/Client/blueimp/fileupload/css/jquery.fileupload.css" rel="stylesheet" />
         <link href="~/Backload/Client/blueimp/fileupload/css/jquery.fileupload-ui.css" rel="stylesheet" />
     </head>
     <body>
         ...
         <script src="~/Backload/Client/blueimp/loadimage/js/load-image.all.min.js"></script>
         <script src="~/Backload/Client/blueimp/blob/js/canvas-to-blob.min.js"></script>
         <script src="~/Backload/Client/blueimp/gallery/js/blueimp-gallery.min.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/vendor/jquery.ui.widget.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.iframe-transport.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload-process.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload-image.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload-audio.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload-video.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload-validate.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload-angular.js"></script>
     </body>
 </html>

 

JQuery UI Theme

Name: "~/backload/blueimp/bootstrap/jqueryui" ("~/backload/blueimp/bootstrap/jqueryui/css")
Razor: @System.Web.Optimization.Scripts.Render("~/backload/blueimp/bootstrap/jqueryui")
ASPX: <%= System.Web.Optimization.Scripts.Render("~/backload/blueimp/bootstrap/jqueryui") %>
Demo: JQuery File Upload Plugin - jQuery UI Theme
Substitutes:

 <html>
     <head>
         ...
         <link href="~/Backload/Client/blueimp/gallery/css/blueimp-gallery.min.css" rel="stylesheet" />
         <link href="~/Backload/Client/blueimp/fileupload/css/jquery.fileupload.css" rel="stylesheet" />
         <link href="~/Backload/Client/blueimp/fileupload/css/jquery.fileupload-ui.css" rel="stylesheet" />
     </head>
     <body>
         ...
         <script src="~/Backload/Client/blueimp/templates/js/tmpl.min.js"></script>
         <script src="~/Backload/Client/blueimp/loadimage/js/load-image.all.min.js"></script>
         <script src="~/Backload/Client/blueimp/blob/js/canvas-to-blob.min.js"></script>
         <script src="~/Backload/Client/blueimp/gallery/js/blueimp-gallery.min.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.iframe-transport.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload-process.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload-image.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload-audio.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload-video.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload-validate.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload-ui.js"></script>
         <script src="~/Backload/Client/blueimp/fileupload/js/jquery.fileupload-jquery-ui.js"></script>
     </body>
 </html>

 

Fine Uploader

Simple and Default Theme

Name: "~/backload/widen/fineuploader/simple" ("~/backload/widen/fineuploader/simple/css")
Razor: @System.Web.Optimization.Scripts.Render("~/backload/widen/fineuploader/simple")
ASPX: <%= System.Web.Optimization.Scripts.Render("~/backload/widen/fineuploader/simple") %>
Demo: Fine Uploader Plugin - Simple Theme
Substitutes:

 <html>
     <head>
         ...
         <link href="~/Backload/Client/widen/fineuploader/fine-uploader-new.min.css" rel="stylesheet" />
     </head>
     <body>
         ...
         <script src="~/Backload/Client/widen/fineuploader/js/fine-uploader.min.js"></script>
     </body>
 </html>

 

Gallery Theme

Name: "~/backload/widen/fineuploader/gallery" ("~/backload/widen/fineuploader/gallery/css")
Razor: @System.Web.Optimization.Scripts.Render("~/backload/widen/fineuploader/gallery")
ASPX: <%= System.Web.Optimization.Scripts.Render("~/backload/widen/fineuploader/gallery") %>
Demo: Fine Uploader Plugin - Gallery Theme
Substitutes:

<html>
     <head>
         ...
         <link href="~/Backload/Client/widen/fineuploader/fine-uploader-gallery.min.css" rel="stylesheet" />
         <link href="~/Backload/Client/widen/fineuploader/fine-uploader-new.min.css" rel="stylesheet" />
     </head>
     <body>
         ...
         <script src="~/Backload/Client/widen/fineuploader/js/fine-uploader.min.js"></script>
     </body>
 </html>

 

PlUpload

Simple Theme

Name: "~/backload/moxie/plupload/simple" ("~/backload/moxie/plupload/simple/css")
Razor: @System.Web.Optimization.Scripts.Render("~/backload/moxie/plupload/simple")
ASPX: <%= System.Web.Optimization.Scripts.Render("~/backload/moxie/plupload/simple") %>
Demo: PlUpload Plugin - Simple Theme
Substitutes:

 <html>
     <head>
         ...
     </head>
     <body>
         ...
         <script src="~/Backload/Client/moxie/plupload/js/plupload.full.min.js"></script>
     </body>
 </html>

 

UI Theme

Name: "~/backload/moxie/plupload/ui" ("~/backload/moxie/plupload/ui/css")
Razor: @System.Web.Optimization.Scripts.Render("~/backload/moxie/plupload/ui")
ASPX: <%= System.Web.Optimization.Scripts.Render("~/backload/moxie/plupload/ui") %>
Demo: PlUpload Plugin - UI Theme
Substitutes:

 <html>
     <head>
         ...
         <link href="~/Backload/Client/moxie/plupload/js/jquery.ui.plupload/css/jquery.ui.plupload.css" rel="stylesheet" />
     </head>
     <body>
         ...
         <script src="~/Backload/Client/moxie/plupload/js/plupload.full.min.js"></script>
         <script src="~/Backload/Client/moxie/plupload/js/jquery.ui.plupload/jquery.ui.plupload.min.js"></script>
     </body>
 </html>

 

You can’t perform that action at this time.