2017年11月23日 星期四

[研究] CloudFlare 的 cdnjs 免費前端 JavaScript Labrary

[研究] CloudFlare 的 cdnjs 免費前端   JavaScript Labrary

2017-11-23

cloudflare
https://zh.wikipedia.org/wiki/CloudFlare
Cloudflare是一間美國的跨國IT企業,總部位於舊金山,在倫敦和英美外亦設有辦事處。
Cloudflare以向客戶提供網站安全管理、效能優化及相關的技術支援為主要業務。通過基於反向代理的內容傳遞網路(Content Delivery Network,CDN)及分布式域名解析服務(Distributed Domain Name Server),Cloudflare可以幫助受保護站點抵禦包括拒絕服務攻擊(Denial of Service)在內的大多數網路攻擊,確保該網站長期在線,同時提升網站的效能、載入速度以改善訪客體驗。

cdnjs 是 CloudFlare 提供的服務,包含了大量免費的前端 JavaScript Labrary。

使用方法

1.先連上網站
https://cdnjs.com/

2.輸入要找的,例如 jQuery,它會列出一堆相關的

3.找到要的

4.點選 Copy,

點選 Copy Url 會得到
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

點選 Copy Script Tag 會得到
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

就可以在網頁中使用,而不用下載一份 jQuery 到自己原始碼中。
( 除非你架設的網站是禁止連上 Internet 的,那就無法這樣用 )


例如要用 modernizr,可以這樣用
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

**********

jQuery 目前只會顯示出最新版的 3.2.1 版,那可以用舊版嗎?例如 3.2.0
把網址改為下面
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js
貼到瀏覽器,可以顯示出來,表示未來出新版,雖然查詢不到舊版,你使用的舊版也不會失聯。


(完)

2017年11月22日 星期三

[研究] 匯出、匯入 Excel 檔案 (.NET)

[研究] 匯出、匯入 Excel 檔案 (.NET)

2017-11-22

(零) 前言

微軟官方並不建議在伺服器端使用直接存取 Excel 物件模型的方式來控制 Excel 檔案,除了上述的資源無法釋放的問題外,還有像是權限的問題,以及安全性問題等等,詳細的資料請參考:
http://support.microsoft.com/default.aspx/kb/257757
https://msdn.microsoft.com/zh-tw/ee818993.aspx

也就是最好不要在 Web Server 或網頁上做 Excel 檔案的匯出、匯入等行為。

****************************************

(一) 以Html方式輸出

[研究][C#][ASP.NET] GridView 匯出成 Excel (.xls)(以Html方式輸出)
http://shaurong.blogspot.tw/2016/03/caspnet-gridview-excel-xlshtml.html

優點:不需要安裝任何元件
缺點:Office 2007(含)以後,開啟檔案時候會有警告,因為檔案格式實際上是 HTML,不是真正的 .xls

****************************************

(二) 使用 Microsoft XML SDK 2.5 for Office

歡迎使用 Open XML SDK 2.5 for Office
https://msdn.microsoft.com/zh-tw/library/office/bb448854.aspx

Open XML SDK 2.5 for Microsoft Office
https://www.microsoft.com/en-us/download/details.aspx?id=30425

[研究][C#][ASP.NET] GridView 匯出成 Excel (.xlsx) (使用 OpenXML SDK 2.5)
http://shaurong.blogspot.tw/2016/03/caspnet-gridview-excel-xlsx-openxml-sdk.html

優點:微軟官方推出的免費元件
缺點:
1.Web Server 要另外安裝元件
2.可能只支援 .xlsx  (可能不支援 .xls)
3.元件更新可能沒有 Office 快
4.可能有資源無法釋放的問題、權限的問題、安全性問題等等。

2017-11-22,目前 NuGet 提供的 OpenXML 已經到 v2.7.2 版,但獨立下載的仍只有 v2.5 版。

****************************************

(三) 使用 Microsoft Office

[研究][C#][ASP.NET] GridView 匯出成 .xls (使用 Excel )
http://shaurong.blogspot.tw/2016/03/caspnet-gridview-xls-excel.html

優點:直接操作 Excel 軟體去處理檔案,相容性最佳
缺點:
1.Web Server 必須安裝商業版 Microsoft Office,必須付費,免費版 Office Viewer 不支援。
2.可能有資源無法釋放的問題、權限的問題、安全性問題等等。

****************************************

(四) 使用 NPOI

這不是微軟官方提供的,但是在微軟的 MSDN 網站上有介紹。

[研究][C#][ASP.NET] 用 NPOI v2.2.1 在 Server 端存取 Excel 檔案 (從官方下載安裝)
http://shaurong.blogspot.com/2017/11/caspnet-npoi-v221-server-excel.html

[研究][C#][ASP.NET] 用 NPOI v2.3.0 在 Server 端存取 Excel 檔案 (NuGet安裝)
http://shaurong.blogspot.com/2017/11/caspnet-npoi-server-excel-nuget.html

****************************************

(五) 使用 ClosedXML

這不是微軟官方提供的,它使用了 OpenXML 和一些其他套件,程式開發聽說比 OpenXML 要簡易點。

[研究] [C#] 用 ClosedXML 在 Server端操作 Excel,安裝與試用 (NuGet安裝)
http://shaurong.blogspot.com/2017/11/c-closedxml-server-excel-nuget.html

PS:

[研究] [C#] [WinForm] 取得 Excel 的所有 工作表 名稱,及儲存格內容 (使用Access Database Engine 2010)
http://shaurong.blogspot.tw/2016/11/c-winform-excel.html

[研究] [C#] 用 ClosedXML 在 Server端操作 Excel,安裝與試用 (NuGet安裝)

[研究] [C#] 用 ClosedXML 在 Server端操作 Excel,安裝與試用 (NuGet安裝)

2017-11-22

ClosedXML - The easy way to OpenXML - Home
https://closedxml.codeplex.com/

GitHub - ClosedXML
https://github.com/closedxml/closedxml

範例
https://closedxml.codeplex.com/documentation

PS:本環境為 Windows Server 2016 Standard + Visual Studio 2017 v15.4.4


 (下圖) 目前最新為 0.90.0 版









(下圖) NuGet 目前可以安裝 ClosedXML v0.90.0 版


相依的套件很多,略查一下底細

FastMember.Signed 1.1.0
https://www.nuget.org/packages/FastMember.Signed/#

System.IO.FileSystem.Primitives 和 System.IO.Packaging 是微軟的

DocumentFormat.OpenXml 是微軟的,最新到 2.7.2,NuGet 提供的 OpenXML 版本目前比獨立下載的版本還要新。

Open XML SDK 2.5 for Microsoft Office
https://www.microsoft.com/en-us/download/details.aspx?id=30425



(下圖)
參考範例
https://closedxml.codeplex.com/documentation


(下圖) 執行後,網頁空白是正常的
(下圖) 因為找不到 HelloWorld.xlsx 檔案產生到哪去了,使用一套 Everything 工具軟體去搜尋,原來在 C:\Program Files (x86)\IIS Express

PS:本環境為 Windows Server 2016 Standard + Visual Studio 2017 v15.4.4




(待續)

[研究][CSS] iCheck v1.0.2 (在不同流覽器和設備上都有相同的表現) 官方下載、安裝與試用

[研究][CSS] iCheck v1.0.2 (在不同流覽器和設備上都有相同的表現) 官方下載、安裝與試用

2017-11-22

官方網站
http://fronteed.com/iCheck
http://icheck.fronteed.com/

http://www.bootcss.com/p/icheck/








(下圖) 去 jQuery 官方網站和 iCheck 官方網站下載套件,從檔案總管拖放到 Visual Studio 中你想要的目錄。





Default.aspx 內容
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="Scripts/jquery-3.2.1.min.js"></script>
    <link href="Scripts/icheck-1.x/skins/all.css" rel="stylesheet" />
    <script src="Scripts/icheck-1.x/icheck.min.js"></script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
    </form>
    <table id="testTable">
  <thead>
    <tr><th><input type="checkbox" class="js-checkbox-all">全選</th></tr>
  </thead>
  <tbody>
    <tr><td><input type="checkbox">選項1</td></tr>
    <tr><td><input type="checkbox">選項2</td></tr>
    <tr><td><input type="checkbox" disabled>選項3</td></tr>
    <tr><td><input type="checkbox">選項4</td></tr>
  </tbody>
</table>
    <script>
var $checkboxAll = $(".js-checkbox-all"),
    $checkbox = $("tbody").find("[type='checkbox']").not("[disabled]"),
    length = $checkbox.length,
    i=0;

//啟動icheck
$(("[type='checkbox']")).iCheck({
  checkboxClass: 'icheckbox_minimal-blue',
  radioClass: 'iradio_square-blue'
});

//全選checkbox
$checkboxAll.on("ifClicked",function(event){
  if(event.target.checked){
    $checkbox.iCheck('uncheck');
    i=0;
  }else{
    $checkbox.iCheck('check');
    i=length;
  }
});

$checkbox.on('ifClicked',function(event){
  event.target.checked ? i-- : i++;
  if(i==length){
    $checkboxAll.iCheck('check');
  }else{
    $checkboxAll.iCheck('uncheck');
  }
})

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


(下圖) 執行結果



(待續)

相關

jquery插件icheck api使用(美化checkbox和radio样式)
http://www.51xuediannao.com/js/jquery/icheck.html

iCheck表单美化插件使用方法详解(含参数、事件等)
http://www.exp99.com/f2e/iCheck.html

[研究][CSS] iCheck v1.0.2 (在不同流覽器和設備上都有相同的表現) 安裝與試用 (NuGet安裝)

[研究][CSS] iCheck v1.0.2 (在不同流覽器和設備上都有相同的表現) 安裝與試用 (NuGet安裝)

2017-11-22

官方網站
http://fronteed.com/iCheck
http://icheck.fronteed.com/

http://www.bootcss.com/p/icheck/

iCheck 需要 jQurey,但 Visual Studio 2017 v15.4.4 用 NuGet 安裝 iCheck時候,不會自動安裝 jQuery,要自己另外安裝。



















(下圖)  把 jQuery 和 iCheck 拖放引用。

PS: 如果不想用 NuGet 下載安裝 iCheck,可以用遠端的 iCheck,例如:
<link href="http://cdn.bootcss.com/iCheck/1.0.2/skins/all.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/iCheck/1.0.2/icheck.min.js"></script>




Default.aspx 內容
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="Scripts/jquery-3.2.1.min.js"></script>
    <link href="Scripts/icheck-1.x/skins/all.css" rel="stylesheet" />
    <script src="Scripts/icheck-1.x/icheck.min.js"></script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
    </form>
    <table id="testTable">
  <thead>
    <tr><th><input type="checkbox" class="js-checkbox-all">全選</th></tr>
  </thead>
  <tbody>
    <tr><td><input type="checkbox">選項1</td></tr>
    <tr><td><input type="checkbox">選項2</td></tr>
    <tr><td><input type="checkbox" disabled>選項3</td></tr>
    <tr><td><input type="checkbox">選項4</td></tr>
  </tbody>
</table>
    <script>
var $checkboxAll = $(".js-checkbox-all"),
    $checkbox = $("tbody").find("[type='checkbox']").not("[disabled]"),
    length = $checkbox.length,
    i=0;

//啟動icheck
$(("[type='checkbox']")).iCheck({
  checkboxClass: 'icheckbox_minimal-blue',
  radioClass: 'iradio_square-blue'
});

//全選checkbox
$checkboxAll.on("ifClicked",function(event){
  if(event.target.checked){
    $checkbox.iCheck('uncheck');
    i=0;
  }else{
    $checkbox.iCheck('check');
    i=length;
  }
});

$checkbox.on('ifClicked',function(event){
  event.target.checked ? i-- : i++;
  if(i==length){
    $checkboxAll.iCheck('check');
  }else{
    $checkboxAll.iCheck('uncheck');
  }
})

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



(下圖) 如果 NuGet 只有安裝 jCheck,沒有安裝 jQuery,會出現下面失敗情況


(待續)

相關

jquery插件icheck api使用(美化checkbox和radio样式)
http://www.51xuediannao.com/js/jquery/icheck.html

iCheck表单美化插件使用方法详解(含参数、事件等)
http://www.exp99.com/f2e/iCheck.html


相關

[研究][C#][ASP.NET] jQuery 3.2.1 官方下載、安裝、試用
http://shaurong.blogspot.com/2017/11/caspnet-jquery-321.html

[研究][CSS] iCheck v1.0.2 (在不同流覽器和設備上都有相同的表現) 安裝與試用 (NuGet安裝)
http://shaurong.blogspot.com/2017/11/css-icheck-v102-nuget.html

[研究] [ASP.NET] hideShowPassword 元件安裝、試用
http://shaurong.blogspot.com/2017/11/aspnet-hideshowpassword.html

[研究] jQuery UI Datepicker 月曆 安裝與試用
http://shaurong.blogspot.com/2017/07/jquery-ui-datepicker.html

[研究] [C#] [ASP.NET] 用 SweetAlert + Button 作 送出確認 提示對話盒
http://shaurong.blogspot.com/2017/06/c-aspnet-sweetalert_23.html

[研究] [C#] [ASP.NET] 用 SweetAlert + LinkButton 作 刪除確認 提示對話盒
http://shaurong.blogspot.com/2017/06/c-aspnet-sweetalert.html

[研究][C#][ASP.NET] Bootstrap 3.3.7 安裝(NuGet)
http://shaurong.blogspot.com/2017/01/caspnet-bootstrap-337-nuget.html

[研究][C#][ASP.NET] jQuery 3.1.1 安裝(NuGet)
http://shaurong.blogspot.com/2017/01/caspnet-jquery-311-nuget.html

[研究][C#][ASP.NET] jQuery Cookie 1.4.1 - jQuery Plugin 安裝(NuGet)
http://shaurong.blogspot.com/2017/01/caspnet-jquery-cookie-141-jquery-plugin.html

[研究] [C#][ASP.NET] Select2 v4.0.3 - jQuery Plugin 安裝
http://shaurong.blogspot.com/2017/01/caspnet-select2-v403-jquery-plugin.html

[研究] Visual Studio 2015 用 Nuget 安裝 jQuery
http://shaurong.blogspot.com/2016/11/visual-studio-2015-nuget-jquery_14.html