tag:blogger.com,1999:blog-22240012062589913082024-03-28T20:29:54.081-07:00程式宅急便ASP.NET、C#、MVC、Angular、jQuery…Sharing what I Know !<br>
<i>Share your knowledge. It’s a way to achieve immortality.</i>
<br>
My Website:<a href="http://kyleshen.com">http://kyleshen.com</a>
Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.comBlogger122125tag:blogger.com,1999:blog-2224001206258991308.post-39494288673217023462018-04-11T09:32:00.001-07:002018-04-11T09:36:10.319-07:00Serverless All-Star 參加筆記<h2>前言</h2><p>Serverless目前還沒有一個公認的定義,這個技術對於一個開發人員,可以專注於自己的程式,而不用去管網站架設、系統組態設定,只要將自己的程式碼丟上雲端就能完成應用程式部署、立即使用寫好的Web服務。在實務上我已經將一些供其他模組呼叫的核心程式變成Serverless架構,這樣的組件化除了降低整個開發成本外,也讓我能專注的監控這些核心的服務的使用情況,目前導入起來感覺挺好的。在 2018.03.29 參加了<a href="https://day.ithome.com.tw/serverless/">Serverless All-Star</a> 這個活動,來學習看看有沒有其他沒想到的應用,感謝現場熱心的學員有開共筆,一起記錄講師的重點:</p><p><a title="https://hackmd.io/PPFD5nkzRXOcA59h5jf2jg?both" href="https://hackmd.io/PPFD5nkzRXOcA59h5jf2jg?both">https://hackmd.io/PPFD5nkzRXOcA59h5jf2jg?both</a></p><h2>DevOps & Serverless - 陳正瑋 / 得寬科技DevOps Engineer</h2><p>Serverless 提供更高的彈性及擴展性,但別想得太沒好,引用 <a href="https://www.youtube.com/watch?v=f8ct2PohduY">Patrick Debois 演講內容</a> 〝Less is More”,看似少了很多工,但對於各種角色應該注意以下事項:</p><ul><li>Dev 要注意debug和monitoring的問題
<li>Ops 要注意latency問題
<li>Sec 要注意pipeline傳輸安全問題
<li>Boss 要注意是否真的能省的錢</li></ul><h2><br></h2><h2>極速 IT 架構新趨勢:Serverless / 王宏仁 / iThome電腦報周刊副總編輯</h2><p>IT Home調查 2018 IT趨勢-值得關注的技術:Web Assembly , Kubernets , 金融 Open API, Chatbot NLP</p><p>(抱歉位置太爛拍得很爛…XD)</p><p><a href="https://lh3.googleusercontent.com/-DyjjVmvw31Q/Ws44hCL1s6I/AAAAAAAAM0w/Xd4eYIAvtyMGkQknX2RkC81_dGREaxlogCHMYCw/s1600-h/20180329_095430%255B4%255D"><img width="644" height="484" title="20180329_095430" style="display: inline; background-image: none;" alt="20180329_095430" src="https://lh3.googleusercontent.com/-4BYObB0KLus/Ws44h08lupI/AAAAAAAAM00/PNC_tIj-FCISK3Ftu6nJyMTtLjX78s42wCHMYCw/20180329_095430_thumb%255B1%255D?imgmax=800" border="0"></a></p><p>- NETFLIX 前技術長提到IT架構的變革:虛擬化 -> 雲端 -> 容器 –> Serverless無伺服器架構</p><p>用哪種?以房子做比喻:</p><p>- 自建機房:買套房/房子<br>- 虛擬化:自家房子+隔間<br>- Cloud:租一層公寓(廚房.客廳.玄關.大門)+標準隔間<br>- Serverless無伺服器架構:租沙發</p><p>Serveless 實務案例介紹</p><p>- Skylink公司透過無人機+影像辨識針對工廠安全做巡檢,資料都是丟Serverless<br>- 可口可樂針讓販賣機做可用性分析,數據資料全丟AWD lambda,但之後量大的話還是會考慮丟Web App,因不會比較省成本。<br>- Abilisense公司透過穿戴裝置分析環境聲音+預警<br>- 亞旭電腦用Serverless結合IoT,讓BOM表Cost計算更直覺</p><h2><br></h2><h2>設計、開發及部署跨平台的Serverless應用/上官林傑 -台灣微軟技術傳教士</h2><p>Serverless 重點:伺服器抽象化、事件驅動立即延展、錙銖必較</p><p>常見的Serveless架構情境</p><p>- 即時串流服務 <br>- IoT senser data <br>- 週期性工作 每15分鐘清除無效資料 <br>- 程式後端服務 使用頻率無法估計 <br>- 對談機器人 使用頻率無法估計</p><p>Azure Stack介紹:<a title="http://technews.tw/2017/08/30/microsoft-azure-public-cloud-is-on-the-ground-with-the-help-from-local-telecomm/" href="http://technews.tw/2017/08/30/microsoft-azure-public-cloud-is-on-the-ground-with-the-help-from-local-telecomm/">http://technews.tw/2017/08/30/microsoft-azure-public-cloud-is-on-the-ground-with-the-help-from-local-telecomm/</a></p><p>Serverless 建議</p><p>- 專注做一件事<br>- 應該冪等 Idempotent<br>- 盡快結束</p><p>玩玩Azure Function臉部辨識:<a title="https://www.tryfunctions.com/ng-min/try?trial=true" href="https://www.tryfunctions.com/ng-min/try?trial=true">https://www.tryfunctions.com/ng-min/try?trial=true</a></p><h2><br></h2><h2>使用 Serverless 進行網站監控/ 104 呂昭寬 資深架構師</h2><p>學習成本</p><p>- 取代管理成本<br>
- 黑箱和地雷<br>
- 限制:最多3分鐘不然會timeout , cpu memory storage , 程式語言的問題 (java要先開jvm之類的,不太適合)</p><p>Faas的強項</p><p>目標選擇<ul><li>可靠性很高,透過internet運行
<li>適合中低負載
<li>適合排程運行</li></ul><p>例如可以用Aws lambda發出請求給網站,網站回200 404 timeout,送給Cloudwatch整理成報表<p>也可以進一步檢查Domain name解析時間,等候請求時間,tcptls hand shake連線等等<p><a href="https://lh3.googleusercontent.com/-ueyRfVRTMcU/Ws44iiT6d1I/AAAAAAAAM04/fzQ6CoXzIYgHcn9vmu8Kj7YYXKv_p5jQACHMYCw/s1600-h/20180329_113420%255B4%255D"><img width="644" height="484" title="20180329_113420" style="display: inline; background-image: none;" alt="20180329_113420" src="https://lh3.googleusercontent.com/-XuarG_0WRCY/Ws44jE5T8qI/AAAAAAAAM08/8k9oDgGUXzsQYtc16obDHhak3iyE0pCdACHMYCw/20180329_113420_thumb%255B1%255D?imgmax=800" border="0"></a><h2><br></h2><h2>Spacer - 我為什麼自製了一個 Serverless 平台 / 柏傑(Poga) - APlace DesignConsultant</h2><p>本場次講者整合工具,自做了一個Serverless platform,可以去Github看看 <a title="https://github.com/poga/spacer" href="https://github.com/poga/spacer">https://github.com/poga/spacer</a><p>本次也看到 Lua 這個嵌入式程式語言,語法看起來蠻簡潔的:<a title="https://zh.wikipedia.org/wiki/Lua" href="https://zh.wikipedia.org/wiki/Lua">https://zh.wikipedia.org/wiki/Lua</a><h2><br></h2><h2>OpenFaaS - 快速打造你的 Serverless 平台 / 王偉任(Weithenn) - 東森購物架構師</h2><p>要評估容器技術,現在有很多可以直接線上玩了</p><p>實作容器部署<br>
Play with Docker:<a href="https://labs.play-with-docker.com/">https://labs.play-with-docker.com/</a><br>
Play with Kubernetes:<a href="https://labs.play-with-k8s.com/">https://labs.play-with-k8s.com/</a></p><h2><br></h2><h2>Ops as Code using Serverless / 黃冠元(Rick) / 91APP技術經理</h2><p>整個演講的內容,講者已經整理到他blog</p><p><a title="https://rickhw.github.io/2018/03/29/About/2018-Serverless-All-Star/" href="https://rickhw.github.io/2018/03/29/About/2018-Serverless-All-Star/">https://rickhw.github.io/2018/03/29/About/2018-Serverless-All-Star/</a></p><p><a href="https://lh3.googleusercontent.com/-RRmeywsewQA/Ws44juWG_nI/AAAAAAAAM1A/k2KwO2j2AS8UdbpBkMVZvqgs8sYDDdytgCHMYCw/s1600-h/20180329_140133%255B4%255D"><img width="644" height="484" title="20180329_140133" style="display: inline; background-image: none;" alt="20180329_140133" src="https://lh3.googleusercontent.com/-d8FrlJqDx6c/Ws44jwjSXLI/AAAAAAAAM1E/SxU_uF36gt0Z1fg_6tqkw3jug8OQvYbXgCHMYCw/20180329_140133_thumb%255B1%255D?imgmax=800" border="0"></a></p><h2><br></h2><h2>Angular+Firebase:快速建立最小可行性產品 / 林承翰(JB) - 華立企業權任課長</h2><p>講者是一位PM,目前會利用兩者技術來快速做一些prototype確認客戶需求</p><p><a title="https://github.com/angular/angularfire2" href="https://github.com/angular/angularfire2">https://github.com/angular/angularfire2</a></p><p>推薦保哥之前也講過相關的題目:<a title="https://www.slideshare.net/WillHuangTW/jsdctw-2016-angular-2-firebase-serverless-67522007" href="https://www.slideshare.net/WillHuangTW/jsdctw-2016-angular-2-firebase-serverless-67522007">https://www.slideshare.net/WillHuangTW/jsdctw-2016-angular-2-firebase-serverless-67522007</a><h2><br></h2><h2>秒發百萬推播 / 范建銘 - 工程師</h2><p>講者是個很古意的工程師 XD</p><p>以往自建機房,因設備問題,推播App訊息常常因為效能問題導致無法在對的時間發送,並且常常會讓資料庫掛掉。評估過GCP和AWS的Serverless技術,只有AWS承諾能達到秒即百萬推播的服務,Serverless上手容易,經過1.2個月的技術評估就能將此需求上到雲方案,且非常的節省成本,解決問題,但實務上還是踩到一些雷,例如還是得分幾批發送、及有時會發生推播兩次的情形發生。</p>Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com1tag:blogger.com,1999:blog-2224001206258991308.post-65666669297922704722018-04-04T02:00:00.001-07:002018-04-04T02:17:25.292-07:00東西拿了就走 - Amazon Go 無人商店初體驗<h2>Amazon Go 介紹</h2><p>今年有幸至西雅圖參與 Miscrosoft MVP Global Summit , 還是撥空安排了一些行程 , 身為一個攻城獅怎麼不能來體驗 目前全球僅此一家的 Amazon Go 無人商店呢 ~ </p>
<p>要進入 Amazon Go 之前必須要先下載App和註冊信用卡,進去以後透過App的QR Code 就能進去了,跟高鐵一樣~ </p><p><a href="https://lh3.googleusercontent.com/-osvQNoe5Q0U/WsST_4Fs9II/AAAAAAAAMoU/3PsUv_LC9-kn7a6xz-bxWgo5Ze6_MeFNQCHMYCw/s1600-h/20180308_121026%255B4%255D"><img width="644" height="484" title="20180308_121026" style="display: inline; background-image: none;" alt="20180308_121026" src="https://lh3.googleusercontent.com/-gO3klJg0avI/WsSUAlhuQDI/AAAAAAAAMoY/R2tNNIZfQogcTwgs1YKovKoNIR9RRwTNwCHMYCw/20180308_121026_thumb%255B1%255D?imgmax=800" border="0"></a></p><p>Just Walk Out Shpping</p><p><a href="https://lh3.googleusercontent.com/-FL4ONSMmdik/WsSUBGBWpYI/AAAAAAAAMoc/zu7MgdwsQXQZT7FgQIzReyYZXsYOiD2OwCHMYCw/s1600-h/20180308_121041%255B4%255D"><img width="364" height="484" title="20180308_121041" style="display: inline; background-image: none;" alt="20180308_121041" src="https://lh3.googleusercontent.com/-RC4SxICz-FA/WsSUB-FsTTI/AAAAAAAAMog/RwbbOv7uUbgDjLqX2ycRrsUZUluaENUiQCHMYCw/20180308_121041_thumb%255B1%255D?imgmax=800" border="0"></a></p><p>入口處的機器,類似高鐵,只要將註冊完的App透過QR Code掃描即可進入</p><p><a href="https://lh3.googleusercontent.com/-3FeuGL4cUq4/WsSUCeD61OI/AAAAAAAAMok/QmfM-dd3T8MiQaowxij0FBV1IZWwDGnrwCHMYCw/s1600-h/20180308_121139%255B4%255D"><img width="364" height="484" title="20180308_121139" style="display: inline; background-image: none;" alt="20180308_121139" src="https://lh3.googleusercontent.com/-jSqiSFmUqB8/WsSUDHhXsvI/AAAAAAAAMoo/NXjOTZsz1bU0tk_kFaFnpHdmV_EVyWtJwCHMYCw/20180308_121139_thumb%255B1%255D?imgmax=800" border="0"></a></p><p>身為一個攻城獅,大家只看個超市內的商品,而我們是抬頭看看這些攝影機的擺設 XD</p><p><a href="https://lh3.googleusercontent.com/-Nna2JVmOF5k/WsSUD_q8QNI/AAAAAAAAMos/HyMwn4_CbLEfejUaMwnO_At-VC6Bnm1PACHMYCw/s1600-h/20180308_121410%255B4%255D"><img width="644" height="484" title="20180308_121410" style="display: inline; background-image: none;" alt="20180308_121410" src="https://lh3.googleusercontent.com/-g_cSGMGVYxs/WsSUEQLnRFI/AAAAAAAAMow/V5SxW7JL54cJepfJm-6_Tj94eY4DZnO-ACHMYCw/20180308_121410_thumb%255B1%255D?imgmax=800" border="0"></a></p><p>Amazon Go 裡面的商品就跟一般的美國商品沒兩樣</p><p><a href="https://lh3.googleusercontent.com/-XRX9C2Df5Rw/WsSUFfCCCOI/AAAAAAAAMo0/XQl4Hb-9YtwGV-Vjscy6gtcwKAax0xLkwCHMYCw/s1600-h/20180308_121935%255B4%255D"><img width="364" height="484" title="20180308_121935" style="display: inline; background-image: none;" alt="20180308_121935" src="https://lh3.googleusercontent.com/-t4vrDuQWMdI/WsSUF_gkgkI/AAAAAAAAMo4/PWK16Tl6O7MxnYS0LexTRTAqNPvgLmzKACHMYCw/20180308_121935_thumb%255B1%255D?imgmax=800" border="0"></a></p><p>買了一個Amazon的巧克力,非常適合當伴手禮</p><p><a href="https://lh3.googleusercontent.com/-KM3-dow13gw/WsSUGhGWF-I/AAAAAAAAMo8/sf8-hrAxn4kb2MVL-kaEKf1fKbkhW4x2QCHMYCw/s1600-h/20180308_121739%255B4%255D"><img width="644" height="484" title="20180308_121739" style="display: inline; background-image: none;" alt="20180308_121739" src="https://lh3.googleusercontent.com/-BTc02ZudJY8/WsSUHUpwXzI/AAAAAAAAMpA/wO6CYRsYNToIDjUT3y0SPauetFSyts09QCHMYCw/20180308_121739_thumb%255B1%255D?imgmax=800" border="0"></a></p><p>店家外面有提供休息站,意外發現一名熱血工程師就在這邊打Code</p><p><a href="https://lh3.googleusercontent.com/-SIxZd5d6iGU/WsSUIQKGmKI/AAAAAAAAMpE/hcnc8pXsUJYfaUf8YVPxjw8I0qhdzhitwCHMYCw/s1600-h/20180308_122256%255B4%255D"><img width="364" height="484" title="20180308_122256" style="display: inline; background-image: none;" alt="20180308_122256" src="https://lh3.googleusercontent.com/-wwPobAG-CK8/WsSUIwNlu4I/AAAAAAAAMpI/HsEDgnPw08o-rElflhuc6g5JgBp6ml2xgCHMYCw/20180308_122256_thumb%255B1%255D?imgmax=800" border="0"></a></p><p>旁邊就是 Amazon 西雅圖總部 - 巨型植物園</p><p><a href="https://lh3.googleusercontent.com/-zkKKXFnNT7w/WsSUJ99qW6I/AAAAAAAAMpM/yRglYfulup4pFTKXmvGfYiWRmQtpT3AOACHMYCw/s1600-h/20180308_122618%255B4%255D"><img width="644" height="484" title="20180308_122618" style="display: inline; background-image: none;" alt="20180308_122618" src="https://lh3.googleusercontent.com/-lMrzzhwUA-4/WsSUKrs0K9I/AAAAAAAAMpQ/NUffiKJh4eceA-oI1W-xCmKZUPUbfdxYACHMYCw/20180308_122618_thumb%255B1%255D?imgmax=800" border="0"></a></p><h2>心得</h2><p>目前仍在營運測試階段,故還是會有店員在現場,但主要負責是門口的教育訓練和補貨</p>
<p>使用體驗起來真的還不錯,想像一下進到 7-11 亂拿東西直接出門口的感覺</p>
<p>整個過程是很順的,出了門口閘道馬上收到信用卡刷卡通知</p><p>當下有跟朋友想了幾個測試情境,譬如交換外套、遮臉、把商品快速來回擺放…</p><p>但礙於實在太丟臉了,所以沒這樣做 XD</p>
<p>無人商店普及後,我想會大大改變我們的消費行為,期待那一天的到來 :)</p><h2>技術</h2><p>親身體驗後,回台馬上去研究了一下核心技術,以下有幾篇文章可以參考看看</p><p><a title="https://buzzorange.com/techorange/2017/03/10/how-to-build-shop-like-amazon-go/" href="https://buzzorange.com/techorange/2017/03/10/how-to-build-shop-like-amazon-go/">https://buzzorange.com/techorange/2017/03/10/how-to-build-shop-like-amazon-go/</a></p><p><a title="http://benevo.pixnet.net/blog/post/64772716-amazon-go-%E4%B8%89%E5%A4%A7%E6%A0%B8%E5%BF%83%E6%8A%80%E8%A1%93" href="http://benevo.pixnet.net/blog/post/64772716-amazon-go-%E4%B8%89%E5%A4%A7%E6%A0%B8%E5%BF%83%E6%8A%80%E8%A1%93">http://benevo.pixnet.net/blog/post/64772716-amazon-go-%E4%B8%89%E5%A4%A7%E6%A0%B8%E5%BF%83%E6%8A%80%E8%A1%93</a></p>Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com0tag:blogger.com,1999:blog-2224001206258991308.post-17335540101348068692018-03-29T07:39:00.000-07:002018-03-30T07:39:07.552-07:00使用 LinqPad 快速產生 Dapper 所需要的 SQL 語法 - Class、Insert、Update<h2>前言</h2>
<p>工作上目前已經很習慣用 Dapper 這種輕型的 ORM 來處理有關DAL層的應用,但相較於 Entity Freamwork,在處理新增/更新時就比較沒那麼方便,主要差異在Entity Freamwork 可以直接用物件操作的方式來做資料庫異動,而Dapper就必須寫SQL Commend,雖然有一些Open Source Extentions 已經封裝這些邏輯,譬如:SimpleCRUD﹉等,但實際使用常常得依規範設定一些屬性,有時發生錯誤時也不是那麼的直覺,故目前我還是會以SQL Commend為主。但產生Commend是一件麻煩事,如果搭配 Linqpad 寫一個Script 可以依需求快速產生所需要的commend,彈性是很大的,此篇文章介紹我在實務上我常用Scripts,來快速產生相關 SQL Commend</p><h2>如何設定LinqPad</h2><p><a href="https://lh3.googleusercontent.com/-31fVcjdLQGA/Wr5L2NIWuEI/AAAAAAAAMh0/Vv9NBHV0lMcP5nrnU22MUtskSq-laVSRwCHMYCw/s1600-h/20180311_015834%255B3%255D"><img width="644" height="172" title="20180311_015834" style="display: inline; background-image: none;" alt="20180311_015834" src="https://lh3.googleusercontent.com/-zIde6jylRI8/Wr5L2pUn31I/AAAAAAAAMh4/EnPaJhFCagoZ-GJ8Ghq8nhZpT6y-5hIKQCHMYCw/20180311_015834_thumb%255B1%255D?imgmax=800" border="0"></a></p><p>Step 1 : 這邊可以直接瀏覽資料庫的Schema<br>
Step 2 : 這邊使用C# Program 來撰寫我們要產生Script的程式<br>
Step 3 : 選擇資料庫的連線字串</p><h2>接著以下是我常用的Helper,只要貼到內容裡面即可產生</h2><p><br></p>
<pre><code>
void Main()
{
this.Connection
.DumpClass(@"
SELECT * FROM Table
","ViewModelName")
.Dump();
}
// Define other methods and classes here
public static class LINQPadExtensions
{
private static readonly Dictionary<type string="" ,=""> TypeAliases = new Dictionary<type string="" ,=""> {
{ typeof(int), "int" },
{ typeof(short), "short" },
{ typeof(byte), "byte" },
{ typeof(byte[]), "byte[]" },
{ typeof(long), "long" },
{ typeof(double), "double" },
{ typeof(decimal), "decimal" },
{ typeof(float), "float" },
{ typeof(bool), "bool" },
{ typeof(string), "string" }
};
private static readonly HashSet<type> NullableTypes = new HashSet<type> {
typeof(int),
typeof(short),
typeof(long),
typeof(double),
typeof(decimal),
typeof(float),
typeof(bool),
typeof(DateTime)
};
public static string DumpClass(this IDbConnection connection, string sql,string Name)
{
if(connection.State != ConnectionState.Open)
connection.Open();
var cmd = connection.CreateCommand();
cmd.CommandText = sql;
var reader = cmd.ExecuteReader();
var builder = new StringBuilder();
do
{
if(reader.FieldCount <= 1) continue;
builder.AppendLine("public class " + Name);
builder.AppendLine("{");
var schema = reader.GetSchemaTable();
foreach (DataRow row in schema.Rows)
{
var type = (Type)row["DataType"];
var name = TypeAliases.ContainsKey(type) ? TypeAliases[type] : type.Name;
var isNullable = (bool)row["AllowDBNull"] && NullableTypes.Contains(type);
var collumnName = (string)row["ColumnName"];
builder.AppendLine(string.Format("\tpublic {0}{1} {2} {{ get; set; }}", name, isNullable ? "?" : string.Empty, collumnName));
}
builder.AppendLine("}");
builder.AppendLine();
} while(reader.NextResult());
return builder.ToString();
}
}
</type></type></type></type></code></pre>
<br>
<h2>產生 Insert 語法</h2><p><br></p>
<pre><code>
void Main()
{
// SQL Command
var sqlCommand = @"SELECT top 1 * FROM dbo.Table WITH (NOLOCK);";
this.Connection.GenerateInsertCommand(sqlCommand.ToString(), "Table").Dump();
}
public static class LINQPadExtensions
{
public static string GenerateInsertCommand(this IDbConnection connection, string sql, string tableName = "TableName")
{
if (connection.State != ConnectionState.Open)
{
connection.Open();
}
var cmd = connection.CreateCommand();
cmd.CommandText = sql;
var reader = cmd.ExecuteReader();
var builder = new StringBuilder();
do
{
if (reader.FieldCount <= 1)
{
continue;
}
builder.AppendFormat("INSERT INTO [dbo].[{0}]{1}", tableName, Environment.NewLine);
builder.AppendLine("(");
var schema = reader.GetSchemaTable();
var columnNames = new List<string>();
foreach (DataRow row in schema.Rows)
{
var columnName = (string)row["ColumnName"];
columnNames.Add(columnName);
}
foreach (var columnName in columnNames)
{
builder.AppendFormat(" [{0}]{1}{2}",
columnName,
columnNames.IndexOf(columnName).Equals(columnNames.Count - 1) ? "" : ",",
Environment.NewLine);
}
builder.AppendLine(")");
builder.AppendLine("VALUES");
builder.AppendLine("(");
foreach (var columnName in columnNames)
{
builder.AppendFormat(" @{0}{1}{2}",
columnName,
columnNames.IndexOf(columnName).Equals(columnNames.Count - 1) ? "" : ",",
Environment.NewLine);
}
builder.AppendLine(");");
builder.AppendLine();
}
while (reader.NextResult());
return builder.ToString();
}
}
</string></code>
</pre>
<br>
<h2>產生 Update 語法</h2>
<pre><code>
void Main()
{
// SQL Command
var tableName = "TableName";
var sqlCommand = @"SELECT top 1 * FROM [dbo].["+tableName+"]";
this.Connection.GenerateInsertCommand(sqlCommand.ToString(), tableName).Dump();
}
public static class LINQPadExtensions
{
public static string GenerateInsertCommand(this IDbConnection connection, string sql, string tableName = "TableName")
{
if (connection.State != ConnectionState.Open)
{
connection.Open();
}
var cmd = connection.CreateCommand();
cmd.CommandText = sql;
var reader = cmd.ExecuteReader();
var builder = new StringBuilder();
do
{
if (reader.FieldCount <= 1)
{
continue;
}
builder.AppendFormat("UPDATE [dbo].[{0}] SET {1}", tableName, Environment.NewLine);
// builder.AppendLine("(");
var schema = reader.GetSchemaTable();
var columnNames = new List<string>();
foreach (DataRow row in schema.Rows)
{
var columnName = (string)row["ColumnName"];
columnNames.Add(columnName);
}
foreach (var columnName in columnNames)
{
builder.AppendFormat(" [{0}] = @{0}{1}{2}",
columnName,
columnNames.IndexOf(columnName).Equals(columnNames.Count - 1) ? "" : ",",
Environment.NewLine);
}
builder.AppendLine("WHERE ID = @ID");
}
while (reader.NextResult());
return builder.ToString();
}
}
</string></code>
</pre>Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com0tag:blogger.com,1999:blog-2224001206258991308.post-14310571622818083932016-11-19T19:12:00.001-08:002016-11-19T19:22:44.084-08:00[Angular2] 在專案加入多國語系<h2>前言</h2> <p>在專案啟動時,我習慣直接將多國語系考慮進去,不然到時老闆一句話要Support時又要將所有程式改動挺麻煩的,在Angular2有一個整合i18n的模組叫做<a href="https://github.com/ocombe/ng2-translate">ng2-translate</a> ,本篇文章就來說明如何將它加入專案中。</p> <p>如何建立範本請參考 <a href="http://kyleap.blogspot.tw/2016/10/angular2.html">[Angular2] 建立專案範本</a></p> <h2> </h2> <h2>NPM安裝</h2><pre>$ npm install ng2-translate –save</pre><pre>or</pre><pre>$ yarn add ng2-translate</pre>
<h2> </h2>
<h2>模組Import</h2>
<p>Angular2 變成模組化開發後載入第三方函示庫不外乎就是 NPM安裝=>找你的模組匯入,此範例我們打開app.module.ts</p>
<p><a href="https://lh3.googleusercontent.com/-lt10ZUIO3s4/WDEUnD9M31I/AAAAAAAADYM/HIdxOhFChzE/s1600-h/Image.png"><img title="螢幕快照 2016-11-20 上午10.30.29" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="螢幕快照 2016-11-20 上午10.30.29" src="https://lh3.googleusercontent.com/-xUmEOutCnCk/WDEUo_zaNXI/AAAAAAAADYQ/1R32eUJr9zw/Image.png?imgmax=800" width="542" height="484"></a></p>
<p>這樣就會載入transModule,此設定翻譯檔預設會抓網站底下的i18n目錄,如果你要自訂翻譯檔的路徑可以改由以下設定:</p><pre>@NgModule({
imports: [
BrowserModule,
HttpModule,
<font color="#ffff00">TranslateModule.forRoot({
provide: TranslateLoader,
useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
deps: [Http]
})</font>
],
bootstrap: [AppComponent]
})
export class AppModule { }</pre>
<h2> </h2>
<h2>語言設定</h2>
<p>接著打開根元件app.conponent.ts,使用TranslateService並設定語言</p>
<p><a href="https://lh3.googleusercontent.com/-H_1z1Nj9Lh8/WDEUprq_43I/AAAAAAAADYU/0i-H65qvrjM/s1600-h/Image.png"><img title="螢幕快照 2016-11-20 上午10.52.16" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="螢幕快照 2016-11-20 上午10.52.16" src="https://lh3.googleusercontent.com/-bpMg5zSF6LY/WDEUqsFUy_I/AAAAAAAADYY/bFh-BYmA6RM/Image.png?imgmax=800" width="644" height="232"></a></p>
<h2> </h2>
<h2>定義翻譯檔</h2>
<p>開發階段src為網站目錄,我們在src資料夾底下增加i18,並增加en.json & zh.json</p>
<p>en.json</p>
<p>{<br> "HelloTrans": "Learing ng2-translate!"<br>}</p>
<p>zh.json</p>
<p>{<br> "HelloTrans": "實作多國語系!"<br>}<br></p>
<h2> </h2>
<h2>使用翻譯檔</h2>
<p>Html 要抓取翻譯檔定義需改由以下寫法</p>
<p><br><div><br> {{ 'HelloTrans' | translate }}<br></div></p>
<p>而在.ts要抓取翻譯檔定義則需要使用Service</p>
<p>translate.get('HelloTrans').subscribe((val: string) => {<br> console.log('HelloTrans',val);<br>});<br></p>
<h2> </h2>
<h2>切換語系</h2>
<p>而切換語系也很簡單,我們在html加入兩個按鈕</p>
<p><button class="btn btn-primary" (click)="changeLang('en')">切換語系至English</button><br><button class="btn btn-primary" (click)="changeLang('zh')">切換語系至中文</button></p>
<p>在app.component.ts增加changeLang這個method</p>
<p>changLang(langKey){<br> this.translate.use(langKey);<br>}<br></p>
<p>這樣就可以完成語系切換,而當使用者重新整理網頁時要怎麼維持當前語系呢? 通常我會使用localStorage來處理,譬如在app.conponent.ts底下改成如下:</p>
<p><a href="https://lh3.googleusercontent.com/-tqFuUBLsBfE/WDEUr1YDiXI/AAAAAAAADYc/fXmiYD4725Y/s1600-h/Image.png"><img title="螢幕快照 2016-11-20 上午11.07.24" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="螢幕快照 2016-11-20 上午11.07.24" src="https://lh3.googleusercontent.com/-Xf0sq1WHZQs/WDEUto7ORHI/AAAAAAAADYg/rSt1pG4nFNc/Image.png?imgmax=800" width="644" height="214"></a></p>
<h2> </h2>
<h2>後記</h2>
<p>使用多國語系一點也不複雜,而且因為是使用Angular2開發,如果您有在寫ionic2 要在App做多國語系也是差不多的步驟~</p>
<p>而.json檔通常是給專業的翻譯,這部分可以找一些線上工具,將excel樣板提供給翻譯人員完成,之後再將excel檔轉成json檔,後續也較好維護。</p>
<p>至於i18n的語系代碼可參考 <a title="http://www.science.co.il/Language/Codes.php" href="http://www.science.co.il/Language/Codes.php">http://www.science.co.il/Language/Codes.php</a></p>
<p>--
<p>本次範例程式 : <a href="https://github.com/kyleap/angular-learn-sample">https://github.com/kyleap/angular-learn-sample</a></p>Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com2tag:blogger.com,1999:blog-2224001206258991308.post-56487490058949956332016-11-10T21:57:00.001-08:002018-03-30T08:07:05.585-07:00[Angular2] 在angular-cli專案加入第三方套件-以jQuery及Bootstrap為例<h2>
前言</h2>
接觸angular後其實真的很少寫jQuery,但很多時候拿到的html版可能是UI設計師所提供的,或者是花錢買的樣板,所以免不了要用jQuery寫入一些效果,本篇就簡單介紹一些如何在angular-cli專案加入第三方的.js .css.<br />
如何建立範本請參考 <a href="http://kyleap.blogspot.tw/2016/10/angular2.html">[Angular2] 建立專案範本</a><br />
<h2>
webpack</h2>
angular2是個模組化的開發方式,透過angular-cli所建置的專案已改由system.js改由<a href="https://webpack.github.io/">webpack</a>,以往要在angular2專案加入webpack,你必需要去了解webpack的建置環境,這對於一個全端工程師來說是個很焦慮的事XD,因為webpack要懂得的東西還真的不少,好在angular-cli已幫我們整合好,只要懂得用他的指令即可,而angular-cli相關webpack設定檔都至於node_modules底下,而webpack本身還有許多額外的套件,如果要增加的話不建議直接改node_modules這些設定檔,可在專案底下加入會比較彈性一點。<br />
<a href="https://lh3.googleusercontent.com/-2ukyAPN2JPM/WCVdmrVxHgI/AAAAAAAADW0/PmUwc4wagLQ/s1600-h/Image.png"><img alt="螢幕快照 2016-11-11 下午1.08.32" border="0" height="484" src="https://lh3.googleusercontent.com/-NW8yOIPOhFQ/WCVdni46IOI/AAAAAAAADW4/N3rvgf0X6JY/Image.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="螢幕快照 2016-11-11 下午1.08.32" width="321" /></a><br />
angular.cli.json<br />
webpack會將我們相依的程式及模組打包成一隻.js減少request,而以下就介紹如何在專案下加入jQuery及bootstrap<br />
先用yarn將jQuery及bootstrap安裝回來<br />
<blockquote>
# yarm是完全相依npm的套件管理工具,執行上比npm快非常多,可參考<a href="https://www.google.com.tw/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=yarn+npm">此篇文章</a></blockquote>
$ yarn add jQuery bootstrap<br />
package.json<br />
<a href="https://lh3.googleusercontent.com/-EsTPwq8GXv4/WCVdo4cK_fI/AAAAAAAADW8/tyXnwo5jyRQ/s1600-h/Image.png"><img alt="螢幕快照 2016-11-11 下午1.20.48" border="0" height="484" src="https://lh3.googleusercontent.com/-rMGTGhbPnh8/WCVdrQJE15I/AAAAAAAADXA/4nc-5xyUEWE/Image.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="螢幕快照 2016-11-11 下午1.20.48" width="578" /></a><br />
在angular.cli.json 加入路徑<br />
"styles": [<br /> "styles.css",<br /> "../node_modules/bootstrap/dist/css/bootstrap.min.css"<br /> ],<br /> "scripts": [<br /> "../node_modules/jquery/dist/jquery.min.js"<br />],<br />
接著我們app.component.html加入一個bootstrap的Button (強烈建議編輯器要安裝snippet套件快速開發)<br />
<a href="https://lh3.googleusercontent.com/-VGLb-v7aKYQ/WCVdtO09ckI/AAAAAAAADXE/m4HUEirvL_0/s1600-h/Image.png"><img alt="螢幕快照 2016-11-11 下午1.31.47" border="0" height="371" src="https://lh3.googleusercontent.com/-_ZngCvx7eG0/WCVdtxfZbeI/AAAAAAAADXI/6lAP0bZBeyY/Image.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="螢幕快照 2016-11-11 下午1.31.47" width="644" /></a><br />
ng serve 啟動本機伺服器 可以看到已套用bootstrap<br />
<a href="https://lh3.googleusercontent.com/-kopQRwERG3E/WCVdul7LQKI/AAAAAAAADXM/cfFDy5doujo/s1600-h/Image.png"><img alt="螢幕快照 2016-11-11 下午1.34.46" border="0" height="126" src="https://lh3.googleusercontent.com/-2zOQ6gkyNMk/WCVdvYDgKDI/AAAAAAAADXQ/hApDB1lDNEc/Image.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="螢幕快照 2016-11-11 下午1.34.46" width="244" /></a><br />
接著在app.component.ts加入jQuery試試<br />
<a href="https://lh3.googleusercontent.com/-2gmT3kvYzQI/WCVdwWPLU9I/AAAAAAAADXU/ML9f30G2tiw/s1600-h/Image.png"><img alt="螢幕快照 2016-11-11 下午1.36.38" border="0" height="270" src="https://lh3.googleusercontent.com/-6r6VMiLxh6g/WCVdxL65P5I/AAAAAAAADXY/mXAEGtP1J_k/Image.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="螢幕快照 2016-11-11 下午1.36.38" width="644" /></a><br />
這時你會發現 $ 字號有毛毛蟲 這是因為Typescript是強行別的開發方式,檢查會變得較為嚴謹,任何開發尚未定義的變數都會在編譯時期就出錯。<br />
而要讓Typescript看得懂 $ 字號為jQuery其實只要宣告一下就好了:<br />
<pre><code>declare var $:any;</code></pre>
<h2>
<code>TypeScript With jQuery</code></h2>
<pre><code>而宣告成any還不夠帥,且每支檔案都要宣告一次還挺麻煩的,我們可以將此宣告移到一個全域的地方,</code></pre>
<pre><code>並且載入Typescript的jQuery設定檔定義檔,讓開發起來更順手</code></pre>
<pre><code>安裝jQuery Typescript定義檔:</code></pre>
<pre>$ yarn add @types/jquery</pre>
<pre>找到src/tsconfig.js,有關Typescript的設定都會在這檔案,加入types</pre>
"types": [<br /> "jquery"<br /> ]<br />
接著回到app.componet.ts,會看到有關jQuery語法都開始會有智慧提示功能 (VS Code Rock!!)<br />
<a href="https://lh3.googleusercontent.com/-4sPyo8xjl6Q/WCVdyXVRr-I/AAAAAAAADXc/70kRTjtMiu8/s1600-h/Image.png"><img alt="螢幕快照 2016-11-11 下午1.50.22" border="0" height="354" src="https://lh3.googleusercontent.com/--5G_2ZBlDL4/WCVdzST2lTI/AAAAAAAADXg/a88TDHM3MQQ/Image.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="螢幕快照 2016-11-11 下午1.50.22" width="644" /></a><br />
在執行一次ng serve,即可看到jQuery正常執行<br />
<a href="https://lh3.googleusercontent.com/-kSU711ybF0s/WCVdz6KR-JI/AAAAAAAADXk/aNh_NuvP0do/s1600-h/Image.png"><img alt="螢幕快照 2016-11-11 下午1.52.03" border="0" height="45" src="https://lh3.googleusercontent.com/-fOUuhlz93Eg/WCVd0r75NRI/AAAAAAAADXo/bULsd-JAmIE/Image.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="螢幕快照 2016-11-11 下午1.52.03" width="244" /></a><br />
原則上Typescript用第三方函示庫就要有相對應的.d.ts定義檔,如果該函示庫如果沒有定義檔也可以自行製作一個<br />
可參考保哥的教學影片 <a href="https://www.youtube.com/watch?v=_9fUQus6EqQ" title="https://www.youtube.com/watch?v=_9fUQus6EqQ">https://www.youtube.com/watch?v=_9fUQus6EqQ</a><br />
或者是可以考慮在src/typings.d.ts進行全域的宣告也可<br />
--<br />
本次範例程式 : <a href="https://github.com/kyleap/angular-learn-sample">https://github.com/kyleap/angular-learn-sample</a>Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com12tag:blogger.com,1999:blog-2224001206258991308.post-30129148154440540252016-10-15T02:55:00.001-07:002016-10-15T03:09:43.628-07:00[Angular2] 在每個Request加入自訂的Header資訊<h2>前言</h2> <p>開發架構都偏向後端是個REST API,而要做到身分驗證必須要走OAuth協定,而我們系統採用的是 <a href="https://tools.ietf.org/html/rfc6750">Bearer Token</a> ,Client 像 Server 端取得Access Token後,只要在Header加入Key 為 Authorization的格式,就能判斷該Request的登入身分,而這個 Header的Value 會長這樣 </p><pre><code>Bearer XXXXXXXX</code></pre><pre><code>而在Angular2如何在每次像API發送Request的時候怎麼夾帶這個資訊呢?</code></pre><pre><code>範本安裝請參考 : <a title="http://kyleap.blogspot.tw/2016/10/angular2.html" href="http://kyleap.blogspot.tw/2016/10/angular2.html">http://kyleap.blogspot.tw/2016/10/angular2.html</a></code></pre><pre><code><font color="#9bbb59">== 前端版號很重要 ==</font></code></pre>
<p>angular-cli: 1.0.0-beta.17<br>node: 6.6.0<br>angular : 2.0.0</p><pre><code><font color="#9bbb59">== 前端版號很重要 ==</font></code></pre>
<h3><code>1. 於app目錄加入app.request.ts,並加入以下程式</code></h3>
<h3><code></code> </h3>
<h3><code><a href="https://lh3.googleusercontent.com/-Os3fNQNAIEI/WAH8_ZK4v8I/AAAAAAAADTQ/5Dk3dQyk68k/s1600-h/Image.png"><img title="螢幕快照 2016-10-15 下午5.14.07" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="螢幕快照 2016-10-15 下午5.14.07" src="https://lh3.googleusercontent.com/-toNYOGDIumw/WAH9AeVRniI/AAAAAAAADTU/OGbORdhyxXI/Image.png?imgmax=800" width="644" height="216"></a></code></h3>
<p><code>自訂的AppRequestOptions繼承(extends)BaseRequestOptions Class,並執行底層Class的建構(super()),而如有登入過通常我會將OAuth所回傳的Token資訊存在localStorage,故判斷如果有資料的話則在Headers加入Authorization</code>。</p>
<p>2. 於app.module.ts 注入app.reqequest</p>
<p><a href="https://lh3.googleusercontent.com/-qfkyNCYNmj0/WAH9Aphs_3I/AAAAAAAADTY/io7RKu0893o/s1600-h/Image.png"><img title="螢幕快照 2016-10-15 下午5.33.00" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="螢幕快照 2016-10-15 下午5.33.00" src="https://lh3.googleusercontent.com/-npY7B1aaXFw/WAH9B65G5NI/AAAAAAAADTc/h3dFR3Zi1zM/Image.png?imgmax=800" width="644" height="81"></a></p>
<p><a href="https://lh3.googleusercontent.com/-GRMgoOXxaeU/WAH9CmPZHxI/AAAAAAAADTg/B0FDF6t_5nY/s1600-h/Image.png"><img title="螢幕快照 2016-10-15 下午5.37.07" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="螢幕快照 2016-10-15 下午5.37.07" src="https://lh3.googleusercontent.com/-YNvWRwAz_bw/WAH9Du6gWTI/AAAAAAAADTk/Q2EC2VHOsRU/Image.png?imgmax=800" width="644" height="400"></a></p>
<p><code>http模組加入RequestOptions及匯入剛剛的app.request.ts及於App Module注入即可</code></p>
<p><code>接著打開瀏覽器開發工具,就可以看到http發送Request後就可以看到Header多了Authorization</code></p>
<p><code><a href="https://lh3.googleusercontent.com/-wwEMMHskfao/WAH9EY_2B8I/AAAAAAAADTo/FOo94Spmp-g/s1600-h/Image.png"><img title="螢幕快照 2016-10-15 下午5.44.54" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="螢幕快照 2016-10-15 下午5.44.54" src="https://lh3.googleusercontent.com/-46FNaMBU8Cw/WAH9FUwwG9I/AAAAAAAADTs/X8nFhYsm26M/Image.png?imgmax=800" width="644" height="232"></a></code></p>
<h3><code>後記</code></h3>
<p><code></code></p>
<p><code>這個方法可以很容易的帶入我們要的Header資訊,而還有另一個方式是自訂一個Http Provider,有機會再寫另一篇分享</code></p>
<p><code>本次範例程式 : <a title="https://github.com/kyleap/angular-learn-sample" href="https://github.com/kyleap/angular-learn-sample">https://github.com/kyleap/angular-learn-sample</a></code></p>
<p><code>--</code></p>
<p><code>References</code></p>
<p><a title="https://angular.io/docs/ts/latest/api/http/index/BaseRequestOptions-class.html" href="https://angular.io/docs/ts/latest/api/http/index/BaseRequestOptions-class.html">https://angular.io/docs/ts/latest/api/http/index/BaseRequestOptions-class.html</a></p>
<h3><code></code> </h3>
<h3><code></code> </h3><pre><code></code> </pre><pre><code></code> </pre><pre><code></code> </pre>Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com0tag:blogger.com,1999:blog-2224001206258991308.post-62822297455283981802016-09-28T07:36:00.000-07:002016-11-19T19:21:07.992-08:00[Angular2] 建立專案範本<h2>前言</h2> <p>身為一個全端工程師,除了網站前後端外,在專案上開始也有開發App的需求,在過去我們團隊使用Angular來撰寫前端程式,後端採用ASP.NET Web API,而App我們使用Cordova搭配ionic 。但專案進入維護期,有新人也加入了,但因為Angular學習曲線有點太高,導致會不太好上手,且專案一大,因為是使用JavaScript開發,如果對於JavaScript特性不太熟悉,很容易掉入地獄裡面。在今年評估Angular2後,決定狠下心從將Angular1重構成Angular2專案,因為是搭配TypeScript來開發,搭配編輯器的功能,讓有些錯誤可以在編譯時期,且編輯器自動完成功能讓開發起來更加順手,對於TypeScript有種相間恨晚的感覺,應該在Angular1時間就使用TypeScript來撰寫會比較順手。</p> <p>Angular2學習曲線我認為也不低,複雜在於"開發環境",他將自己定位成平台,所以整合很多的open source技術進來,但就一個團隊新人來講,開發環境並不是首要去了解的,很多事情都定義成腳本,只要會使用就可以。就程式撰寫上,Angular2的學習曲線我覺得大大的降低,且因為官方就訂了很多程式開發標準.建議,讓使用Agnular2開發的人都有一致的開發風格,這也是後來在github看別人專案也能很快看懂的原因。</p> <p>目前(2016年)也已經進入正式版,這篇文章算是一個開始,我陸續想將開發上所撰寫的功能及採到的地雷,整理成一篇一篇的小筆記,而不免俗的來Hello Word一下,讓之後demo的Sample Code都以此篇的專案範本來撰寫。</p> <h2>建立Angular2專案範本</h2> <p>使用前請安裝<a href="https://nodejs.org/en/">Node.js</a> 會一併安裝NPM</p> <p>可以用指令確認版本</p> <p><a href="https://lh3.googleusercontent.com/-uJmMtxwDBnY/V_kEUHJizeI/AAAAAAAADSo/JqDtf9PrmEcVIxQ9JZT5RR6rWVpvDD-_gCHM/s1600-h/Image"><img title="螢幕快照 2016-10-08 下午9.46.40" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="螢幕快照 2016-10-08 下午9.46.40" src="https://lh3.googleusercontent.com/-siMlN7OtmAc/V_kEVM9Z89I/AAAAAAAADSs/mC6zzjyHoOk-4-Mw75bRB1voDU80BadmwCHM/Image?imgmax=800" width="644" height="229"></a></p> <p>透過NPM安裝 Angular-cli</p> <p>npm install –g angular-cli</p> <p>ng –v 確認版本</p> <p><a href="https://lh3.googleusercontent.com/-jf_7MWw9YQ8/V_kEVm6kxuI/AAAAAAAADSw/VyRoey0V89sxI2c2Gy45aR1gIf-hqYV_ACHM/s1600-h/Image"><img title="螢幕快照 2016-10-08 下午9.48.16" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="螢幕快照 2016-10-08 下午9.48.16" src="https://lh3.googleusercontent.com/-BEHfKykyLDA/V_kEVz0P_QI/AAAAAAAADS0/FYwQ3h_Zg_INA7jUIynuNZTz9MrN-rqmwCHM/Image?imgmax=800" width="644" height="154"></a></p> <p>ng new mydemo 建立專案<br>cd mydemo 進入資料夾<br>ng serve 啟動本機localserver</p> <p>用瀏覽器開啟<a title="http://localhost:4200/" href="http://localhost:4200/">http://localhost:4200/</a></p> <p>如果有出現app work!畫面代表成功。</p> <p>--</p> <p>本篇利用Angular-cli很簡單的建立範本讓之後的文章做參考,</p> <p>建議可以參考 <a href="https://angular.io/docs/ts/latest/tutorial/">Angular2官網手把手接學</a> 照步驟做完應該就會開發了XD </p> <p>也可以參考<a href="http://blog.miniasp.com/post/2016/07/26/Introduction-to-Angular-2.aspx">保哥的文章</a>,整理很多Angular2觀念及延伸學習資源</p> <h2>文章索引連結(陸續新增)</h2> <h3><font color="#ffc000">Angular 2</font></h3> <p><a href="http://kyleap.blogspot.tw/2016/10/angular2-requestheader.html">[Angular2] 在每個Request加入自訂的Header資訊</a></p> <p><a href="http://kyleap.blogspot.tw/2016/11/angular2-angular-cli-jquerybootstrap.html">[Angular2] 在angular-cli專案加入第三方套件-以jQuery.Bootstrap為例</a></p> <p><a href="http://kyleap.blogspot.tw/2016/11/angular2.html">[Angular2] 在專案加入多國語系</a> <p> <h3><font color="#ffc000">Ionic 2</font></h3>Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com2tag:blogger.com,1999:blog-2224001206258991308.post-73911935287499679232016-01-07T09:06:00.001-08:002016-01-09T22:53:04.920-08:00[Web API] 在 Swagger UI 送出Http Header資訊<h2>Swagger</h2> <p>之前開發Web API,都是透過<a href="https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop">Chome Postman</a>來測試API,測試無誤後,將他儲存Collections再匯出給其他同事繼續開發前端部分,但前陣子發現Swagger這個好物,可以將註解直接變成文件,且可以直接在介面發送Request,查看Response,真的省了不少時間,至於怎麼在VS安裝使用,有很多前輩都分享了:</p> <p><a href="http://blog.kkbruce.net/2015/04/aspnet-web-api-2-swagger.html#.Vo6TmhV96Uk">KingKong Bruce記事 - ASP.NET WEB API 文件產生器(2) – SWAGGER</a></p> <p><a href="http://kevintsengtw.blogspot.tw/2015/12/aspnet-web-api-swagger.html">mrkt 的程式學習筆記 - ASP.NET Web API 文mrkt 的程式學習筆記件產生器 - 使用 Swagger</a></p> <p>但在開發App通常我會在Header加入Token來驗證是否有存取API的權限,但發現Swagger無法在UI直接加入我要傳入的Header資訊。</p> <p><a href="https://lh3.googleusercontent.com/-uKKI1nwlyLE/Vo6a0EEGdpI/AAAAAAAADEw/Ybv1iTqPMuk/s1600-h/b64347a88e264b6383b9d05e0ef9ee56%25255B3%25255D.png"><img title="b64347a88e264b6383b9d05e0ef9ee56" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="b64347a88e264b6383b9d05e0ef9ee56" src="https://lh3.googleusercontent.com/-1Q_7N8kxxVQ/Vo6a047IpsI/AAAAAAAADE0/blTnVIOyTV4/b64347a88e264b6383b9d05e0ef9ee56_thumb%25255B1%25255D.png?imgmax=800" width="644" height="214"></a></p> <p>沒有這欄位,只好硬幹了,以下就依步驟紀錄一下</p> <p>首先先在你的ASP.NET網站底下加入一個scripts (當然存放位置可以依你而定),在這個js上點右鍵,建置動作改成內嵌資源</p> <p><a href="https://lh3.googleusercontent.com/-VVtH0hBxPGI/Vo6a1TZSAmI/AAAAAAAADE8/YN7LYZY6LLE/s1600-h/45276f387cbe488aa218e0106e5d3121%25255B3%25255D.png"><img title="45276f387cbe488aa218e0106e5d3121" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="45276f387cbe488aa218e0106e5d3121" src="https://lh3.googleusercontent.com/-dCK5d-5XJA8/Vo6a2-U6VNI/AAAAAAAADFI/7uAWe8Doldc/45276f387cbe488aa218e0106e5d3121_thumb%25255B1%25255D.png?imgmax=800" width="495" height="484"></a></p> <p>接著找到App_Start\SwaggerConfig.cs底下,找到181行,取消註解 c.InjectJavaScript</p> <p>將字串改為你的專案名稱及存放的Namespace</p> <p><a href="https://lh3.googleusercontent.com/-GveO4HaSmvI/Vo6a3hG9kwI/AAAAAAAADFQ/su2-k27gbik/s1600-h/b9a21869aed84e1c97cea378f6c5ba75%25255B3%25255D.png"><img title="b9a21869aed84e1c97cea378f6c5ba75" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="b9a21869aed84e1c97cea378f6c5ba75" src="https://lh3.googleusercontent.com/-gHCuEiQQDEs/Vo6a44Ob0iI/AAAAAAAADFY/02Baep8uCsU/b9a21869aed84e1c97cea378f6c5ba75_thumb%25255B1%25255D.png?imgmax=800" width="644" height="161"></a></p> <p>Swagger預設已經掛載jQuery,所以我們在swagger-header.js寫些程式</p> <p>右上角有個api_key的欄位,此欄位的用途在於調用API的時候自動幫你帶api_key這個參數</p> <p><a href="https://lh3.googleusercontent.com/-uqkRgIwMGkI/Vo6a5oV5C7I/AAAAAAAADFg/695xBKmBfOc/s1600-h/a7602f2645a340539e15aace6d6e2143%25255B3%25255D.png"><img title="a7602f2645a340539e15aace6d6e2143" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="a7602f2645a340539e15aace6d6e2143" src="https://lh3.googleusercontent.com/-LX0DXG5EHCk/Vo6a6f8TEtI/AAAAAAAADFo/YlsULeA58xo/a7602f2645a340539e15aace6d6e2143_thumb%25255B1%25255D.png?imgmax=800" width="644" height="409"></a></p> <p>這個我們用不到,所以我們在js寫個程式把它隱藏,然後插入兩個DOM: Header Name跟Header Value的textbox</p> <p><a href="https://lh3.googleusercontent.com/-c0n2VAB-Jq0/Vo6cNpNKSyI/AAAAAAAADHE/L6XM8_trGwg/s1600-h/7760e2a4cd52476a984e81b27da9bce2%25255B4%25255D.png"><img title="7760e2a4cd52476a984e81b27da9bce2" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="7760e2a4cd52476a984e81b27da9bce2" src="https://lh3.googleusercontent.com/-zk6IuVbMGKw/Vo6cOxdrY7I/AAAAAAAADHM/2QMr2Q0LOsk/7760e2a4cd52476a984e81b27da9bce2_thumb%25255B2%25255D.png?imgmax=800" width="1028" height="178"></a></p> <p>畫面就會變這樣:</p> <p><a href="https://lh3.googleusercontent.com/-3aVt6SoClyw/Vo6a8p7F2BI/AAAAAAAADF4/r-1nrK5aSbQ/s1600-h/1c341f6896804aa2bd49f17593cb3c9d%25255B3%25255D.png"><img title="1c341f6896804aa2bd49f17593cb3c9d" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="1c341f6896804aa2bd49f17593cb3c9d" src="https://lh3.googleusercontent.com/-EykrUeEZsY0/Vo6a9aSB6EI/AAAAAAAADGI/SGbj2C4gwP8/1c341f6896804aa2bd49f17593cb3c9d_thumb%25255B1%25255D.png?imgmax=800" width="644" height="122"></a></p> <p>接著我們將這兩個textbox change的時候,透過Swagger的API加入Header資訊</p> <p><a href="https://lh3.googleusercontent.com/-_n94MyKOcBU/Vo6a-LshTNI/AAAAAAAADGQ/MJM-rxTJ5w0/s1600-h/d08e8a91839c474f87a751922409c38d%25255B5%25255D.png"><img title="d08e8a91839c474f87a751922409c38d" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="d08e8a91839c474f87a751922409c38d" src="https://lh3.googleusercontent.com/-c1qv58IvyVU/Vo6a_MzNAUI/AAAAAAAADGY/Z-8eJKY667E/d08e8a91839c474f87a751922409c38d_thumb%25255B3%25255D.png?imgmax=800" width="1028" height="376"></a></p> <p>這樣再發送Request的時候就會看到Header的值:</p> <p><a href="https://lh3.googleusercontent.com/-NeugIWMkGrA/Vo6cQVhs04I/AAAAAAAADHU/Ol7Gu9hHGSo/s1600-h/1ec69a5aaa4c4d01aed6f33f94e5737d%25255B4%25255D.png"><img title="1ec69a5aaa4c4d01aed6f33f94e5737d" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="1ec69a5aaa4c4d01aed6f33f94e5737d" src="https://lh3.googleusercontent.com/-gLc90w1Hk3E/Vo6cRnoX7cI/AAAAAAAADHc/3DPSKXqysGw/1ec69a5aaa4c4d01aed6f33f94e5737d_thumb%25255B2%25255D.png?imgmax=800" width="1028" height="570"></a></p> <p>可以用Chome的開發者工具至Network查看</p> <p><a href="https://lh3.googleusercontent.com/-K5m8B3JmrDE/Vo6cSuzZS-I/AAAAAAAADHk/sQiT28b1XdM/s1600-h/12770befe8824361949bb9fffe381b6b%25255B4%25255D.png"><img title="12770befe8824361949bb9fffe381b6b" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="12770befe8824361949bb9fffe381b6b" src="https://lh3.googleusercontent.com/--SIoa3BxWVA/Vo6cTl-K59I/AAAAAAAADHs/qoYxfUpmsOw/12770befe8824361949bb9fffe381b6b_thumb%25255B2%25255D.png?imgmax=800" width="1028" height="220"></a></p> <p>知道怎麼用jQuery去改UI,就可以依你的需求去調整硬幹了~</p> <p>--</p> <p>References :</p> <p><a title="http://stevemichelotti.com/customize-authentication-header-in-swaggerui-using-swashbuckle/" href="http://stevemichelotti.com/customize-authentication-header-in-swaggerui-using-swashbuckle/">http://stevemichelotti.com/customize-authentication-header-in-swaggerui-using-swashbuckle/</a> </p> <div id="scid:77ECF5F8-D252-44F5-B4EB-D463C5396A79:14a6a234-b68b-472e-b186-744f929882cb" class="wlWriterEditableSmartContent" style="float: none; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; display: inline; padding-right: 0px">Technorati Tags: <a href="http://technorati.com/tags/Web+API+Swagger+Http+Header+JavaScript" rel="tag">Web API Swagger Http Header JavaScript</a></div>Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com0tag:blogger.com,1999:blog-2224001206258991308.post-22560501121055125222015-10-25T00:14:00.001-07:002015-10-25T00:15:24.401-07:00Cordova 環境安裝 (OSX)<p><font face="Arial">安裝Node.js</font></p> <p><a title="https://nodejs.org/en/" href="https://nodejs.org/en/">https://nodejs.org/en/</a></p> <p>於terminal輸入 node -v 確認版本</p> <p> <hr> </p> <p>於App Store 安裝XCode,安裝IOS開發環境</p> <p> <hr> </p> <p>安裝JAVA SDK</p> <p><a title="https://support.apple.com/downloads/#java" href="https://support.apple.com/downloads/#java">https://support.apple.com/downloads/#java</a></p> <p>於terminal輸入javac –version 確認版本</p> <p> <hr> </p> <p><font size="3" face="微軟正黑體">安裝Apache Ant</font></p> <p>安裝 Homebrew</p> <p><a title="http://brew.sh/" href="http://brew.sh/">http://brew.sh/</a></p> <p>terminal</p> <p>ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"</p> <p>brew install ant 透過brew安裝ant</p> <p>於terminal輸入 ant –version確認版本</p> <p> <hr> </p> <p><font size="3" face="微軟正黑體">安裝Android SDK Tools</font></p> <p><a title="http://developer.android.com/intl/zh-tw/sdk/index.html#Other" href="http://developer.android.com/intl/zh-tw/sdk/index.html#Other">http://developer.android.com/intl/zh-tw/sdk/index.html#Other</a></p> <p>進入bash_profile設定</p> <p>cd<br>nano .bashrc</p> <p>依照路徑指定platform-tools及tools位置</p> <p>export PATH=/Users/username/android/sdk/platform-tools:/Users/username/android/sdk/tools:$PATH</p> <p>輸入CTRL+O . CTRL+X 儲存</p> <p>nano .bash_profile 確認export是否正確</p> <p> <hr> </p> <p><font size="3" face="微軟正黑體">terminal</font></p> <p><font size="3" face="微軟正黑體">adb version 確認版本</font></p> <p>android 開啟 Android SDK Manager</p> <p>安裝packges</p> <p> <hr> </p> <p><font size="3" face="微軟正黑體">測試Cordova</font></p> <p>cordova create MyApp <p>cd MyApp <p>cordova platform add android (或ios) <p>cordova build android (或ios) <p>cordova run android (或ios) <p> </p> <div id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:6edc2a0e-8f00-45c2-a436-806aa9d043b3" class="wlWriterEditableSmartContent" style="float: none; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; display: inline; padding-right: 0px">Technorati 的標籤: <a href="http://technorati.com/tags/visual+studio+2015" rel="tag">visual studio 2015</a>,<a href="http://technorati.com/tags/cordova" rel="tag">cordova</a>,<a href="http://technorati.com/tags/ios" rel="tag">ios</a>,<a href="http://technorati.com/tags/xcode" rel="tag">xcode</a></div> Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com0tag:blogger.com,1999:blog-2224001206258991308.post-5341421413815824952015-10-24T23:55:00.001-07:002015-10-25T00:00:34.816-07:00Cordova 環境安裝 (Windows)<p>如果你是.NET開發人員,慣於習慣使用Visual Studio開發,那2015版本已經將Cordova整合在裡面,安裝Apache Corodva Tools則可將Cordova所需的環境安裝完成,預設是不會安裝的,故在安裝VS的時候需額外勾選</p> <p>Visual Studio 2015 Community下載</p> <p><a title="https://www.visualstudio.com/zh-tw/products/visual-studio-community-vs.aspx" href="https://www.visualstudio.com/zh-tw/products/visual-studio-community-vs.aspx">https://www.visualstudio.com/zh-tw/products/visual-studio-community-vs.aspx</a></p> <p><a href="http://lh3.googleusercontent.com/-4dwDRixdQgY/Vix8hfGTliI/AAAAAAAAC6w/akHkmYQ7RyA/s1600-h/9a2914a584874e0f86dc913ad6cd45d3%25255B3%25255D.png"><img title="9a2914a584874e0f86dc913ad6cd45d3" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="9a2914a584874e0f86dc913ad6cd45d3" src="http://lh3.googleusercontent.com/-5iURNOLdIHc/Vix8hyU1ElI/AAAAAAAAC60/X7M_GiWIA8Y/9a2914a584874e0f86dc913ad6cd45d3_thumb%25255B1%25255D.png?imgmax=800" width="347" height="484"></a></p> <p>如果你不是.NET開發人員,在開發Cordova前,需先依序安裝以下環境:</p> <p><strong>安裝Node.js</strong></p> <p><a title="https://nodejs.org/en/" href="https://nodejs.org/en/">https://nodejs.org/en/</a></p> <p>安裝完後,可於命令提示字元輸入 node – -v 確認版本</p> <p><a href="http://lh3.googleusercontent.com/-cknvdVsT3hQ/Vix8iRBLhMI/AAAAAAAAC68/hSqcqUxF7Qg/s1600-h/0a4e04010d0e480fb39bece08f5ebff5%25255B2%25255D.png"><img title="0a4e04010d0e480fb39bece08f5ebff5" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="0a4e04010d0e480fb39bece08f5ebff5" src="http://lh3.googleusercontent.com/-vwbzhkaCs-g/Vix8jWJVcNI/AAAAAAAAC7I/ZSR9FQuBgHg/0a4e04010d0e480fb39bece08f5ebff5_thumb.png?imgmax=800" width="200" height="69"></a></p> <hr> <p><strong>安裝git client</strong></p> <p><a title="http://git-scm.com/" href="http://git-scm.com/">http://git-scm.com/</a></p> <p>安裝完後,可於命令提示字元輸入 git –version 確認版本</p> <p><a href="http://lh3.googleusercontent.com/-7dYihYhfpOo/Vix8j403u0I/AAAAAAAAC7Q/hW0mzStbb3c/s1600-h/a70aed640a684e46a408e2ec59023613%25255B2%25255D.png"><img title="a70aed640a684e46a408e2ec59023613" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="a70aed640a684e46a408e2ec59023613" src="http://lh3.googleusercontent.com/-Fi24TGhiI8Q/Vix8kp-UMgI/AAAAAAAAC7Y/2omdSt8FXuw/a70aed640a684e46a408e2ec59023613_thumb.png?imgmax=800" width="236" height="111"></a></p> <hr> <p>透過NPM安裝Cordova套件</p> <p>NPM會於安裝Node.js一併安裝</p> <p>npm install -g cordova</p> <p>cordova -v 確認版本</p> <p><a href="http://lh3.googleusercontent.com/-mD15INaWiwQ/Vix8lrdo4bI/AAAAAAAAC7g/cqqN9-Cgx98/s1600-h/24cccd560f8a49d1a4f90965b678f624%25255B3%25255D.png"><img title="24cccd560f8a49d1a4f90965b678f624" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="24cccd560f8a49d1a4f90965b678f624" src="http://lh3.googleusercontent.com/-ciKpVAio66Y/Vix8mssCanI/AAAAAAAAC7o/UQXvJkqrx0A/24cccd560f8a49d1a4f90965b678f624_thumb%25255B1%25255D.png?imgmax=800" width="644" height="447"></a></p> <hr> <p>安裝 Java JDK</p> <p><a title="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html" href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html">http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html</a></p> <p><a href="http://lh3.googleusercontent.com/-1dg3nrKlQ2I/Vix8n_51S6I/AAAAAAAAC7w/SwwDOWLb4iU/s1600-h/49a032edea164c118779ff79178c646e%25255B3%25255D.png"><img title="49a032edea164c118779ff79178c646e" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="49a032edea164c118779ff79178c646e" src="http://lh3.googleusercontent.com/-Hv1FnkIQ54w/Vix8oiA7FLI/AAAAAAAAC74/QwA6eluKtVQ/49a032edea164c118779ff79178c646e_thumb%25255B1%25255D.png?imgmax=800" width="493" height="484"></a></p> <p>設定環境變數PATH</p> <p>設定JDK安裝路徑,加於分號之後<br>;C:\Program Files\Java\jdk1.8.0_65\bin</p> <p><a href="http://lh3.googleusercontent.com/-jWCMuyXaQhI/Vix8pXAnSdI/AAAAAAAAC78/0LhEziHx9No/s1600-h/398d2319bbbe4daea0b0e1173e32cefa%25255B3%25255D.png"><img title="398d2319bbbe4daea0b0e1173e32cefa" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="398d2319bbbe4daea0b0e1173e32cefa" src="http://lh3.googleusercontent.com/-eJv1Az8XKhE/Vix8qEwRXYI/AAAAAAAAC8I/RdvcQDZP8lc/398d2319bbbe4daea0b0e1173e32cefa_thumb%25255B1%25255D.png?imgmax=800" width="644" height="378"></a></p> <p>新增環境變數JAVA_HOME</p> <p>C:\Program Files\Java\jdk1.8.0_65</p> <p><a href="http://lh3.googleusercontent.com/-Ui95d8NP-iQ/Vix8q0QRDEI/AAAAAAAAC8Q/1QzsGkx99Kg/s1600-h/ced72524563c4ec6b5c418932f12392c%25255B7%25255D.png"><img title="ced72524563c4ec6b5c418932f12392c" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="ced72524563c4ec6b5c418932f12392c" src="http://lh3.googleusercontent.com/-CAhVRefxiP0/Vix8rklvf8I/AAAAAAAAC8Y/2VwVQJ67vYQ/ced72524563c4ec6b5c418932f12392c_thumb%25255B3%25255D.png?imgmax=800" width="503" height="484"></a></p> <p>確認JAVA版本</p> <p>javac –version</p> <p><a href="http://lh3.googleusercontent.com/-X-vS2aq0fcI/Vix8sVcW-ZI/AAAAAAAAC8c/bBILR4RidSM/s1600-h/d572b3faef9c43009f8e789770e55943%25255B2%25255D.png"><img title="d572b3faef9c43009f8e789770e55943" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="d572b3faef9c43009f8e789770e55943" src="http://lh3.googleusercontent.com/-JK3YkD9b9Og/Vix8tCbMVWI/AAAAAAAAC8o/F0LJasikWRw/d572b3faef9c43009f8e789770e55943_thumb.png?imgmax=800" width="176" height="66"></a></p> <hr> <p>安裝 Apache Ant</p> <p><a title="http://ant.apache.org/bindownload.cgi" href="http://ant.apache.org/bindownload.cgi">http://ant.apache.org/bindownload.cgi</a></p> <p>Ant是Android的編譯程式,他為開發Andorid的必要環境</p> <p>下載.zip檔,並解壓縮,此例為放置C:\ant的位置</p> <p>設定PATH環境變數,一樣新增於分號後面</p> <p>C:\ant\apache-ant-1.9.6\bin</p> <p><a href="http://lh3.googleusercontent.com/-ONHAvfgRR2o/Vix8tvQDj0I/AAAAAAAAC8w/RcknxctW4vU/s1600-h/f8cdcaa9359c42cbb5af017cb451b130%25255B3%25255D.png"><img title="f8cdcaa9359c42cbb5af017cb451b130" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="f8cdcaa9359c42cbb5af017cb451b130" src="http://lh3.googleusercontent.com/-O7t-RJwy0Us/Vix8ujbj3EI/AAAAAAAAC84/eSyHmtCVmQg/f8cdcaa9359c42cbb5af017cb451b130_thumb%25255B1%25255D.png?imgmax=800" width="644" height="169"></a></p> <p>新增ANT_HOME環境變數</p> <p>C:\ant\apache-ant-1.9.6</p> <p><a href="http://lh3.googleusercontent.com/-2sai8ogHypk/Vix8vCjE4rI/AAAAAAAAC88/2HdMaWI2rDU/s1600-h/2c6efd116fb84cfd82f50646c8a57705%25255B3%25255D.png"><img title="2c6efd116fb84cfd82f50646c8a57705" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="2c6efd116fb84cfd82f50646c8a57705" src="http://lh3.googleusercontent.com/-YwVii8pn4b0/Vix8vz8SYaI/AAAAAAAAC9E/KTyeH4P_JsU/2c6efd116fb84cfd82f50646c8a57705_thumb%25255B1%25255D.png?imgmax=800" width="644" height="169"></a></p> <p>確認版本</p> <p><a href="http://lh3.googleusercontent.com/-B5u6El5Sv6s/Vix8wT2ZKyI/AAAAAAAAC9Q/DN8lJqPvBdk/s1600-h/cfdace1681a34766b9fa81afc3882cc0%25255B3%25255D.png"><img title="cfdace1681a34766b9fa81afc3882cc0" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="cfdace1681a34766b9fa81afc3882cc0" src="http://lh3.googleusercontent.com/-MD4k321uNIM/Vix8xRuA20I/AAAAAAAAC9Y/W0mGfogdT1Q/cfdace1681a34766b9fa81afc3882cc0_thumb%25255B1%25255D.png?imgmax=800" width="644" height="163"></a></p> <hr> <p>安裝 Android SDK Tools</p> <p><a href="http://developer.android.com/intl/zh-tw/sdk/index.html#Other">http<a href="http://developer.android.com/intl/zh-tw/sdk/index.html">://developer.android.com/intl/zh-tw/sdk/index.html#Other</a></a> <p>設定Android Path環境變數 <p>;[SDK Tools位置];[SDK platform-tools位置] <p>範例: <p>;C:\Program Files (x86)\Android\android-sdk\tools;C:\Program Files (x86)\Android\android-sdk\platform-tools <p>輸入 adb version 確認版本 <p><a href="http://lh3.googleusercontent.com/-gLA7KXXZlHw/Vix8yG0qXEI/AAAAAAAAC9g/bsx3NHjsN-c/s1600-h/30a2bc2d09b940dda01aa6a3678bcfa3%25255B2%25255D.png"><img title="30a2bc2d09b940dda01aa6a3678bcfa3" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="30a2bc2d09b940dda01aa6a3678bcfa3" src="http://lh3.googleusercontent.com/-XZhhAmMvtik/Vix8yqM3UEI/AAAAAAAAC9k/JLw2D-UyrRs/30a2bc2d09b940dda01aa6a3678bcfa3_thumb.png?imgmax=800" width="244" height="113"></a> <p>輸入android 後應會跳出SDK Manager,將建議安裝的Packges安裝完成 <p><a href="http://lh3.googleusercontent.com/-dUtHdGcxLIo/Vix8zYb7tLI/AAAAAAAAC9w/1iIgnAULIYM/s1600-h/3b322800422842f6a561f72d13f13a00%25255B3%25255D.png"><img title="3b322800422842f6a561f72d13f13a00" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="3b322800422842f6a561f72d13f13a00" src="http://lh3.googleusercontent.com/--lMDHeQexYE/Vix80YY4nYI/AAAAAAAAC94/40g1UKp8alg/3b322800422842f6a561f72d13f13a00_thumb%25255B1%25255D.png?imgmax=800" width="644" height="348"></a> <p> <hr> 測試Cordova</p> <p>在命令提示字元依序輸入,確認是否能執行模擬器</p> <p>cordova create MyApp <p>cd MyApp <p>cordova platform add android <p>cordova build <p>cordova run android </p> <p><a href="http://lh3.googleusercontent.com/-4XxWVRlZL6Q/Vix-D4VJIZI/AAAAAAAAC-E/cwWB9QuW710/s1600-h/af06b1f08d8e4ed79d05801dff8fc184%25255B2%25255D.png"><img title="af06b1f08d8e4ed79d05801dff8fc184" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="af06b1f08d8e4ed79d05801dff8fc184" src="http://lh3.googleusercontent.com/-azX9sET2LWM/Vix-ETlwlyI/AAAAAAAAC-I/cmOzZ-LCYus/af06b1f08d8e4ed79d05801dff8fc184_thumb.png?imgmax=800" width="150" height="244"></a></p> <p> <div id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:3eca4e6e-e0fd-415f-b23b-28f8a9ab52d9" class="wlWriterEditableSmartContent" style="float: none; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; display: inline; padding-right: 0px">Technorati 的標籤: <a href="http://technorati.com/tags/visual+studio+2015" rel="tag">visual studio 2015</a>,<a href="http://technorati.com/tags/cordova" rel="tag">cordova</a>,<a href="http://technorati.com/tags/java" rel="tag">java</a>,<a href="http://technorati.com/tags/android" rel="tag">android</a>,<a href="http://technorati.com/tags/windows" rel="tag">windows</a></div></p> Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com0tag:blogger.com,1999:blog-2224001206258991308.post-74482852262924869282015-08-14T09:17:00.001-07:002015-08-14T09:25:04.243-07:00用filesaver.js 輕鬆將html table的資料匯出成Excel<p>過去有關Excel的匯出我都是用<a href="https://npoi.codeplex.com/">NPOI</a>套件來撰寫,之前也有寫過類似的文章:</p> <p><a href="http://kyleap.blogspot.tw/2014/10/30aspnet-mvc-angularjs-mvc-23-npoi.html">[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(23) – NPOI匯出功能</a></p> <p>但看到同事有使用filesaver.js這個套件來做匯出,個人覺得蠻方便的,就來分享一下</p> <p>唯一有個限制,因為是用Html5的Blob來實現的,所以較舊的瀏覽器不支援</p> <p>而有些版本只要再加載<a href="https://github.com/eligrey/Blob.js">Blob.js</a>也可正常運作</p> <p><a href="http://lh3.googleusercontent.com/-I03q2b3vPe0/Vc4UZTI-HZI/AAAAAAAACzo/WLYhAa7vjd4/s1600-h/c85eee520a2e43589c3188a35b6ed0da%25255B3%25255D.png"><img title="c85eee520a2e43589c3188a35b6ed0da" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="c85eee520a2e43589c3188a35b6ed0da" src="http://lh3.googleusercontent.com/-N5IiyXMFxbw/Vc4UaCDSynI/AAAAAAAACzw/Ki2FbH6ej-o/c85eee520a2e43589c3188a35b6ed0da_thumb%25255B1%25255D.png?imgmax=800" width="644" height="403"></a></p> <p>資訊來自 <a href="https://github.com/eligrey/FileSaver.js/">filesaver.js Github</a></p> <p>官網已經有<a href="http://eligrey.com/demos/FileSaver.js/">Demo</a>示範匯出 png . txt . xhtml 的類型,以下就來實作實務上很常見的匯出table raw data</p> <p>首頁Github整個clone下來會發現filesaver.min.js這個檔案,將這個檔案載入到你的網頁</p> <p><a href="http://lh3.googleusercontent.com/-3ispQN2AmPo/Vc4UbnhmmqI/AAAAAAAACz4/VZFnQrElHMc/s1600-h/e7a4119874a646ff9c98b135453ca671%25255B3%25255D.png"><img title="e7a4119874a646ff9c98b135453ca671" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="e7a4119874a646ff9c98b135453ca671" src="http://lh3.googleusercontent.com/-TYHjr8iQi3g/Vc4UcEhl6dI/AAAAAAAAC0A/HNWExds7jso/e7a4119874a646ff9c98b135453ca671_thumb%25255B1%25255D.png?imgmax=800" width="644" height="382"></a></p> <p>接著我們寫個html假資料,並加個匯出按鈕,當然實際上你的資料來源可能是後端提供而來</p> <p><a href="http://lh3.googleusercontent.com/-LmS4u9-uetA/Vc4UdNhBbAI/AAAAAAAAC0I/rTiomzMuVfo/s1600-h/ed9c7e3d3ce34582b205dcdc3784598e%25255B3%25255D.png"><img title="ed9c7e3d3ce34582b205dcdc3784598e" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="ed9c7e3d3ce34582b205dcdc3784598e" src="http://lh3.googleusercontent.com/-AVQdt29l1wk/Vc4Ud0cNLPI/AAAAAAAAC0Q/D7mEJ9sjRUQ/ed9c7e3d3ce34582b205dcdc3784598e_thumb%25255B1%25255D.png?imgmax=800" width="644" height="123"></a></p> <p><a href="http://lh3.googleusercontent.com/-Kz4T0uQh-RI/Vc4UetnT1xI/AAAAAAAAC0Y/90Mr6L_i5Os/s1600-h/22927ec38a9544ea871d38fcf1ce6978%25255B3%25255D.png"><img title="22927ec38a9544ea871d38fcf1ce6978" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="22927ec38a9544ea871d38fcf1ce6978" src="http://lh3.googleusercontent.com/-79zEDnsnIl8/Vc4UfPIUUGI/AAAAAAAAC0g/BnzlEH5xKjQ/22927ec38a9544ea871d38fcf1ce6978_thumb%25255B1%25255D.png?imgmax=800" width="441" height="484"></a></p> <p>接著我們用jQuery button click的時候,將tbData這個div底下的資料匯出</p><pre class="brush: js;">$(function () {<br /> $('Button').click(function () {<br /> var blob = new Blob([document.getElementById('tbData').innerHTML], {<br /> type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"<br /> });<br /> var strFile = "Report.xls";<br /> saveAs(blob, strFile);<br /> return false;<br /> });<br />});</pre><br /><p>這樣就可以很方便的匯出資料了!</p><br /><p><a href="http://lh3.googleusercontent.com/-4Z4AbRhXhww/Vc4VFSvgqOI/AAAAAAAAC0o/K9Ix3YVz8AQ/s1600-h/780e1092f82642c59ffae31dead7beb5%25255B7%25255D.png"><img title="780e1092f82642c59ffae31dead7beb5" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="780e1092f82642c59ffae31dead7beb5" src="http://lh3.googleusercontent.com/-axhtsiF3N44/Vc4VFvviz_I/AAAAAAAAC0s/s1pvsOoUbDE/780e1092f82642c59ffae31dead7beb5_thumb%25255B3%25255D.png?imgmax=800" width="644" height="228"></a></p><br /><div id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:cf809cf4-7995-431e-95e1-f8acf244dfcf" class="wlWriterEditableSmartContent" style="float: none; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; display: inline; padding-right: 0px">Technorati 的標籤: <a href="http://technorati.com/tags/filesaver.js" rel="tag">filesaver.js</a>,<a href="http://technorati.com/tags/javascript" rel="tag">javascript</a>,<a href="http://technorati.com/tags/jQuery" rel="tag">jQuery</a>,<a href="http://technorati.com/tags/html" rel="tag">html</a></div> Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com2tag:blogger.com,1999:blog-2224001206258991308.post-84725285813881228822015-08-13T08:11:00.001-07:002015-08-13T08:12:27.942-07:00Visual Studio 2015 的localDB<p>好久沒更新部落格…近半年已無時間跟體力在文章上,但依然遇到一些問題還是有做一些未經整理的筆記,有時間再一一補上來分享….</p> <p>今年依然是個技術大爆發的一年,前陣子將開發環境重新安裝成 Win 10 + Visual Studio 2015後,原本在2013 Run的專案,SQL Server是用本機的localDB,但用VS 2015開已經連不上,至於什麼是localDB呢?可以看看保哥<a href="http://blog.miniasp.com/post/2012/09/03/SQL-Server-2012-Express-LocalDB-Quick-Start.aspx">這篇文章</a>:</p> <p>再以往使用localdb你的連線字串可能看起來會是這樣:</p><pre class="brush: xml;"><add name="ConnectionString" connectionString="Data Source=(localdb)\v11.0;Initial Catalog=DataBaseName;Persist Security Info=True;MultipleActiveResultSets=True;Application Name=EntityFramework" providerName="System.Data.SqlClient" /><br /></pre><br><br /><p>再VS 2015 開始有了新的命名方式,必須改用 <strong>(localdb)\MSSQLLocalDB</strong> 來取代</p><pre class="brush: xml;"><add name="ConnectionString" connectionString="Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=DataBaseName;Persist Security Info=True;MultipleActiveResultSets=True;Application Name=EntityFramework" providerName="System.Data.SqlClient" /><br /></pre><br><br /><p>當然,如果還是要用舊的執行個體,也可以下載安裝:</p><br /><p><a title="https://msdn.microsoft.com/zh-tw/sqlserver2014express.aspx" href="https://msdn.microsoft.com/zh-tw/sqlserver2014express.aspx">https://msdn.microsoft.com/zh-tw/sqlserver2014express.aspx</a></p><br /><p>--</p><br /><p>一點小筆記...<br /><div id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:e7943cd9-d10d-4455-814d-0ffc03313df9" class="wlWriterEditableSmartContent" style="float: none; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; display: inline; padding-right: 0px">Technorati 的標籤: <a href="http://technorati.com/tags/visual+studio+2015" rel="tag">visual studio 2015</a>,<a href="http://technorati.com/tags/localdb" rel="tag">localdb</a>,<a href="http://technorati.com/tags/sql+server.IDE" rel="tag">sql server.IDE</a></div></p> Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com0tag:blogger.com,1999:blog-2224001206258991308.post-84265597326585379252014-10-27T06:50:00.001-07:002014-10-27T06:58:28.133-07:00[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(30) – 完賽!!!!<p>此篇為心得文,不會有任何的程式碼,請安心服用 (終於等到這一天了XD)</p> <h2><a href="http://ithelp.ithome.com.tw/ironman7/app/profile/20083225/dev">當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統</a></h2> <h2>* 鐵人賽</h2> <p>每年到這個時候,總是在猶豫要不要報名,因為前半年總是會想好要開始準備鐵人賽文章,但事與願違,常常被工作的專案壓力搞到沒時間,今年也整個被壓榨到了極致,但還是硬著頭皮報名了,許多文章都在前2.3天才生出來,且報名開發技術組,就一定要寫些Code,所以9-10月份簡直是折磨自己阿,每天下班回家第一件事就是繼續當個IT鐵人,寫code寫文章,但總是會有一些收穫的,常常覺得透過寫文章方式,可以讓自己的邏輯更加清晰,下次再替別人解決問題時,也能比較有條理的回答。另外一個好處,就是可以看到一些前輩們30天的分享經驗,透過這種完整系列文章也吸收不少知識。</p> <h2>* 一些小建議</h2> <p>我個人已經完賽兩次鐵人賽,不免有一些小小的建議,今年的發文系統比去年還ok,至少我在blog的文章可以直接複製貼上,但個人覺得今年的版面,雖然套用bootstrap,但整體的瀏覽方式不是很好,在瀏覽器100%檢視下似乎字體太大了,導致閱讀好像比較困難。</p> <p>雖然有訂閱功能,但查看該網友系列文章的方式還有待改進…不知道是不是這個原因造成討論&留言的比例比去年少很多?蠻可惜的,有時除了文章分享外,透過跟網友留言互動的方式也能讓彼此增加不少知識。</p> <p>另外就是新的網頁好像無法很直覺的看到推文通知,及回覆留言通知,必須要回IT幫邦忙的個人訊息去查看...我想還是有人不知道,每天只是上來做發文的動作,這樣就缺少互動的機會了。</p> <p>當然這只是個人的一點小意見….整體來說能看到IT鐵人賽每年都在進步 :P</p> <h2>* 主題</h2> <p>個人開發上專注於ASP.NET,今年前端接觸到了Angular.js,一直想把這兩個技術結合,剛好鐵人賽就是一種很好的方式,當然選了這兩大主題,不免無法介紹的太深入…也許明年像其他前輩專精於某種主題會更好….(也許可以考慮讓我這個資訊小魯蛇分享幾年的職場經驗也ok,至少不用再寫Code又寫文章了XD)。</p> <p>又自己想設定的方向,想呈現的是我工作上遇到的一些需求,譬如分層概念..報表..Web Service(Web API)..一些好用的plugin,就拿分層來說,這是書本比較少會提到,但在實務上專案是多麼基本的事情,所以也強迫自己寫一些Sample code出來,實務上只是在每個實作,每段code更複雜化而已。</p> <h2>* 後記</h2> <p>技術是不等人的,要長遠走這一行就必須要有追著技術跑的決心,不然很容易就被淘汰,或者常常因為倦怠而有工作無力感,所以保持一顆熱血的心走這行我覺得蠻重要的,像今年寫的是Angular.js,在發文的同時已經看到<a href="https://www.facebook.com/l.php?u=https%3A%2F%2Fdocs.google.com%2Fpresentation%2Fd%2F1XQP0_NTzCUcFweauLlkZpbbhNVYbYy156oD--KLmXsk%2Fpreview%3Fsle%3Dtrue%23slide%3Did.p&h=8AQEgp_SR">Angular.js 2.0</a>推出.....語法與實作完全不一樣…..前端變化之快讓我有種歸零的感覺……Orz……但至少Study過,就會得到一些東西,再接觸新的門檻只會更低不會更高,鐵人賽是一個很好訓練自己的管道,希望每年都有更多技術人加入來共襄盛舉。</p> Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com9tag:blogger.com,1999:blog-2224001206258991308.post-22581047391943323612014-10-23T11:00:00.001-07:002014-10-23T11:00:41.333-07:00[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(29) – 發行到Azure<h2>* 本篇目標</h2> <p>逐步將網站發行到Microsoft Azure</p> <h2>* 前言</h2> <p>Azure出來後,我們可以很輕易的將網站放在雲上面,本篇將逐步新增一個Azure Website,並透過Visual Studio 2013來發行上去。</p> <h2>* Azure WebSite</h2> <p>新增網站</p> <p><a href="http://lh6.ggpht.com/-fCF7G31ETNo/VElCJJSY5pI/AAAAAAAACYY/eXeb8bMprag/s1600-h/7ebaa925dfe64841b6b99824bea98dd3%25255B1%25255D.jpg"><img title="7ebaa925dfe64841b6b99824bea98dd3" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="7ebaa925dfe64841b6b99824bea98dd3" src="http://lh5.ggpht.com/-jWdMDCRyaH4/VElCJ4OkPZI/AAAAAAAACYg/zC6i3CGA28Y/7ebaa925dfe64841b6b99824bea98dd3_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="266"></a></p> <p>設定URL</p> <p><a href="http://lh5.ggpht.com/-hSH5NnRj0UI/VElCK7hAgTI/AAAAAAAACYo/19t1OFL23Ec/s1600-h/01e276b775a74d5fa922568426bb344f%25255B1%25255D.jpg"><img title="01e276b775a74d5fa922568426bb344f" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="01e276b775a74d5fa922568426bb344f" src="http://lh3.ggpht.com/-cMxYHhv9DJg/VElCLUUcJBI/AAAAAAAACYw/hAdRoSjz0w4/01e276b775a74d5fa922568426bb344f_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="281"></a></p> <p>網站建立好後,點選進入,下載發行檔</p> <p><a href="http://lh5.ggpht.com/-ZFRqZSIS-vs/VElCMf2mi7I/AAAAAAAACY4/zxJHndh0O_M/s1600-h/401c94bf110b4c09a9177b81df7e8ff2%25255B1%25255D.jpg"><img title="401c94bf110b4c09a9177b81df7e8ff2" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="401c94bf110b4c09a9177b81df7e8ff2" src="http://lh5.ggpht.com/-9-r1NHFn_Rk/VElCNI8DmHI/AAAAAAAACZA/PKuD2-vIoQs/401c94bf110b4c09a9177b81df7e8ff2_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="434"></a></p> <p>接著在Web專案點發行</p> <p><a href="http://lh5.ggpht.com/-XAfEKldLOA8/VElCN8S439I/AAAAAAAACZI/2D2xrG3kExk/s1600-h/97cd69f1193541fba96509893eb1d7b1%25255B1%25255D.jpg"><img title="97cd69f1193541fba96509893eb1d7b1" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="97cd69f1193541fba96509893eb1d7b1" src="http://lh6.ggpht.com/-EemcFFk95KA/VElCOtNqUkI/AAAAAAAACZQ/b59szjIz0QA/97cd69f1193541fba96509893eb1d7b1_thumb%25255B1%25255D.jpg?imgmax=800" width="608" height="484"></a></p> <p>點選匯入,選擇剛剛的發行檔</p> <p><a href="http://lh4.ggpht.com/-CyCVjp6ohCw/VElCPeAhRfI/AAAAAAAACZY/EgT14LDWQMY/s1600-h/7a564ba98c604937ae095ea12e164131%25255B1%25255D.jpg"><img title="7a564ba98c604937ae095ea12e164131" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="7a564ba98c604937ae095ea12e164131" src="http://lh3.ggpht.com/-2tZqosVxBX0/VElCQqXvQ6I/AAAAAAAACZg/Ptwhkl03wcA/7a564ba98c604937ae095ea12e164131_thumb%25255B1%25255D.jpg?imgmax=800" width="616" height="484"></a></p> <p>點選發行,如此就輕鬆地將網站丟到雲上了</p> <p><a href="http://lh5.ggpht.com/-mZujJlkrnsU/VElCRRCu9UI/AAAAAAAACZo/C9bTfhjMjw0/s1600-h/3be7343764124538acec6e35606944cd%25255B1%25255D.jpg"><img title="3be7343764124538acec6e35606944cd" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="3be7343764124538acec6e35606944cd" src="http://lh6.ggpht.com/-mKhkLrC_JXM/VElCSGYoc_I/AAAAAAAACZw/GYTz5OgvUVs/3be7343764124538acec6e35606944cd_thumb%25255B1%25255D.jpg?imgmax=800" width="616" height="484"></a></p> <h2>* 後記</h2> <p>Azure介面基本上都很淺顯易懂,將網站發行到雲上後,再來就是將資料庫也放到Azure DataBase,這邊就不再多說介紹了,詳細可以參考下面提供的文章連結。</p> <p>Azure目前有免費試用,且就算啟用了,部分功能流量未超過其實也是不用收錢的,未來已經是雲的趨勢,可以趁著這個免費的福利,去試玩看看Azure的強大吧 ^_^</p> <p><a title="http://blog.sanc.idv.tw/p/windows-azure.html" href="http://blog.sanc.idv.tw/p/windows-azure.html">http://blog.sanc.idv.tw/p/windows-azure.html</a></p> <p> </p> <p>本系列程式原始碼請至我的Github下載 <a href="https://github.com/kyleap">https://github.com/kyleap</a> <p>** 如內容有誤請告知,將進行修改,謝謝 ** Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com2tag:blogger.com,1999:blog-2224001206258991308.post-13507452162962096592014-10-23T10:33:00.001-07:002014-10-23T10:33:32.263-07:00[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(28) – Elmah監控網站<h2>* 本篇目標</h2> <p>安裝Elmah套件監控網站</p> <h2>* 前言</h2> <p>系統上線後,一定會遇到一些Bug,但如何在User抱怨之前,將Bug以最短時間內處理掉是很重要的是。Elmah能幫我們紀錄網站所發生的錯誤,並可以配上一些通知機制,如Email,來通知系統管理員。</p> <h2>* 安裝</h2> <p>透過Nuget下載</p> <p><a href="http://lh3.ggpht.com/-fhSjzME5UHA/VEk710KyIlI/AAAAAAAACXQ/u-6CnodLGtE/s1600-h/bca5566705ba489fa71aa30b3807e4ce%25255B1%25255D.jpg"><img title="bca5566705ba489fa71aa30b3807e4ce" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="bca5566705ba489fa71aa30b3807e4ce" src="http://lh4.ggpht.com/-uayCYrGlcVY/VEk72l0oloI/AAAAAAAACXY/eSXK-SdHrs8/bca5566705ba489fa71aa30b3807e4ce_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="429"></a></p> <p>透過Nuget就能很方便的將所有設定都裝好</p> <p>我們隨便輸入一個網址導致404錯誤:</p> <p><a href="http://lh6.ggpht.com/-4Mb6PxnB6BU/VEk73XNfSOI/AAAAAAAACXg/lhoAvmJXsEY/s1600-h/5d6df09d2ffe4dcc8cf1b9f352394f25%25255B1%25255D.jpg"><img title="5d6df09d2ffe4dcc8cf1b9f352394f25" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="5d6df09d2ffe4dcc8cf1b9f352394f25" src="http://lh4.ggpht.com/-aUhx_t4d6_Y/VEk74X6Fe-I/AAAAAAAACXo/2Wjn2lqq5nI/5d6df09d2ffe4dcc8cf1b9f352394f25_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="117"></a></p> <p>這時再到 localhost/Elmah 裡面就可以看到錯誤訊息</p> <p><a href="http://lh5.ggpht.com/-OPf4rXiLH7Q/VEk74xOMAQI/AAAAAAAACXw/ootmh_jiCWA/s1600-h/6a44b12ee9b445efb9ff2b6c88ad76bf%25255B1%25255D.jpg"><img title="6a44b12ee9b445efb9ff2b6c88ad76bf" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="6a44b12ee9b445efb9ff2b6c88ad76bf" src="http://lh6.ggpht.com/-zz097mzvwqI/VEk75j8ak1I/AAAAAAAACX4/3b2FSMCw56E/6a44b12ee9b445efb9ff2b6c88ad76bf_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="191"></a></p> <p>而Email通知的話,也只要在WebConfig下設定你的SMTP Mail Server即可</p> <p><a href="http://lh6.ggpht.com/-MoSMqD784tc/VEk76BIgVqI/AAAAAAAACYA/SSTdR7ExDCc/s1600-h/ca00a91cc1354fc78970fc846b41b60c%25255B1%25255D.jpg"><img title="ca00a91cc1354fc78970fc846b41b60c" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="ca00a91cc1354fc78970fc846b41b60c" src="http://lh4.ggpht.com/-T_CcYysQj_g/VEk76om0v8I/AAAAAAAACYE/kT4BaxG2pFU/ca00a91cc1354fc78970fc846b41b60c_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="171"></a></p> <h2>* 後記</h2> <p>延伸閱讀</p> <p><a title="http://ithelp.ithome.com.tw/question/10137849" href="http://ithelp.ithome.com.tw/question/10137849">http://ithelp.ithome.com.tw/question/10137849</a></p> <p> </p> <p>本系列程式原始碼請至我的Github下載 <a href="https://github.com/kyleap">https://github.com/kyleap</a> <p>** 如內容有誤請告知,將進行修改,謝謝 ** Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com0tag:blogger.com,1999:blog-2224001206258991308.post-6970906337809954182014-10-23T09:15:00.001-07:002014-10-23T09:15:09.107-07:00[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(27) – MvcMenuProvider自訂篇<h2>* 本篇目標</h2> <p>選單依登入角色至資料庫撈取,並自訂bootstrap的選單樣式</p> <h2>* 前言</h2> <p>上一篇我們講了MvcMenuProvider基本使用,這篇會來介紹搭配權限管理及自訂css樣式選單的使用方法</p> <h2>* 逐步教學</h2> <p>打開專案底下的Mvc.sitemap,修改設定如下:</p> <p>我們需要寫程式動態撈取選單,dynamicNodeProvider可以設定指向的位置</p> <p><a href="http://lh5.ggpht.com/-1X7OQbGFieY/VEkpYEcLWcI/AAAAAAAACVI/QyWvhjCH8lI/s1600-h/028052d635ad4c08a2a74b705c861d44%25255B1%25255D.jpg"><img title="028052d635ad4c08a2a74b705c861d44" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="028052d635ad4c08a2a74b705c861d44" src="http://lh5.ggpht.com/-WBx2eUkqIcU/VEkpYzeIQZI/AAAAAAAACVM/Fb6F_cN2M30/028052d635ad4c08a2a74b705c861d44_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="131"></a></p> <p>在Model底下新增一個名稱為PageDynamicNodeProvider的class,我們複寫GetDynamicNodeCollection這個方法,而PermissionService是取得資料,內容為前幾篇寫好的選單SQL SP,詳細請參考<a href="http://kyleap.blogspot.tw/2014/10/30aspnet-mvc-angularjs-mvc-24.html">此篇</a></p> <p><a href="http://lh6.ggpht.com/-jrJLEqQXwUo/VEkpZblzmyI/AAAAAAAACVY/FpMCuT9ia1I/s1600-h/ec9728ee853c4bd48885773ada9e2bb7%25255B1%25255D.jpg"><img title="ec9728ee853c4bd48885773ada9e2bb7" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="ec9728ee853c4bd48885773ada9e2bb7" src="http://lh3.ggpht.com/-kNNi1no1g5U/VEkpaMHJWmI/AAAAAAAACVg/tJQ6J4EaGnE/ec9728ee853c4bd48885773ada9e2bb7_thumb%25255B1%25255D.jpg?imgmax=800" width="634" height="484"></a></p> <p>執行結果,但這不是我們要的,因為並未套上一些CSS</p> <p><a href="http://lh6.ggpht.com/-FPLwK21eSgY/VEkpa4FxtxI/AAAAAAAACVo/UZO3rpmShRg/s1600-h/528ac22df1154d308a23256bfd0dfabf%25255B1%25255D.jpg"><img title="528ac22df1154d308a23256bfd0dfabf" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="528ac22df1154d308a23256bfd0dfabf" src="http://lh4.ggpht.com/-OM1kuKz5g7o/VEkpcpTc9bI/AAAAAAAACVw/xoLQfWMoIks/528ac22df1154d308a23256bfd0dfabf_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="182"></a></p> <h2>* 自訂選單CSS</h2> <p>記得我們前一篇有介紹他有一些預設的View嗎,可以在這個View做微調,當然也可以做新增,譬如我們新增一個BootstrapMenuHelperModel.cshtml</p> <p><a href="http://lh3.ggpht.com/-FUiuWdR2DvI/VEkpdQf0E7I/AAAAAAAACV4/Juh3PL1kYJc/s1600-h/610a7c89b3d540cbbef162c79bc90945%25255B1%25255D.jpg"><img title="610a7c89b3d540cbbef162c79bc90945" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="610a7c89b3d540cbbef162c79bc90945" src="http://lh6.ggpht.com/-2fWjeh6bKtg/VEkpeBVElqI/AAAAAAAACWA/QT-KxYLEheA/610a7c89b3d540cbbef162c79bc90945_thumb%25255B1%25255D.jpg?imgmax=800" width="635" height="484"></a></p> <p>而這個View的邏輯有點複雜,建議下載程式回去參考,以下分區塊說明:</p> <p>新增一個Helper,傳入所有選單樣式並跑回圈,ul 有套入bootstrap的class,而如果該選單又有子項目的話,則跑另一個Helper來秀出子選單(DropDownMenu)</p> <p><a href="http://lh6.ggpht.com/-vqj1pm5BEPA/VEkpe8jFF-I/AAAAAAAACWI/X5ObR9boprc/s1600-h/0d4c77cebfb64565b04a21e37520bcf1%25255B1%25255D.jpg"><img title="0d4c77cebfb64565b04a21e37520bcf1" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="0d4c77cebfb64565b04a21e37520bcf1" src="http://lh5.ggpht.com/-8de9H-ym6uE/VEkpfUL2gdI/AAAAAAAACWQ/iL_VoYRweUM/0d4c77cebfb64565b04a21e37520bcf1_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="363"></a></p> <p>DropDownMenu helper如下:</p> <p>跑所有子選單並套入bootstrap的class,如果還有下一層的話,則呼叫自己這個方法,相信有寫過程式的人應該都不陌生,這就是一種遞迴跑出無限層樹狀結構的概念。</p> <p><a href="http://lh5.ggpht.com/-DjpyY41ZIPg/VEkpgGbHmQI/AAAAAAAACWY/1lPdOubM44I/s1600-h/e149cf1a89f146e0aa2e4b97f1387099%25255B1%25255D.jpg"><img title="e149cf1a89f146e0aa2e4b97f1387099" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="e149cf1a89f146e0aa2e4b97f1387099" src="http://lh6.ggpht.com/-gaabf_la9Qk/VEkpgjn6X4I/AAAAAAAACWg/VPVtzPKs8PQ/e149cf1a89f146e0aa2e4b97f1387099_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="365"></a></p> <p>接著在這個View中,最後一行加入@TopMenu(Model.Nodes) 來執行這兩個helper</p> <p>而在_Layout.cshtml 將秀出選單指定成這個view,而false則是不要秀出Mvc.Sitemap定義的文字(最上層)</p> <p><a href="http://lh6.ggpht.com/-H7foN0U38SU/VEkphV-rHFI/AAAAAAAACWo/3QAIUd5O-JM/s1600-h/0d116878ed3644e48f8c4badaa74d959%25255B1%25255D.jpg"><img title="0d116878ed3644e48f8c4badaa74d959" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="0d116878ed3644e48f8c4badaa74d959" src="http://lh4.ggpht.com/-Y0RfIm_fg1Y/VEkph4tXHwI/AAAAAAAACWs/qPgNbzhx5rY/0d116878ed3644e48f8c4badaa74d959_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="143"></a></p> <p>執行結果,就完成自訂bootstrap的選單樣式了</p> <p><a href="http://lh6.ggpht.com/-7f7HX-TqlNg/VEkpiXSPpzI/AAAAAAAACW4/HyvexZFMZBI/s1600-h/e33cae43987f46a5b84b54f6964809fa%25255B1%25255D.jpg"><img title="e33cae43987f46a5b84b54f6964809fa" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="e33cae43987f46a5b84b54f6964809fa" src="http://lh6.ggpht.com/-Zx7JUhIVMLw/VEkpi_R5RUI/AAAAAAAACXA/NsNrc2GX8lE/e33cae43987f46a5b84b54f6964809fa_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="238"></a></p> <h2>* 後記</h2> <p>其實程式一旦複雜就很難用文章來解釋,建議至我的Github下載程式回去參考,會比較清楚</p> <p> </p> <p>本資料庫可至<a href="http://1drv.ms/1s2UBCC">此連結下載</a>,使用前先新增Northwind並執行SQL Scripts <p>本系列程式原始碼請至我的Github下載 <a href="https://github.com/kyleap">https://github.com/kyleap</a> <p>** 如內容有誤請告知,將進行修改,謝謝 ** Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com1tag:blogger.com,1999:blog-2224001206258991308.post-5269725914308760382014-10-22T10:03:00.001-07:002014-10-22T10:03:42.405-07:00[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(26) – MvcMenuProvider安裝篇<h2>* 本篇目標</h2> <p>按造前兩篇所設計出的資料表,實現選單動態呈現</p> <h2>* 前言</h2> <p>MvcMenuProvider是一個很方便的helper,能讓我們用簡易的語法秀出選單,詳細可參考官網</p> <p>Github有<a href="https://github.com/maartenba/MvcSiteMapProvider/wiki">Document</a>能參考,以下逐步介紹常見的使用方式</p> <h2>* 安裝</h2> <p>首先先在Nuget安裝,本範例是用MVC5</p> <p><a href="http://lh4.ggpht.com/-mwQAHT8cWQI/VEfjVteevYI/AAAAAAAACTw/y53qPML5JZQ/s1600-h/c4d09ebe628e47e08fe6c5c4d0b79041%25255B1%25255D.jpg"><img title="c4d09ebe628e47e08fe6c5c4d0b79041" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="c4d09ebe628e47e08fe6c5c4d0b79041" src="http://lh6.ggpht.com/-9fUGxGUFB54/VEfjWSdtKuI/AAAAAAAACT0/vdU7oUUYLHs/c4d09ebe628e47e08fe6c5c4d0b79041_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="431"></a></p> <p>安裝完後,會看到專案多出一個Mvc.sitemap檔案</p> <p><a href="http://lh6.ggpht.com/-59qolgBHLAA/VEfjXPyemRI/AAAAAAAACT8/n9y5PWE8wCY/s1600-h/772c4374ba9a4494bea92df393674262%25255B1%25255D.jpg"><img title="772c4374ba9a4494bea92df393674262" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="772c4374ba9a4494bea92df393674262" src="http://lh4.ggpht.com/-fbiqtC8O-bc/VEfjXg-m5nI/AAAAAAAACUI/GBbua87vA9E/772c4374ba9a4494bea92df393674262_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="140"></a></p> <p>接著我們只要在View用 @Html.MvcSiteMap().Menu() 語法,就能輕易將Mvc.sitemap的選單階層送出</p> <p>這個html選單產生的邏輯定義在Shared資料夾底下的DisplayTemplates裡面</p> <p><a href="http://lh4.ggpht.com/-n9QYy394m0U/VEfjYSNLXqI/AAAAAAAACUQ/0Ru_nO3AB30/s1600-h/15da7cc90f7f4f8fa032c30ce692f808.jpg"><img title="15da7cc90f7f4f8fa032c30ce692f808" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="15da7cc90f7f4f8fa032c30ce692f808" src="http://lh4.ggpht.com/-jPFtwscEYA8/VEfjYw1lrYI/AAAAAAAACUY/3XzvItSGn0M/15da7cc90f7f4f8fa032c30ce692f808_thumb.jpg?imgmax=800" width="244" height="137"></a></p> <p>我們打開MenuHelperModel.cshtml這個檔案</p> <p>將ul html加上bootstrap的class</p> <p><a href="http://lh5.ggpht.com/-vtscF1j9w0E/VEfjZqyDxdI/AAAAAAAACUg/_FGpO2YkLoA/s1600-h/6a3c8a24ed414b33ba7bf8fd5a397e1c%25255B2%25255D.jpg"><img title="6a3c8a24ed414b33ba7bf8fd5a397e1c" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="6a3c8a24ed414b33ba7bf8fd5a397e1c" src="http://lh3.ggpht.com/-dJT94dmAre0/VEfjaLEbFdI/AAAAAAAACUo/NWTDZTpUQs4/6a3c8a24ed414b33ba7bf8fd5a397e1c_thumb%25255B2%25255D.jpg?imgmax=800" width="644" height="349"></a></p> <p>這樣就能顯示自訂的選單樣式了</p> <p><a href="http://lh5.ggpht.com/-5B7hTXpksi4/VEfjaqrH_EI/AAAAAAAACUw/UzcQf4MxowY/s1600-h/f446c12e7f0648e48490655ee0ce86ba%25255B2%25255D.jpg"><img title="f446c12e7f0648e48490655ee0ce86ba" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="f446c12e7f0648e48490655ee0ce86ba" src="http://lh4.ggpht.com/-y99sf4xWv8M/VEfjbW9bDwI/AAAAAAAACU4/uAjHXf1HjFE/f446c12e7f0648e48490655ee0ce86ba_thumb%25255B2%25255D.jpg?imgmax=800" width="644" height="121"></a></p> <h2>* 後記</h2> <p>記得前幾篇有設計我們選單的資料表嗎,下一篇就來將MvcMenuProvider結合,針對登入的身分顯示該有的選單</p> <p> </p> <p>本系列程式原始碼請至我的Github下載 <a href="https://github.com/kyleap">https://github.com/kyleap</a> <p>** 如內容有誤請告知,將進行修改,謝謝 ** Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com0tag:blogger.com,1999:blog-2224001206258991308.post-58563489363259709942014-10-21T07:53:00.001-07:002014-10-21T08:37:28.206-07:00[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(25) – 權限管理<h2>* 本篇目標</h2> <p>設計選擇及權限管理的資料表</p> <h2>* 前言</h2> <p>.NET Freamwork 4.5 微軟推出ASP.NET Identity,這讓我們實作登入機制及權限管理更加的方便及更有安全性,詳細可<a href="http://blogs.uuu.com.tw/Articles/post/2014/03/12/ASPNET-Identity%E7%B0%A1%E4%BB%8B.aspx">參考這篇文章</a>。本篇會自行設計資料表來實作。</p> <h2>* 選單資料表</h2> <p>新增一個Permission_Menus資料表,而表的結構如下</p> <p>MenuID : 唯一值(PK)</p> <p>Name : 選單名稱</p> <p>Controller : MVC Controller名稱</p> <p>Action : MVC View名稱</p> <p>Url : 完整網址(可Null)</p> <p>Description : 選單描述</p> <p>ParentID : 父選單的PK</p> <p>Status : 狀態 (如顯示或隱藏)</p> <p>OrderSerial : 排序</p> <p>其實這就是無限層選單的設計方式,透過ParentID指向所屬的父選單(如果沒有則是空值),就可以用程式組出無限樹狀選單。</p> <p><a href="http://lh3.ggpht.com/-LW-Pg4XxDNk/VEZzMsHGKbI/AAAAAAAACSE/GwPKBUXR0yw/s1600-h/cedcd81855614eb683adb3d8a7706c84%25255B1%25255D.jpg"><img title="cedcd81855614eb683adb3d8a7706c84" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="cedcd81855614eb683adb3d8a7706c84" src="http://lh4.ggpht.com/--wOoKtivWws/VEZzNBVBs6I/AAAAAAAACSM/OAR8L4WIWgc/cedcd81855614eb683adb3d8a7706c84_thumb%25255B1%25255D.jpg?imgmax=800" width="595" height="484"></a></p> <h2>* 角色資料表</h2> <p>新增一個Permission_Roles資料表,而表的結構如下</p> <p><a href="http://lh3.ggpht.com/-VdwKKNWeaNo/VEZzNzzBPmI/AAAAAAAACSQ/qfbESTzcu8o/s1600-h/9acdfac4ce7d4bb29f9357e2ac9432bd%25255B1%25255D.jpg"><img title="9acdfac4ce7d4bb29f9357e2ac9432bd" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="9acdfac4ce7d4bb29f9357e2ac9432bd" src="http://lh5.ggpht.com/-ZY-Z-ohT_Os/VEZzOWHRjHI/AAAAAAAACSc/U60HgDMGuas/9acdfac4ce7d4bb29f9357e2ac9432bd_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="211"></a></p> <p>RoleID : 唯一值(PK)</p> <p>Name : 角色名稱 (e.g Admin , Sales …..)</p> <p>Status : 狀態 (有效或無效)</p> <h2>* 選單 & 角色</h2> <p>選單與角色的關係:一個選單可能會分配給多個角色,譬如:後台維護(選單),只能給 系統管理員 或 主管級帳號 (角色)才可瀏覽,是一對多的關係,所以我們新增一個Permission_RoleMenuMapping資料表如下:</p> <p><a href="http://lh3.ggpht.com/-sImxYRCJ0NE/VEZzPEfodrI/AAAAAAAACSk/HhNTrgYUXok/s1600-h/32ac4eb27b5a4aec83b0a70afa246030%25255B1%25255D.jpg"><img title="32ac4eb27b5a4aec83b0a70afa246030" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="32ac4eb27b5a4aec83b0a70afa246030" src="http://lh5.ggpht.com/-DkQ3CmaJSEQ/VEZzPsH8MlI/AAAAAAAACSs/8zMgWuyB5P4/32ac4eb27b5a4aec83b0a70afa246030_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="291"></a></p> <p>MRoleID:唯一值(PK)</p> <p>RoleID : 外來鍵,角色的PK</p> <p>MenuID : 外來鍵,選單的PK</p> <p>Status : 狀態 (有效或無效)</p> <h2>* 角色 & 使用者的關係</h2> <p>角色與使用者的關係:一個使用者可能會分配給多的角色,譬如:Kyle 使用者,他可能具備系統管理員,主管級身分(角色),故他是系統管理員,所以可以看到後台維護的選單。所以我們資料表可以這樣設計:</p> <p><a href="http://lh4.ggpht.com/-fKyGIo_8_yM/VEZzQQF0fZI/AAAAAAAACS0/U3-IEyzMHDs/s1600-h/c6e7435154ea4ed5b3fb5d618153f25f%25255B1%25255D.jpg"><img title="c6e7435154ea4ed5b3fb5d618153f25f" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="c6e7435154ea4ed5b3fb5d618153f25f" src="http://lh5.ggpht.com/-fNg8uVfh1Zo/VEZzRij8QEI/AAAAAAAACS8/GKoITCaSgf4/c6e7435154ea4ed5b3fb5d618153f25f_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="316"></a></p> <h2>* 關聯圖</h2> <p>把這個四個表關聯拉出來,就會呈現如下圖:</p> <p><a href="http://lh5.ggpht.com/-PaNc-d4GgGY/VEZzSOVeYPI/AAAAAAAACTE/YaBzGfVNJBQ/s1600-h/afa0773c13ec4e6e95e782e661eae1ac%25255B1%25255D.jpg"><img title="afa0773c13ec4e6e95e782e661eae1ac" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="afa0773c13ec4e6e95e782e661eae1ac" src="http://lh4.ggpht.com/-4NxLgp5ocog/VEZzS2LiyeI/AAAAAAAACTM/w_PmHIPen9g/afa0773c13ec4e6e95e782e661eae1ac_thumb%25255B1%25255D.jpg?imgmax=800" width="484" height="484"></a></p> <h2>* 取得使用者所分配的選單</h2> <p>接著我們開始寫個SP,來取得所有選單所分配的角色:</p> <p>角色我們用SQL的XML Path語法將他逗號分隔,詳細用法可參考此篇</p> <h5><a href="http://kyleap.blogspot.tw/2012/10/ms-sql.html">[MS SQL]將多筆資料合併欄位,減少不必要的連線</a></h5> <p>ALTER proc [dbo].[sp_Permission_GetMenuList]<br>as </p> <p>DECLARE @errorMsg nvarchar(255)</p> <p>begin<br> SET NOCOUNT ON;<br> Begin Try<br> <br> select * ,<br> isnull((<br> SELECT (cast(roles.Name AS NVARCHAR ) + ',') FROM Permission_RoleMenuMapping menu<br> left join Permission_Roles roles on menu.RoleID = roles.RoleID<br> where menu.MenuID = permission.MenuID<br> FOR XML PATH('')<br> ),'None') as Roles<br> from Permission_Menus permission<br> order by OrderSerial</p> <p> End Try<br> Begin Catch <br> set @errorMsg =error_message() <br> raiserror(@errorMsg,16,1)<br> End Catch</p> <p>end</p> <p>執行結果:</p> <p><a href="http://lh5.ggpht.com/-mSl4lbA1_5o/VEZzTfnZ86I/AAAAAAAACTU/gxhK597kP1A/s1600-h/6b561d16edc9417bb92bbe16c4ceef0b%25255B1%25255D.jpg"><img title="6b561d16edc9417bb92bbe16c4ceef0b" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="6b561d16edc9417bb92bbe16c4ceef0b" src="http://lh5.ggpht.com/-QLpkhIAM-nU/VEZzTwP_13I/AAAAAAAACTc/huR8-ws4SO8/6b561d16edc9417bb92bbe16c4ceef0b_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="152"></a></p> <p> </p> <p>本資料庫可至<a href="http://1drv.ms/1s2UBCC">此連結下載</a>,使用前先新增Northwind並執行SQL Scripts <p>本系列程式原始碼請至我的Github下載 <a href="https://github.com/kyleap">https://github.com/kyleap</a> <p>** 如內容有誤請告知,將進行修改,謝謝 ** Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com0tag:blogger.com,1999:blog-2224001206258991308.post-72080731954732434852014-10-20T09:05:00.001-07:002014-10-20T09:06:15.080-07:00[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(24) – 登入功能<h2>* 本篇目標</h2> <p>在MVC實作登入功能</p> <h2>* 前言</h2> <p>.NET Freamwork 4.5 微軟推出ASP.NET Identity,這讓我們實作登入機制及權限管理更加的方便及更有安全性,詳細可<a href="http://blogs.uuu.com.tw/Articles/post/2014/03/12/ASPNET-Identity%E7%B0%A1%E4%BB%8B.aspx">參考這篇文章</a>。本篇會用<a href="http://msdn.microsoft.com/zh-tw/library/system.web.security.formsauthentication(v=vs.110).aspx">FormsAuthentication</a>來實作登入功能。</p> <h2>* 實作登入機制</h2> <p>在Domain新增給登入用的ViewModel</p> <p><a href="http://lh5.ggpht.com/-521AE3_8-Dg/VEUymNI7cGI/AAAAAAAACQc/Wzt4lH9w3Jc/s1600-h/35980bd206724128ac67dd6e3f3893fe%25255B1%25255D.jpg"><img title="35980bd206724128ac67dd6e3f3893fe" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="35980bd206724128ac67dd6e3f3893fe" src="http://lh3.ggpht.com/-zhre4EGXBLI/VEUynLjNNtI/AAAAAAAACQk/xadHw7UzQe0/35980bd206724128ac67dd6e3f3893fe_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="386"></a></p> <p>前端View我們透過<a href="http://bootsnipp.com/snippets/featured/easy-log-in-form">bootsnipp找個版直接使用</a></p> <p><a href="http://lh4.ggpht.com/-Ca3OtyH026Q/VEUynSiFjLI/AAAAAAAACQo/ukCHBE3nkG8/s1600-h/7f8072b81b50418bb02a879230b5b9d3%25255B1%25255D.jpg"><img title="7f8072b81b50418bb02a879230b5b9d3" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="7f8072b81b50418bb02a879230b5b9d3" src="http://lh3.ggpht.com/-Fwe1kuX2c_Y/VEUyoCppFQI/AAAAAAAACQ0/2bMPl3w0Wgw/7f8072b81b50418bb02a879230b5b9d3_thumb%25255B1%25255D.jpg?imgmax=800" width="539" height="484"></a></p> <p>Submit的Function接收ViewModel</p> <p><a href="http://lh4.ggpht.com/-2Zvjsk5ufYo/VEUypMMubiI/AAAAAAAACQ8/J0KKx-rYTJk/s1600-h/902d19ada9a54a1693e63aae767ba6e8%25255B1%25255D.jpg"><img title="902d19ada9a54a1693e63aae767ba6e8" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="902d19ada9a54a1693e63aae767ba6e8" src="http://lh6.ggpht.com/-qIJpsmNbM4A/VEUypp_O-lI/AAAAAAAACRE/yvVNdXtrczc/902d19ada9a54a1693e63aae767ba6e8_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="190"></a></p> <p>SetLogin是自定義的Function</p> <p>name : 寫入使用者的ID</p> <p>expiration:可設定登入過期時間</p> <p>userData:可寫入權限管理的角色字串,以便系統之後做權限的處理</p> <p><a href="http://lh3.ggpht.com/-Kw57HfKG56Q/VEUyqVWwS_I/AAAAAAAACRM/Px_96Se_6NY/s1600-h/508b71bba30f47bbbb90f4b35b39042d%25255B1%25255D.jpg"><img title="508b71bba30f47bbbb90f4b35b39042d" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="508b71bba30f47bbbb90f4b35b39042d" src="http://lh3.ggpht.com/-VNTLo9wm5nw/VEUyrcekj5I/AAAAAAAACRU/rFuoLSAWce8/508b71bba30f47bbbb90f4b35b39042d_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="331"></a></p> <p>這樣就能完成登入的功能了!</p> <p>之後可以透過User.Identity.Name去取得使用者ID,進而跟資料庫取得一些資料</p> <p><a href="http://lh4.ggpht.com/-wsXFTsMgWdU/VEUyrwDnFdI/AAAAAAAACRY/DfkES_imiEM/s1600-h/60f4333103494ce79dd21c1ea9ffb7ba%25255B1%25255D.jpg"><img title="60f4333103494ce79dd21c1ea9ffb7ba" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="60f4333103494ce79dd21c1ea9ffb7ba" src="http://lh5.ggpht.com/-J2rY0sRf3wA/VEUysBW7obI/AAAAAAAACRk/Q7OF0sDqV9M/60f4333103494ce79dd21c1ea9ffb7ba_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="95"></a></p> <p>而登出我們可以新增一個Controller</p> <p><a href="http://lh4.ggpht.com/-XEzm8XDMulQ/VEUys1znOzI/AAAAAAAACRs/kgU3UVkjQ_s/s1600-h/8d7ee02613414dffacbc9e3b8bb6df62%25255B1%25255D.jpg"><img title="8d7ee02613414dffacbc9e3b8bb6df62" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="8d7ee02613414dffacbc9e3b8bb6df62" src="http://lh6.ggpht.com/-1MktPgD1vrU/VEUyupTGGDI/AAAAAAAACR0/ItiMKROSTdA/8d7ee02613414dffacbc9e3b8bb6df62_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="369"></a></p> <p> </p> <p>本系列程式原始碼請至我的Github下載 <a href="https://github.com/kyleap">https://github.com/kyleap</a> <p>** 如內容有誤請告知,將進行修改,謝謝 **</p> Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com0tag:blogger.com,1999:blog-2224001206258991308.post-29227621328411545072014-10-19T01:32:00.001-07:002014-10-19T01:32:41.763-07:00[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(23) – NPOI匯出功能<h2>* 本篇目標</h2> <p>將資料庫資料匯出成Excel</p> <h2>* 前言</h2> <p>之前透過Report Viewer可以很方便的將資料匯出成Excel,但實務上如果客戶要求的Excel需要很準確,又很複雜,我通常會用NPOI來處理這些需求,合併儲存格,特殊公式、圖表呈現…這些NPOI都可以使用得到,但依依介紹可能介紹不完....總而言之NPOI可"一個蘿蔔一個坑"的方式針對每個儲存格去做處理。</p> <h2>* NPOI</h2> <p>資料來源我們用之前建好的SP(訂單資料)</p> <p><a href="http://lh4.ggpht.com/-fAN2ISBj53o/VEN2pqn2QlI/AAAAAAAACOk/pybxpx7FyKw/s1600-h/a0be2bb416554c74b2ca2e2ce897c359%25255B1%25255D.jpg"><img title="a0be2bb416554c74b2ca2e2ce897c359" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="a0be2bb416554c74b2ca2e2ce897c359" src="http://lh6.ggpht.com/-3WBN1LXptLc/VEN2rs4kbxI/AAAAAAAACOs/zy2VLDPOHM4/a0be2bb416554c74b2ca2e2ce897c359_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="480"></a></p> <p>我們一樣先新增一個Excel樣板,來設計我們要的格式,而第二列首欄,我通常會指定一個資料內容的字型,譬如將這個儲存格設定為微軟正黑體,12點字,並且是有邊框的格子,待會程式就直接讀這個欄位的設定,會比較方便。</p> <p><a href="http://lh4.ggpht.com/-62fFB51x3WI/VEN2snS6MMI/AAAAAAAACO0/CKBalU19KGM/s1600-h/148ad76b693d45639a7c40022e3557f2%25255B1%25255D.jpg"><img title="148ad76b693d45639a7c40022e3557f2" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="148ad76b693d45639a7c40022e3557f2" src="http://lh4.ggpht.com/-ZNu53f9diKI/VEN2t0NNihI/AAAAAAAACO8/iG4sdpV7fzo/148ad76b693d45639a7c40022e3557f2_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="393"></a></p> <p>新增一個Controller,讀取Excel樣板,並取得剛剛設定好的字型樣式</p> <p><a href="http://lh4.ggpht.com/-3bh1CNjGZnM/VEN2vIiww0I/AAAAAAAACPE/9uHqMCMN5Vk/s1600-h/619b3e3f254e400c9a6341eb6502ff7d%25255B1%25255D.jpg"><img title="619b3e3f254e400c9a6341eb6502ff7d" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="619b3e3f254e400c9a6341eb6502ff7d" src="http://lh5.ggpht.com/-LBx0m3UAF4A/VEN2wVTwOgI/AAAAAAAACPM/lxh4KnCUg7g/619b3e3f254e400c9a6341eb6502ff7d_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="245"></a></p> <p>迴圈印出所有資料並依序指定給欄位,CurrRow代表目前所在的列數</p> <p><a href="http://lh6.ggpht.com/-W3s2yzxAFYg/VEN2xvkYkfI/AAAAAAAACPU/6hxYQ2Q0sS8/s1600-h/6574f85c72a74e27be325603fb8b67a1%25255B1%25255D.jpg"><img title="6574f85c72a74e27be325603fb8b67a1" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="6574f85c72a74e27be325603fb8b67a1" src="http://lh6.ggpht.com/-LF_uwQCbht8/VEN2zZXVaiI/AAAAAAAACPc/GPuEPTBjNnc/6574f85c72a74e27be325603fb8b67a1_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="197"></a></p> <p>CreateCell是我自己擴充的Function,將重複性的程式碼抽出來</p> <p><a href="http://lh4.ggpht.com/-cht-twX6uuk/VEN21JHMLeI/AAAAAAAACPk/HqB0dT3YCng/s1600-h/0ec70aa09a9845f7a2a550743b2954b3%25255B1%25255D.jpg"><img title="0ec70aa09a9845f7a2a550743b2954b3" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="0ec70aa09a9845f7a2a550743b2954b3" src="http://lh6.ggpht.com/-oM-CWATju80/VEN24suAbYI/AAAAAAAACPs/KqHTpmwIf0g/0ec70aa09a9845f7a2a550743b2954b3_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="178"></a></p> <p>MVC匯出檔案</p> <p><a href="http://lh3.ggpht.com/-w95gljHBy2k/VEN28Bz7GCI/AAAAAAAACP0/CyPgm86fqKg/s1600-h/114eebb28a784da6b8e742d16700a2ce%25255B1%25255D.jpg"><img title="114eebb28a784da6b8e742d16700a2ce" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="114eebb28a784da6b8e742d16700a2ce" src="http://lh5.ggpht.com/-1TGRKhkA3lo/VEN29Slcw3I/AAAAAAAACP8/qWXVhCJRRWM/114eebb28a784da6b8e742d16700a2ce_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="152"></a></p> <p>產生結果</p> <p><a href="http://lh3.ggpht.com/-3Hai0qXQcOo/VEN3F_fYNRI/AAAAAAAACQE/F7n05KISLFk/s1600-h/2b49ba82b1044da4aaec52944ad35c70%25255B1%25255D.jpg"><img title="2b49ba82b1044da4aaec52944ad35c70" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="2b49ba82b1044da4aaec52944ad35c70" src="http://lh3.ggpht.com/-yt9ODq6xyr4/VEN3JN47yJI/AAAAAAAACQM/UlCKPJp4pR4/2b49ba82b1044da4aaec52944ad35c70_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="409"></a></p> <h2>* 後記</h2> <p>NPOI其他複雜操作,可<a href="http://tonyqus.sinaapp.com/">參考此中文網</a></p> <p> </p> <p>本系列程式原始碼請至我的Github下載 <a href="https://github.com/kyleap">https://github.com/kyleap</a> <p>** 如內容有誤請告知,將進行修改,謝謝 ** Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com0tag:blogger.com,1999:blog-2224001206258991308.post-64585419930486955912014-10-19T00:52:00.001-07:002014-10-19T00:52:47.649-07:00[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(22) – NPOI讀取功能<h2>* 本篇目標</h2> <p>讀取Excel的Row Data</p> <h2>* 前言</h2> <p>實務上常常會讓使用者將大量的資料先輸入在Excel,再批次匯入系統,NPOI是一個強大的第三方套件,他可以做到的事情非常多,本篇就簡單介紹一下基本的功能,讀取Excel檔案。</p> <h2 align="left">* NPOI</h2> <p align="left">透過Nuget安裝後,我們先來製作一個樣板,有兩個欄位,而使用者可以針對這兩個標題去輸入</p> <p align="left"><a href="http://lh4.ggpht.com/--92cyq_SdcM/VENtkp-uc0I/AAAAAAAACMs/DPeNhsHcPSE/s1600-h/711d3b9b09994647a0a60b4da2fcdaf4%25255B1%25255D.jpg"><img title="711d3b9b09994647a0a60b4da2fcdaf4" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="711d3b9b09994647a0a60b4da2fcdaf4" src="http://lh6.ggpht.com/-A0UY7lcV-9o/VENtm33v8GI/AAAAAAAACM0/inQMOTZDdpo/711d3b9b09994647a0a60b4da2fcdaf4_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="295"></a></p> <p align="left">新增一個View,MVC要使用檔案上傳Submit記得將enctype改為form-data</p> <p align="left"><a href="http://lh5.ggpht.com/-CjwprM_KTJg/VENtn0TmigI/AAAAAAAACM8/IKEBlx6SU7A/s1600-h/9b1850859cbf45e3919d61a404c204b5%25255B1%25255D.jpg"><img title="9b1850859cbf45e3919d61a404c204b5" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="9b1850859cbf45e3919d61a404c204b5" src="http://lh5.ggpht.com/-cIXiVII1Hes/VENto_0GLoI/AAAAAAAACNE/xVI8YerhVSA/9b1850859cbf45e3919d61a404c204b5_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="252"></a></p> <p align="left">顯示頁面</p> <p align="left"><a href="http://lh6.ggpht.com/-1WrOHRd9qs0/VENtp1rjvoI/AAAAAAAACNM/ZULZtp2DMPo/s1600-h/ab3737f5ef114959bbc5527068064172%25255B1%25255D.jpg"><img title="ab3737f5ef114959bbc5527068064172" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="ab3737f5ef114959bbc5527068064172" src="http://lh5.ggpht.com/-5m7NRoxE8q8/VENtq1lCl_I/AAAAAAAACNU/bXK9jCwEcAc/ab3737f5ef114959bbc5527068064172_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="347"></a></p> <p align="left">填寫的檔案</p> <p align="left"><a href="http://lh4.ggpht.com/-fJirtUnGIMA/VENtrmX6SfI/AAAAAAAACNc/8ltXV6vmrOI/s1600-h/b1687c49f2d847e7a15392c0aac40a2a%25255B1%25255D.jpg"><img title="b1687c49f2d847e7a15392c0aac40a2a" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="b1687c49f2d847e7a15392c0aac40a2a" src="http://lh5.ggpht.com/-MqOSWPjuAnM/VENtsg_j5vI/AAAAAAAACNk/BUfQlqLkv7Q/b1687c49f2d847e7a15392c0aac40a2a_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="283"></a></p> <p align="left">後端Submit的Controller可以針對UploadFile去做一些防呆判斷</p> <p align="left"><a href="http://lh3.ggpht.com/-5rqwcpXyDe8/VENttk0ZqkI/AAAAAAAACNs/F7wqLExcBhA/s1600-h/8cfa74a3100d44dbb107a8473d562500%25255B1%25255D.jpg"><img title="8cfa74a3100d44dbb107a8473d562500" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="8cfa74a3100d44dbb107a8473d562500" src="http://lh6.ggpht.com/-KVryxKXZdU4/VENtudOhgwI/AAAAAAAACN0/R7vTicse3oA/8cfa74a3100d44dbb107a8473d562500_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="369"></a></p> <p align="left">NPOI讀取.xlsx</p> <p align="left"><a href="http://lh5.ggpht.com/-JT-s-zMZheg/VENtvp7TsyI/AAAAAAAACN8/qAChABXKvGU/s1600-h/23ecb2f9bbe147c18667a9d3b765c1a3%25255B1%25255D.jpg"><img title="23ecb2f9bbe147c18667a9d3b765c1a3" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="23ecb2f9bbe147c18667a9d3b765c1a3" src="http://lh4.ggpht.com/-N5AeopwDv90/VENtwuyeBlI/AAAAAAAACOE/INd6PXHpoK0/23ecb2f9bbe147c18667a9d3b765c1a3_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="291"></a></p> <p align="left">執行結果,只要將迴圈所取得的資料做一些處理即可,e.g 寫入資料庫</p> <p align="left"><a href="http://lh5.ggpht.com/-WRsH2OqfBzM/VENtySNYfDI/AAAAAAAACOM/nYOGnC5uDOo/s1600-h/c5f7fb77eaa44aafa5d1b65e94a68dc8%25255B1%25255D.jpg"><img title="c5f7fb77eaa44aafa5d1b65e94a68dc8" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="c5f7fb77eaa44aafa5d1b65e94a68dc8" src="http://lh4.ggpht.com/-69IvcrZJOgA/VENtzdFXq9I/AAAAAAAACOU/hmx42__qg9o/c5f7fb77eaa44aafa5d1b65e94a68dc8_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="282"></a></p> <h2 align="left">* 後記</h2> <p align="left">開發NPOI要注意的是版本問題,不同版本與法會有些許不同,本範例使用2.0.6版,如果讀取的是.xlsx檔,語法記得用X開頭的,如XSSFWorkBook,如果你是2003-2007的舊版excel(.xls),記得使用H開頭的語法,如HSSFWorkBook。</p> <p align="left"> </p> <p>本系列程式原始碼請至我的Github下載 <a href="https://github.com/kyleap">https://github.com/kyleap</a> <p>** 如內容有誤請告知,將進行修改,謝謝 ** Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com1tag:blogger.com,1999:blog-2224001206258991308.post-11669551374992466912014-10-18T23:28:00.001-07:002014-10-18T23:28:08.856-07:00[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(21) – Word套版功能<h2>* 本篇目標</h2> <p>製作Word客製化報表</p> <h2>* 前言</h2> <p>上次我們利用內建的Report Viewer很方便的能讓我們匯出清單型資料,但實務上常常會有一些客製化的報表,.NET內建有<a href="http://www.dotnetperls.com/word">Interop Freamwork</a>可以使用,但使用上不是那麼的親切,另外還有一種方式是利用<a href="http://www.dotblogs.com.tw/regionbbs/archive/2012/01/12/convert.doc.to.pdf.with.csharp.and.word.2010.aspx">word .dot</a>樣板的方式在進行操作,但這種方式連微軟都不建議使用了,今天要介紹<a href="http://docx.codeplex.com/">DocX</a>這個套件來製作報表。</p> <h2>* DocX</h2> <p>透過Nuget安裝</p> <p><a href="http://lh3.ggpht.com/-62H0nGVw_jI/VENZwYJKEfI/AAAAAAAACLk/EoCyiZ_dikU/s1600-h/f68e22660f5c4e1688c9fee704cf08b2%25255B1%25255D.jpg"><img title="f68e22660f5c4e1688c9fee704cf08b2" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="f68e22660f5c4e1688c9fee704cf08b2" src="http://lh5.ggpht.com/-13SslcLf2Ic/VENZyuT34QI/AAAAAAAACLs/IOgXLpIzmfs/f68e22660f5c4e1688c9fee704cf08b2_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="431"></a></p> <p>接著我們新增一個Word,可自己設計字型、顏色等…而 {{}} 這是我習慣的命名,表示待會要用程式取代的區塊</p> <p><a href="http://lh6.ggpht.com/-fd02L1HjXpE/VENZzV5dayI/AAAAAAAACL0/LtsSBW-x1xE/s1600-h/be87257b886b4822a0452aac734bc46f%25255B1%25255D.jpg"><img title="be87257b886b4822a0452aac734bc46f" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="be87257b886b4822a0452aac734bc46f" src="http://lh4.ggpht.com/-W8KSmiPJcrc/VENZ0hk2bzI/AAAAAAAACL8/wJp72ySswHo/be87257b886b4822a0452aac734bc46f_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="194"></a></p> <p>新增一個ExportByDocx Controller,我們就可以很容易的用程式來取代剛剛的區塊</p> <p><a href="http://lh6.ggpht.com/-1QLYIVD6nMg/VENZ3dvplvI/AAAAAAAACME/YCxqSKJmRH8/s1600-h/99d467b4da1043f689a37f03e60ecbec%25255B1%25255D.jpg"><img title="99d467b4da1043f689a37f03e60ecbec" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="99d467b4da1043f689a37f03e60ecbec" src="http://lh5.ggpht.com/--9XaqMe5KFM/VENZ4_OK3WI/AAAAAAAACMM/LRLPkJxhb6s/99d467b4da1043f689a37f03e60ecbec_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="257"></a></p> <p>完成畫面</p> <p><a href="http://lh5.ggpht.com/-u1lvMDoewoA/VENZ6FHViAI/AAAAAAAACMU/ZtaRJJZbROE/s1600-h/2944c7a049d4492bbea79ed9d7465e81%25255B1%25255D.jpg"><img title="2944c7a049d4492bbea79ed9d7465e81" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="2944c7a049d4492bbea79ed9d7465e81" src="http://lh3.ggpht.com/-tgUKyfT7VfA/VENZ7SPWRuI/AAAAAAAACMc/LIZEOMP-46c/2944c7a049d4492bbea79ed9d7465e81_thumb%25255B1%25255D.jpg?imgmax=800" width="644" height="225"></a></p> <h2>* 後記</h2> <p>這種方式我自己在實務上蠻常用的,比起用Crystal Report或者是Reporting Service花很長時間去製作報表,用原使的Word來製作相對會準確一點,而程式要做的只是取代部分從資料庫來的資料。</p> <p> </p> <p>本系列程式原始碼請至我的Github下載 <a href="https://github.com/kyleap">https://github.com/kyleap</a> <p>** 如內容有誤請告知,將進行修改,謝謝 ** Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com0tag:blogger.com,1999:blog-2224001206258991308.post-74129048290639225022014-10-18T01:51:00.001-07:002014-10-18T01:51:06.561-07:00[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(20) – 使用rdlc檔並匯入各種格式<h2>* 本篇目標</h2> <p>顯示資料清單,並透過.rdlc匯出成Word.PDF.Excel</p> <h2>* 前言</h2> <p>上一篇我們已經設計好了報表樣式,實務上除了顯示在網頁上,通常使用者都要能要求匯出其他格式,之前看到<a href="https://www.youtube.com/watch?v=2q42e7UGssc&list=TLgffz3CP0dDJByRJG8Kgmqn8B9AlI0a_Z">這個影片</a>學了一些小技巧,能利用ReportViewer的功能輕鬆幫我們匯出三種格式。</p> <h2>* 顯示清單</h2> <p>報表資料就透過MVC的Model,在View用迴圈印出來</p> <p><a href="http://lh3.ggpht.com/-x0CXjECmcbA/VEIp3IocZHI/AAAAAAAACKM/QVrFWBFqJHo/s1600-h/d32345798e0c4a24b5f4f0f490de0d273.png"><img title="d32345798e0c4a24b5f4f0f490de0d27" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="d32345798e0c4a24b5f4f0f490de0d27" src="http://lh5.ggpht.com/-a-90gX9fxus/VEIp33YzryI/AAAAAAAACKU/XMI3wqzl1H8/d32345798e0c4a24b5f4f0f490de0d27_thu.png?imgmax=800" width="434" height="484"></a></p> <p>我們新增一個Export Controller</p> <p><a href="http://lh6.ggpht.com/-C1f8vUrd9gY/VEIp4mXpHnI/AAAAAAAACKc/iTnMS0YARVY/s1600-h/49df9acbd2e34d859aa33acce23210f1%25255B3%25255D.png"><img title="49df9acbd2e34d859aa33acce23210f1" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="49df9acbd2e34d859aa33acce23210f1" src="http://lh6.ggpht.com/-WZLL7sxltw8/VEIp5mYVLsI/AAAAAAAACKk/PEnGlCWUwo4/49df9acbd2e34d859aa33acce23210f1_thumb%25255B1%25255D.png?imgmax=800" width="617" height="484"></a></p> <p><a href="http://lh3.ggpht.com/-Jv0vANsFSAI/VEIp6ndGNqI/AAAAAAAACKs/PeXjyM_52So/s1600-h/02c9e721743b477bac1c2473391330c0%25255B3%25255D.png"><img title="02c9e721743b477bac1c2473391330c0" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="02c9e721743b477bac1c2473391330c0" src="http://lh4.ggpht.com/-TxS1QxrVOr8/VEIp7IY9TJI/AAAAAAAACK0/-ItVi_Sy2DA/02c9e721743b477bac1c2473391330c0_thumb%25255B1%25255D.png?imgmax=800" width="644" height="398"></a></p> <p>接下來我們再前端新增三種按鈕,並傳所要匯出的檔案類型指向這個URL</p> <p><a href="http://lh3.ggpht.com/-b6HOCK4078c/VEIp7yVxxoI/AAAAAAAACK8/SLShAsHlMEc/s1600-h/264adffca6ef468daa950dcaeb517753%25255B3%25255D.png"><img title="264adffca6ef468daa950dcaeb517753" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="264adffca6ef468daa950dcaeb517753" src="http://lh5.ggpht.com/-YyAiLeX82dE/VEIp8mzUiPI/AAAAAAAACLE/Ng5kOlw0Iys/264adffca6ef468daa950dcaeb517753_thumb%25255B1%25255D.png?imgmax=800" width="644" height="269"></a></p> <p>這樣就能輕鬆的將後端的資料匯出各種格式了!!</p> <p><a href="http://lh6.ggpht.com/-5RICCHehnTE/VEIp9bV-lAI/AAAAAAAACLM/VnxkmIpTQ6E/s1600-h/b0ba442cfe764ebdb1f44f2d7787ddb5%25255B3%25255D.png"><img title="b0ba442cfe764ebdb1f44f2d7787ddb5" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="b0ba442cfe764ebdb1f44f2d7787ddb5" src="http://lh6.ggpht.com/-V2aeoAKO1oQ/VEIp-AXDJsI/AAAAAAAACLU/ho7A3_MsHzQ/b0ba442cfe764ebdb1f44f2d7787ddb5_thumb%25255B1%25255D.png?imgmax=800" width="644" height="204"></a></p> <h4>* 後記</h4> <p>如果所要匯出的資料並不複雜,像此範例只是單純的清單型資料,我都會用這種方式來快速開發,但如果是很複雜的報表…如excel或word,可能就要另外做處理…接下來幾篇陸續介紹。 <p>本系列程式原始碼請至我的Github下載 <a href="https://github.com/kyleap">https://github.com/kyleap</a> <p>** 如內容有誤請告知,將進行修改,謝謝 ** Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com0tag:blogger.com,1999:blog-2224001206258991308.post-51420907377887023982014-10-14T08:31:00.001-07:002014-10-14T08:31:57.041-07:00[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(19) – ReportViewer -設計rdlc檔<h2>* 本篇目標</h2> <p>利用Visual Studio設計我們的報表樣式</p> <h2>* 前言</h2> <p>.NET內建的報表功能,已經有蠻多方便的設計,如果你有更複雜的報表,當然可以參考Crystal Report,以下逐步來講解如搭配前篇SP取得的資料來設計一個報表檔案。</p> <h2>* RDLC</h2> <p>我們先在專案底下點右鍵 -> 加入新項目 -> 選擇資料集</p> <p><a href="http://lh3.ggpht.com/-6q3hUe4ke7k/VD1BvWpkS2I/AAAAAAAACHw/stbzyVp2rng/s1600-h/31d64621770747efa45d8724a396e103%25255B3%25255D.png"><img title="31d64621770747efa45d8724a396e103" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="31d64621770747efa45d8724a396e103" src="http://lh5.ggpht.com/-qi_gIvHhuok/VD1BwdWubAI/AAAAAAAACH4/KXzd4aEs5zU/31d64621770747efa45d8724a396e103_thumb%25255B1%25255D.png?imgmax=800" width="644" height="424"></a></p> <p>再點選加入TableAdapter</p> <p><a href="http://lh5.ggpht.com/-RFeMDX-ttR0/VD1Bw6M4stI/AAAAAAAACH8/mXxFBp-SVMM/s1600-h/73b7eb3eaf26429e8ea3ad52607fc4bc%25255B3%25255D.png"><img title="73b7eb3eaf26429e8ea3ad52607fc4bc" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="73b7eb3eaf26429e8ea3ad52607fc4bc" src="http://lh4.ggpht.com/-_PYoqYbttes/VD1Bxde1YfI/AAAAAAAACII/OP-3z8qm47M/73b7eb3eaf26429e8ea3ad52607fc4bc_thumb%25255B1%25255D.png?imgmax=800" width="644" height="292"></a></p> <p>選擇使用現有的預存程序</p> <p><a href="http://lh6.ggpht.com/-r2Qjvl7_F0M/VD1ByJ50pZI/AAAAAAAACIQ/2BHXMykVRJM/s1600-h/e5818f406212486c9d58d1f591ae6229%25255B3%25255D.png"><img title="e5818f406212486c9d58d1f591ae6229" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="e5818f406212486c9d58d1f591ae6229" src="http://lh5.ggpht.com/-BV_68OtXxOU/VD1By0hktjI/AAAAAAAACIY/8K9vadFQinY/e5818f406212486c9d58d1f591ae6229_thumb%25255B1%25255D.png?imgmax=800" width="549" height="484"></a></p> <p>建立一個GetData方法,回傳DataTable</p> <p><a href="http://lh3.ggpht.com/-uAVa77l2CF0/VD1BzR4wNcI/AAAAAAAACIg/fy-RMtWmkrE/s1600-h/1206ee84aaf744f4a4242de66401c32a%25255B3%25255D.png"><img title="1206ee84aaf744f4a4242de66401c32a" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="1206ee84aaf744f4a4242de66401c32a" src="http://lh6.ggpht.com/-CXhJ6Braqvs/VD1B0FGkA6I/AAAAAAAACIo/NPVA5TG96Gk/1206ee84aaf744f4a4242de66401c32a_thumb%25255B1%25255D.png?imgmax=800" width="548" height="484"></a></p> <p>在專案底下再加入.rdlc檔</p> <p><a href="http://lh6.ggpht.com/-TBSfr87AOOc/VD1B0mUSuBI/AAAAAAAACIw/oh-X2gkGv4I/s1600-h/0bcab3932c5b46d78c79070fdb4928c6%25255B3%25255D.png"><img title="0bcab3932c5b46d78c79070fdb4928c6" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="0bcab3932c5b46d78c79070fdb4928c6" src="http://lh3.ggpht.com/-L5mGtUkgG5E/VD1B1mwb6-I/AAAAAAAACI4/PiFr2xkvQ-4/0bcab3932c5b46d78c79070fdb4928c6_thumb%25255B1%25255D.png?imgmax=800" width="644" height="422"></a></p> <p>接下來就能針對.rdlc去設計,首先我們先加入剛剛的資料集</p> <p><a href="http://lh6.ggpht.com/-o3evpzUYGEA/VD1B2cOnIiI/AAAAAAAACJA/2F8AaKeHrkk/s1600-h/a94b0c144c814acf89a1c755ada91613%25255B3%25255D.png"><img title="a94b0c144c814acf89a1c755ada91613" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="a94b0c144c814acf89a1c755ada91613" src="http://lh4.ggpht.com/-YLBy2zaQj-k/VD1B3HpSSPI/AAAAAAAACJI/1BAYgmQTek4/a94b0c144c814acf89a1c755ada91613_thumb%25255B1%25255D.png?imgmax=800" width="644" height="422"></a></p> <p><a href="http://lh5.ggpht.com/-MArf2Vk8Ch0/VD1B3r7l_9I/AAAAAAAACJQ/QEoUbp39IQs/s1600-h/6c8b0154cd93446781d9b64d9293f1d2%25255B3%25255D.png"><img title="6c8b0154cd93446781d9b64d9293f1d2" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="6c8b0154cd93446781d9b64d9293f1d2" src="http://lh4.ggpht.com/-1YZMLe403Zc/VD1B4S2Z-JI/AAAAAAAACJY/xboZQxprueM/6c8b0154cd93446781d9b64d9293f1d2_thumb%25255B1%25255D.png?imgmax=800" width="644" height="443"></a></p> <p>拉個文字方塊,可以很容易的去調整大小跟字型</p> <p><a href="http://lh4.ggpht.com/-Q0AIlzEKn4E/VD1B5HAWLbI/AAAAAAAACJg/_LDLz4IYEKg/s1600-h/0674be191e53473b9eecc66e5963b660%25255B6%25255D.png"><img title="0674be191e53473b9eecc66e5963b660" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="0674be191e53473b9eecc66e5963b660" src="http://lh4.ggpht.com/-JhEfioyBrmo/VD1B5rXEygI/AAAAAAAACJo/ogQyF9yPZqg/0674be191e53473b9eecc66e5963b660_thumb%25255B2%25255D.png?imgmax=800" width="644" height="213"></a></p> <p>拉個資料集,修改欄位標題及選擇欄位</p> <p><a href="http://lh4.ggpht.com/-j2ORqCy3xvk/VD1B6V0dhNI/AAAAAAAACJw/hMRji4hTlE0/s1600-h/b8dca519b837413abad3e71883cb5f97%25255B3%25255D.png"><img title="b8dca519b837413abad3e71883cb5f97" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="b8dca519b837413abad3e71883cb5f97" src="http://lh5.ggpht.com/-L3jF2SEZqNY/VD1B65DIk9I/AAAAAAAACJ4/Svskx7eTjAY/b8dca519b837413abad3e71883cb5f97_thumb%25255B1%25255D.png?imgmax=800" width="644" height="294"></a></p> <h2>* 後記</h2> <p>基本上.rdlc可以做到很多報表功能,如總計、明細、甚至可以在欄位撰寫一些判斷式…對於一些實務上的報表已經很足夠,下一篇我們來講解程式如何使用.rdlc這個資源檔</p> <p> </p> <p>本系列程式原始碼請至我的Github下載 <a href="https://github.com/kyleap">https://github.com/kyleap</a> <p>** 如內容有誤請告知,將進行修改,謝謝 **</p> Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com0tag:blogger.com,1999:blog-2224001206258991308.post-87542432923243047822014-10-13T09:42:00.001-07:002014-10-13T09:42:46.797-07:00[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(18) – Entity FrameWork 與 SP<h2>* 本篇目標</h2> <p>建立SQL SP,並於Entity FrameWork加入</p> <h2>* 前言</h2> <p>接下來幾篇,會開始介紹報表開發</p> <h2>* Stored Procedure(預存程序)</h2> <p>早期開發上,多半習慣將DAL層放入MS SQL的Stored Procedure,但我遇過公司是將所有商業邏輯也寫在SP裡的,那維護上會非常的痛苦,彈性也非常的低,Entity Framework出來後將DataBase物件化,讓不會懂SQL的人也可以去做資料的處理,且如果今天資料庫切換了,也只要將Conncetion修改,所做的工不會太大。但實務上一個系統常常會有一些報表要製作,報表通常牽扯到非常多的資料表,這時候用EF來講效能會非常的差,我就會將這些"清單型邏輯",這些複雜Join邏輯寫成Stored Procedure。</p> <h2>* 建立SP</h2> <p>此範例很簡單,我們將兩個資料表建立起來(實務上可能很複雜)</p> <p>USE [Northwind]<br>GO<br>SET ANSI_NULLS ON<br>GO<br>SET QUOTED_IDENTIFIER ON<br>GO</p> <p>-- sp_Customer_Orders<br>ALTER proc [dbo].[sp_Customer_Orders]</p> <p>as </p> <p>DECLARE @errorMsg nvarchar(255)</p> <p>begin<br> SET NOCOUNT ON;</p> <p> --取得訂單所對應的客戶<br> SELECT Orders.OrderID,Orders.OrderDate,Customers.CustomerID,Customers.ContactName <br> FROM Orders inner join Customers on Orders.CustomerID = Customers.CustomerID</p> <p>end</p> <p>接著在實體模組加入</p> <p><a href="http://lh3.ggpht.com/-xA3iU_DkW0Q/VDwA5tl8EwI/AAAAAAAACGI/nyHo-f8ypBQ/s1600-h/34ef9490ea4648fbb32362d4fa624765%25255B3%25255D.png"><img title="34ef9490ea4648fbb32362d4fa624765" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="34ef9490ea4648fbb32362d4fa624765" src="http://lh6.ggpht.com/-8TzF9vGGCCk/VDwA6mUjNSI/AAAAAAAACGQ/7_5CdxU3GfI/34ef9490ea4648fbb32362d4fa624765_thumb%25255B1%25255D.png?imgmax=800" width="644" height="365"></a></p> <p>加入剛剛建立的SP</p> <p><a href="http://lh6.ggpht.com/-heZ75FwCRSQ/VDwA7Au96qI/AAAAAAAACGY/p0K_apENVgo/s1600-h/118ac4d1b2604156bf3b067ced1c11c1%25255B3%25255D.png"><img title="118ac4d1b2604156bf3b067ced1c11c1" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="118ac4d1b2604156bf3b067ced1c11c1" src="http://lh3.ggpht.com/-2pdG_daDjRs/VDwA7zfrKfI/AAAAAAAACGg/B2HdXmXsxNo/118ac4d1b2604156bf3b067ced1c11c1_thumb%25255B1%25255D.png?imgmax=800" width="595" height="484"></a></p> <p>接著我們在BLL層建立一個OrderSevice直接使用,不須知道他的join邏輯</p> <p><a href="http://lh5.ggpht.com/-6UdxqRfcO0s/VDwA8upCcOI/AAAAAAAACGo/7_JYFCbY3Xc/s1600-h/c3f8c31f27094a4b82f4464073dc6216%25255B3%25255D.png"><img title="c3f8c31f27094a4b82f4464073dc6216" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="c3f8c31f27094a4b82f4464073dc6216" src="http://lh4.ggpht.com/-DQpiZd7okmQ/VDwA9R6OEII/AAAAAAAACGw/u4ee7E2MNfs/c3f8c31f27094a4b82f4464073dc6216_thumb%25255B1%25255D.png?imgmax=800" width="644" height="247"></a></p> <p>Entity Framework也幫我們產生好相對應的Class,相當方便</p> <p><a href="http://lh3.ggpht.com/-CMtbKmZgG8k/VDwA98M3uSI/AAAAAAAACG4/ydsrwJuUT5c/s1600-h/0cde442eb0484178b1c2e408c94eb3a1%25255B3%25255D.png"><img title="0cde442eb0484178b1c2e408c94eb3a1" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="0cde442eb0484178b1c2e408c94eb3a1" src="http://lh4.ggpht.com/-D-gWslj-ojw/VDwA-g1RNNI/AAAAAAAACHA/Scz2ZAU-uz4/0cde442eb0484178b1c2e408c94eb3a1_thumb%25255B1%25255D.png?imgmax=800" width="644" height="301"></a></p> <p>而Web專案直接像Service要資料</p> <p><a href="http://lh4.ggpht.com/-AfH7Q68hkHA/VDwA_eUmAvI/AAAAAAAACHE/NPArNA-sVwE/s1600-h/0cde442eb0484178b1c2e408c94eb3a1%25255B7%25255D.png"><img title="0cde442eb0484178b1c2e408c94eb3a1" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="0cde442eb0484178b1c2e408c94eb3a1" src="http://lh6.ggpht.com/-rdrE0U3VGgQ/VDwBAOE5l3I/AAAAAAAACHQ/a8uraC7MA14/0cde442eb0484178b1c2e408c94eb3a1_thumb%25255B3%25255D.png?imgmax=800" width="644" height="301"></a></p> <p>取得結果</p> <p><a href="http://lh5.ggpht.com/-S24GHbXjc9s/VDwBAqqWK9I/AAAAAAAACHU/L7NchomhIa0/s1600-h/de2e2deb6e9f4f159b16382acc75a11f%25255B3%25255D.png"><img title="de2e2deb6e9f4f159b16382acc75a11f" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="de2e2deb6e9f4f159b16382acc75a11f" src="http://lh5.ggpht.com/-kjNBDZCrxVc/VDwBBTsrnvI/AAAAAAAACHg/mc5yvqBjXYo/de2e2deb6e9f4f159b16382acc75a11f_thumb%25255B1%25255D.png?imgmax=800" width="1028" height="427"></a></p> <p> </p> <p>本系列程式原始碼請至我的Github下載 <a href="https://github.com/kyleap">https://github.com/kyleap</a> <p>** 如內容有誤請告知,將進行修改,謝謝 ** Anonymoushttp://www.blogger.com/profile/01767146470283866230noreply@blogger.com0