2013年12月2日 星期一

使用ScriptManager管理Script

 

Tool:Visual Studio 2013 Ultimate
OS:Windows Server 2012
.NET Framework : 4.5.1

 

這是自ASP.NET4.5版就新增的新功能,在ASP.NET Web Forms網站之中,可以利用ScriptManager來管理JavaScript,例如jQuery,讓引用更方便。

  • 建立一個Web Site

image

  • 使用NuGet下載jQuery,目前版本2.0.3

image

  • 加入Global Application Class

image

  • Add Code:

void Application_Start ( object sender , EventArgs e ) {
    // Code that runs on application startup
    ScriptManager.ScriptResourceMapping.AddDefinition (
           "jquery" ,
           new ScriptResourceDefinition {
               Path = "~/Scripts/jquery-2.0.3.min.js" ,
               DebugPath = "~/Scripts/jquery-2.0.3.js" ,
           } );
}

  • 加入ASPX

image

  • 加入ScriptManager,引用jQuery,後續就可以直接使用jQuey程式碼。若web.config中設定debug為true,則下載jquery-2.0.3.js,若設定debug為false,則下載jquery-2.0.3.min.js

 

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Name="jquery" />
            </Scripts>
        </asp:ScriptManager>

       
    </div>
    </form>
    <script>
       $(function () {
           alert('Hello from jQuery');
       });

    </script>
</body>
</html>

  • 使用Chrome Browser Test,一執行ASPX就會執行jQuery 程式碼,按F12開啟Chrome除錯工具,檢視,下載的是min版本,因debug設為false

image

  • 將debug設為true,則重新refresh,下載的是除錯版

image

  • 改用CDN,修改global.asax,加入CdnPath與CdnDebugPath:

void Application_Start ( object sender , EventArgs e ) {
       // Code that runs on application startup
       ScriptManager.ScriptResourceMapping.AddDefinition (
              "jquery" ,
              new ScriptResourceDefinition {
                  Path = "~/Scripts/jquery-2.0.3.min.js" ,
                  DebugPath = "~/Scripts/jquery-2.0.3.js" ,
                  CdnPath = http://code.jquery.com/jquery-2.0.3.min.js,
                  CdnDebugPath =
http://code.jquery.com/jquery-2.0.3.js
                
              } );
   }

  • ScriptManager啟用CDN,EnableCdn="true"

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnableCdn="true">
            <Scripts>
                <asp:ScriptReference Name="jquery" />
            </Scripts>
        </asp:ScriptManager>
       
    </div>
    </form>
    <script>
       $(function () {
           alert('Hello from jQuery');
       });
    </script>
</body>
</html>

  • 重新執行網頁,檔案便從CDN下載,

image

  • 若CDN上的Script無法下載下來,想要改用本機的script時,可以使用LoadSuccessExpression 設定一個運算式(Expression),用來偵測CDN上的JavaScript是否成功下載,例如修改global.asax,設定錯誤的CDN路徑,並加上判斷式


void Application_Start ( object sender , EventArgs e ) {
    // Code that runs on application startup
    ScriptManager.ScriptResourceMapping.AddDefinition (
           "jquery" ,
           new ScriptResourceDefinition {
               Path = "~/Scripts/jquery-2.0.3.min.js" ,
               DebugPath = "~/Scripts/jquery-2.0.3.js" ,
               CdnPath = "http://code.jquery.com/jquery-2.0.3.minxxx.js" ,
               CdnDebugPath = "
http://code.jquery.com/jquery-2.0.3xxx.js",
               LoadSuccessExpression="typeof(window.jQuery) !== 'undefined'"
             
           } );
}

  • 執行時,CDN下載錯誤,則自動從Script下載

image

沒有留言:

總瀏覽量