Jquery Mobile in ASP.NET Webforms einbinden

Eigentlich ist es ganz einfach. Per nuget das JQM Paket in das Visual Studio Projekt laden und dann per Drag&Drop aus dem Content und Scripts Folder drei Dateien inkludieren.

   1:  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   2:      <title></title>
   3:      <link href="Content/jquery.mobile-1.3.0.css" rel="stylesheet" />
   4:      <script src="Scripts/jquery-2.1.0.js"></script>
   5:      <script src="Scripts/jquery.mobile-1.4.0.js"></script>
   6:  </head>
   7:  <body>

Geht- lässt aber ein paar Chancen ungenutzt. Stichwort Bundling und Minification. Bei Betrachtung des Script Ordner fallen die .min Dateien auf. Diese sind ohne Zeilenumbrüche und Kommentare. Werkzeuge wie Web Essentials können die automatisch erzeugen. Die übertragene Datenmenge sinkt, die Seiten werden schneller. Mit gleicher Zielsetzung kann man die Anzahl der HTTP Requests reduzieren, durch Bundling.

CSS Dateien werden in der Datei Bundle.config zusammengefasst.

   1:  <?xml version="1.0" encoding="utf-8" ?>
   2:  <bundles version="1.0">
   3:    <styleBundle path="~/Content/css">
   4:      <include path="~/Content/bootstrap.css" />
   5:      <include path="~/Content/Site.css" />
   6:      <include path="~/Content/jquery.mobile-1.4.0.css" />
   7:   
   8:    </styleBundle>
   9:  </bundles>

 

JavaScript Dateien werden zu Paketen geschnürt in der Datei BundleConfig.vb. Da bei JavaScript die Reihenfolge wichtig ist, müssen unter Umständen mehrere Bundles definiert werden, Einige wie Jquery sind auch schon vordefiniert. Hier wird nun ein neues Bundle für JQM angelegt, das im Debug Fall den schönen und zur Laufzeit den kleinen JS Code ausliefert.

   1:  ScriptManager.ScriptResourceMapping.AddDefinition("jquerymobile", 
New ScriptResourceDefinition() With {
   2:                .Path = "~/Scripts/jquery.mobile-1.4.0.min.js",
   3:                .DebugPath = "~/Scripts/jquery.mobile-1.4.0.js"})
   4:          BundleTable.EnableOptimizations = True 'nur css

Zusammengeführt wird dies über den ASP.NET ScriptManager. In der  Zeile 18 wird das neu definierte Bundle geladen.

   1:    <asp:ScriptManager runat="server">
   2:              <Scripts>
   3:                  <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
   4:                  <%--Framework Scripts--%>
   5:                  <asp:ScriptReference Name="MsAjaxBundle" />
   6:                  <asp:ScriptReference Name="jquery" />
   7:                  <asp:ScriptReference Name="bootstrap" />
   8:                  <asp:ScriptReference Name="respond" />
   9:                  <asp:ScriptReference Name="WebForms.js"
  10:                  <asp:ScriptReference Name="WebUIValidation.js"
  11:                  <asp:ScriptReference Name="MenuStandards.js" ..
  12:                  <asp:ScriptReference Name="GridView.js"
  13:                  <asp:ScriptReference Name="DetailsView.js"
  14:                  <asp:ScriptReference Name="TreeView.js"
  15:                  <asp:ScriptReference Name="WebParts.js"
  16:                  <asp:ScriptReference Name="Focus.js"
  17:                  <asp:ScriptReference Name="WebFormsBundle" />
  18:                  <asp:ScriptReference Name="jquerymobile" />
  19:                  <%--Site Scripts--%>

 

Im Fiddler HTTP Trace erkennt man das die drei CSS Dateien zusammen gefasst wurden und (web.config debug=false) die minified JS varianten ausgeliefert wurden.

image

Kommentare sind geschlossen