如何在 ASP.NET MVC 4 使用 CDN上的 java script 和 css

一般在 app_start的 BundleClass 會如下的程式碼，以讀取自己下載下來的 java script & css

 bundles.Add(new StyleBundle("~/Content/sweetalsertforbs_css").Include(
                       "~/Content/sweet-alert.css"
                       ));

 bundles.Add(new ScriptBundle("~/bundles/sweetalsertforbs_js").Include(
                       "~/Scripts/sweet-alert.js"));

如果 ASP.NET MVC要用 CDN上的資源呢，可以參考如下的作法

// BundleTable.EnableOptimizations = true;  表示在 debug mode也要使用 cnd的資源
 BundleTable.EnableOptimizations = true;

//bundles.UseCdn = true;  要存取 cdn的資源
 bundles.UseCdn = true;

//要加上 CDN的來源，一般如果 release mode使用 CDN，debug mode就使用 local的
 bundles.Add(new StyleBundle("~/Content/sweetalsertforbs_css", "//cdn.jsdelivr.net/sweetalert/0.1.2/sweet-alert.min.css").Include(
                       "~/Content/sweet-alert.css"
                       ));

bundles.Add(new ScriptBundle("~/bundles/sweetalsertforbs_js", "//cdn.jsdelivr.net/sweetalert/0.1.2/sweet-alert.min.js").Include(
                       "~/Scripts/sweet-alert.js"));

jsDeliver

參考文件

MVC 4 Part 4 - Bundles and Optimisation

jQuery getJSON()

AJAX 方面學習，今天有看到一些可以學習的的部份

jQuery.getJSON()  ,  .appendTo()

Getting Started with ASP.NET Web API 2

原本寫法

$.getJSON( "ajax/test.json", function( data ) {



  var items = [];



  $.each( data, function( key, val ) {



     items.push( "<li id='" + key + "'>" + val + "</li>" );



  });



  $( "<ul/>", {



    "class": "my-new-list",



     html: items.join( "" )



  }).appendTo( "body" );



});

1.5以後的版本可以寫成如，可用 .done來作後續 data成功回傳的動作

$(document).ready(function () {
    // Send an AJAX request
    $.getJSON(apiUrl)
        .done(function (data) {
            // On success, 'data' contains a list of products.
            $.each(data, function (key, item) {
                // Add a list item for the product.
                $('<li>', { text: formatItem(item) }).appendTo($('#products'));
            });
        });
});

var jqxhr = $.getJSON( "example.json", function() {



  console.log( "success" );



}).done(function() {



    console.log( "second success" );



}).fail(function() {



    console.log( "error" );



}).always(function() {



    console.log( "complete" );



});



jqxhr.complete(function() {



  console.log( "second complete" );



});

SweetAlert for Bootstrap - A beautiful replacement for JavaScript's "alert"

連結
SweetAlert 官網
document.querySelector()說明

先把 js, css 加入後，再 javascript 程式碼加上如下程式碼， .sweet-1是指在某個 html元件宣告 class內的名稱，如 button class="btn btn-lg btn-success sweet-1" ，這樣就可以使用 SweetAlert的美麗彈出視窗了

document.querySelector('.sweet-1').onclick = function(){ swal("Here's a message!"); };