video.js 6要使用 flash播放影片的方式

使用 video.js 的好處是他會自動判斷瀏覽器是否支援 html 5播放，如果沒有，可以用舊的方式，也就是 Flash player方式。

在 video.js 5, video.js 6版時，作法已經不一樣了，在 6的版本，已經變成 plugin的方式，也就是獨立變成一個 videojs-flash.js, 可至 videojs-flash github上下載，參考網站上的使用方式即可

錯誤訊息： videojs:1 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED)

使用 videojs with dash.js and video-dash.js ，之前有使用 viedojs來播放 mp4的影片，但最近發現出現 CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED的錯誤，使用 IE, Firefox, Chrome都不行，所以先試著把相關 javascript libaray更新到最新版，沒想到就可以了，如果有碰到這種情況的話，可以試試

mongoDB .Net Driver 使用 MapReduce

目前有一個需求，在 mongoDB的一個 collection，有一個屬性 created_date記錄資料建立時的日期，我希望利用這個屬性，以30天為一個單位找出每個間隔日期，在關連式資料庫會使用如下 SQL來完成需求：

SELECT CONVERT(varchar(10), DATEADD(d, (datediff(d,GETDATE(),created_date) /30)*30,GETDATE()),111)
 FROM [DATA].[dbo].[expense]
 group by CONVERT(varchar(10), DATEADD(d, (datediff(d,GETDATE(),created_date) /30)*30,GETDATE()),111)

這樣捉出來的資料如下：
2015/12/23
2015/10/24
2015/11/23

而我的專案是 ASP.Net MVC 5，所以有使用 mongoDB .Net Driver 2.2，一開始利用 LINQ寫法如下：
 var query = fRepo.GetAll().GroupBy(x =>
             DateTime.Now.AddDays(((int)(DateTime.Now.Subtract(DateTime.ParseExact(x.Date, "yyyy/MM/dd", System.Globalization.CultureInfo.InvariantCulture)).TotalDays) / Day30) * (-1 * Day30)).ToString("yyyy/MM/dd")
      
           ).Select(x => new DayPeriod { date1 =x.Key) }).OrderBy(x => x);

Java script chart

參考文章：15 JavaScript Libraries for Creating Beautiful Charts

這篇文章可以找到很多 chart元件可以使用，但有一些是沒有圖的物件，是要再額外再引用其它 library才可以。有的元件並非完全免費，有商業的版本，我測試後的分享如下：

ChartJS 目前專案有在使用，免費，目前版本 1.0.2，直接好用(但我更懷念那時開發 Flex程式就有內建的 Chart，那才是好用)，今年應該會出 V2的版本

Chartist 還沒使用過，應該也是免費，但官網的 demo還不錯，可以試試

Google Chart 應該很多人在用，直接引用網路上的 library即可

Highcharts 商業用途必需收費，動畫方面表現好

Fusioncharts 商業用途也是要收費，使用免費版會有浮水印

Amcharts 有免費版但畫面都會出現官網連結，圖很多可以試試

CanvasJS 商業用途也是要收費，強調速度快

Angular-FusionCharts Angular + Funcsioncharts，有使用 Angular可以直接試試

CSS 效果範例

25+ Examples of Material Design With Awesome Effects

使用 videojs with dash.js and video-dash.js

參考網址：videojs-contrib-dash

videojs最新版本下載網址：  videojs/github/release

依據參依網址的設定用在自己的專案會一直發生錯誤，不管用 nuget下載或是至 videojs官網下載，只好退而求其次只使用 Dash.js，但後來發現其實是 videojs的版本太舊導致的，所以至 git要下載 5.2的版本，HTML 5 (Chrome)和 flash (IE 11)播放測試過是 OK的

bootstrap範例網站

範例網址：bootply    jsfiddle

Template & Theme：Start Bootstrap

這兩個網站有很多的範例可以參考，包含 java script程式碼，css，html的語法，最重要的是可以直接就看到執行結果，非常方便，有興趣的人可以來這邊找到你想要的答案

多個 fullcalendar顯示在同一個網頁注意事項 - 使用 bootstrap tab

參考文件：fullcalendar render















目前使用者希望各別會議的預約能夠獨立顯示，所以我想到的是用 bootstrap tab的方式，
在取得 json event array後動態產生一個 tab和一個 fullcalendar div只顯示單一會議室的 events，
雖然我覺得這樣的作法不好，因為如果有30、40個會議室的話，tab就有 30個，提供這個功能是希望使用者能一眼就看出那個時段比較少的會議室預約，所以比較徧好單一 fullcalendar顯示所有的 events，不同的會議室 event用不同的顏色作區別。

我的作法如下：

使用 moment處理 asp.net MVC回傳的 json string

參考文件：Serializing Dates in JSON 
                    momentjs

在 asp.net MVC Controller or WebAPI回傳 json時，一般會使用 json.NET的 JsonConvert.SerializeObject作處理，如果欄位有日期的話，在 json.NET 4.5的版本就會自動轉成  ISO 8601 standard 的格式，而非微軟那個格式，除非有指定 TimeConverter

JsonConvert.SerializeObject(System.DateTime.Now) ISO格式如右 "2015-06-17T00:00:00Z"
而在前端 javascript在接到時就可以用 moment所提供的功能作轉換如下所示即可

moment(event.start).format( 'YYYY-MM-DD HH:mm:ss' )

Fullcalendar popover

參考文章： "Singleton" Bootstrap Popover with Close Button - JSFiddle,
                     How to close previous popovers in fullCalendar?

目前我的日曆希望能點選事件 (event)時可以有 bootstrap popover功能出現且規則如下

1. 一次只能有一個 popover出現
2. 點選  event時，只顯示該 event popover
3. 點選 day時要把顯示的 popover關閉，如果有 more視窗存在，也要一併關閉
4. 因為有設定 eventLimt，所以在點選 more時，要把 popover關閉

參考的文章是使用 fn.extend方式 (jquery extend比較像合併(merge)觀念，並非物件導向的繼承), 先作一個 function內有 popover template，然後再合併原本的 event element，這樣就可以作出我想要的功能囉，可以參考看看

Fullcalendar 常用到的參數分享

相關的說明都可以在官網文件找的到 FullCalendar Documentation
目前有用到的參數如下：

//表頭的顯示，依照需求可以作訂定
 header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },

defaultDate: new Date() //一開始的啟始日期，都會一般用 new Date當天日期
         
businessHours: false // 是否顯示工作區間，預設是6:00~ 10:00, 也可以制定
         
eventLimit: true //  如果有太多事件 (event)在同一天在 View month，可以用 more來代表

 //View 是 week or day時，畫面啟始時間會移到所指定的 scrollTime
scrollTime: 'HH;mm:ss'

Bootstrap Typeahead處理 json格式資料，並更新另一個 input的值

參考文件： Bootstrap typeahead ajax result format - Example

因為 Bootstrap Typeahead的 source是一個字串陣列 (string array)，如果使用者希望可以 source可以是 json string array而且在 typeahead選擇時可以更新另一個 input的值，這一篇文章就可以幫助你，作法如下

1. source 接回的是 json string array
2. 實作 matcher, sorter, highlighter
3. 實作 updater，在這邊就可以用 JSON.parse 處理 obj，再把某個 attribute值指定給特定的input

Fullcalendar 使用 google calendar event資訊 - javascript

 

參考文件：google calendar api - javascript範例

上面的參考文件使用 OAuth 2讀取非公開的日曆步驟如下：
1. Google Developers Console創件一個 project (如果有就省略)
2. API的部份記得要開通 calendar API 
3. 到憑證 (Credentials)至少要有一個 web application憑證
    a. Authorized JavaScript Origins記得要輸入網址如http://localhost:8000
        ，可以是 IP或是 domain name，可以多個，這是你實際 javascript讀取 API要識別的。
    b. Authorized Redirect URIs 要清空

$(window).scrollTop() 的值都為 0

因為之前為了要解決一個問題 開啟 bootstrap modal會造成首頁內容左移 (shit to left)，css 設定如下

html {
  overflow: hidden;
  height: 100%;}

因為把 height設為 100%，所以捉取到的值永遠都是 0，但為了作到動畫效果  CSS Animation - 以小米為師   ，所以只好又把它修改回來。

CSS Animation - 以小米為師

參考網站
优秀网站看前端 —— 小米Note介绍页面
小米電源官網

ASP.Net MVC 5使用 bootstrap 3 typeahead和 modal實作電話查詢

ASP.NET MVC With AngularJS

 @Scripts.Render("~/bundles/angularjs")   要放在 angular.module使用之前

使用 controller的寫法

1.2
 function HelloController($scope) {
     $scope.greeting = { text: 'Hello' };
 }

1.3
var myApp = angular.module('myApp', []);

     myApp.controller('HelloController', ['$scope', function ($scope) {
         $scope.greeting = { text: 'Hello' };
     } ]);


or 

 function HelloController($scope) {
         $scope.greeting = { text: 'Hello' };
  }

// The $inject property of every controller (and pretty much every other type of object in Angular) needs to be a string array equal to the controllers arguments, only as strings
HelloController.$inject = ['$scope'];

 var myApp = angular.module('myApp', []);
 myApp.controller('HelloController', HelloController);


SPA 注意事項
1.要設定 SPA要先加入 angular-route.min.js

 //AngularJS
 bundles.Add(new ScriptBundle("~/bundles/angularjs").Include(
                        "~/Scripts/angular.min.js"
                       , "~/Scripts/angular-route.min.js"
                     
                        ));

2.設定連結
   a href="/#/routeOne"

   如果 default網頁是 Index.cshtml，可以寫成如上的連結，但如果不是，比如有一個網頁叫 SPATest.cshtml放在 Home目錄底下的話，連結修改如下：
 
   a href="/Home/SPATest/#/routeOne"

3.加上一個   <div ng-view></div>在你的 Index.cshtml (SPA的首頁)上

4.設定 angulasjs route，可儲存在 javascript檔
 
     //routing for angularjs
     var configFunction = function ($routeProvider) {
         $routeProvider.
        when('/routeOne', {
            templateUrl: '/RoutesDemo/one'
        })
        .when('/routeTwo', {
            templateUrl: '/RoutesDemo/two'
        })
       .when('/routeThree', {
            templateUrl: '/RoutesDemo/three'
        });

     }
     configFunction.$inject = ['$routeProvider'];

     myApp.config(configFunction);

5. 建立 contorller
     public class RoutesDemoController : Controller
    {
        //
        // GET: /RouttesDemo/

        public ActionResult One()
        {
            ViewBag.test = 1;
            return PartialView("SPAPartialTest");
        }

        public ActionResult Two(int donuts = 1)
        {
            ViewBag.Donuts = donuts;
            ViewBag.test = 1;
            return PartialView("Two");
        }
        public ActionResult Three()
        {
            ViewBag.test = 3;
            return PartialView("SPAPartialTest");
        }

    }

6.建立 partialview


Hands On Lab: Build a Single Page Application (SPA) with ASP.NET Web API and Angular.js

Using AngularJs, ASP.NET MVC, Web API and EntityFramework to build NLayered Single Page Web Applications

【AngularJs + ASP.NET MVC】使用AntularJs快速建立ASP.NET MVC SPA網站

Getting started with AngularJS and ASP.NET MVC - Part One
Getting started with AngularJS and ASP.NET MVC - Part Two

AngularJS 開發 ASP.NET MVC

What's the difference between “return View()” and “return PartialView()”

如何在 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!"); };