2018年6月21日 星期四

jQuery 常用的Plugin

平時要用都忘記先記錄一下
行事曆
Full Calendar
日期選擇
bootstrap-datepicker
時間選擇
ClockPicker
多選
Select2
bootstrap-select
Css Animate.css
於
標籤：

2018年5月31日 星期四

c# 判斷日期區間遇到幾次生日

最近用到寫的日期區間遇到幾次生日
也可以用來判斷日期區遇到日期幾次
也許有更好的可以交流 
public static int GetBetweenBirthdayCount(DateTime pFrom, DateTime pTo, DateTime pBirthday)
        {
            int mBirthdayCount = 0;//會過幾次生日

            int TotalYear = pTo.Year - pFrom.Year;//看區間有幾年

            for (int i = 0; i <= TotalYear; i++)
            {

                int y = pFrom.AddYears(i).Year;
                string m = pBirthday.Month.ToString().PadLeft(2, '0');
                string d = pBirthday.Day.ToString().PadLeft(2, '0');
               
                //如果他是生日229的要判斷
                if (m == "02" && d == "29")
                {//四除的盡就算閏年
                    if (y % 4 != 0)
                    {
                        d = "28";
                    }
                }


                DateTime EveryBirthday = DateTime.Parse(y + "-" + m + "-" + d);

                if (pFrom <= EveryBirthday && pTo >= EveryBirthday)
                {
                    mBirthdayCount++;
                }
            }

            return mBirthdayCount;
        }
於
標籤：

2018年5月24日 星期四

Angular 安裝時常用問題處理(09)

1.You seem to not be depending on "@angular/core" . This is an error.
有時候重裝就可以了
npm cache clear --force
npm install
2.Cannot find module '@angular-devkit/core' ...
npm install --save-dev @angular-devkit/build-angular
3.刪除node_modules資料夾再重新
npm install
參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網
於
標籤：

2018年5月21日 星期一

Angular [(Two Way Binding)](雙向繫結)(08)

html部分
<input [(ngModel)]="keyword" placeholder="[(雙向繫結)]" (keyup.escape)="onKeyClear()"/>
  文字:{{keyword}}，字數:{{keyword.length}}
ts部分
  keyword = '';
  onKeyClear() {
    this.keyword = "";
  }
參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網
於
標籤：

Angular (Event Binding)(事件繫結)(07)

$event可傳可不傳
html部分
<a on-click="CountPlus($event)">點擊次數{{count}}</a><br />
<a (click)="CountPlus($event)">點擊次數{{count}}</a>
ts部分
export class EventBindingComponent implements OnInit {
  count = 0;
  CountPlus($event:any) {
    this.count++;
    console.log($event);
  }
  constructor() { }
  ngOnInit(): void {
  }
}
===============================================================
保哥作業1
請利用 Angular 資料繫結方法 (內嵌繫結、屬性繫結、事件繫結) 完成任務。
1.當使用者在網頁右側的關鍵字搜尋輸入文字時，會自動在輸入框的正下方顯示正在輸入的字元數。
2.當使用者在輸入框按下 Escape 按鍵時，會自動清空輸入框的內容。
2022-09-22修正，比較懶的做法寫在同一個判斷中。
html部分
  <input type="text"
         (keyup)="onKeyClear($event)" />
  字數:{{keywordCount}}
ts部分
  keyword = "";
  keywordCount = 0;
  onKeyClear(event: KeyboardEvent) {
    let elm = (<HTMLInputElement>event.target);
    if (event.key == "Escape") {
      elm.value = "";//這段要清除掉Html上的文字
      this.keyword = "";
    } else {
      this.keyword = elm.value;
    }
    console.log(this.keyword);
    this.keywordCount = this.keyword.length;
  }
參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網
於
標籤：

Angular [Property Binding](屬性繫結)(06)

html部分
<a [href]="url" [attr.data-tite]="title">{{title}}</a>
ts部分
export class PropertyBindingComponent implements OnInit {
  title = "{{屬性繫結}}";
  url = "http://tw.yahoo.com";  
  constructor() { }
  ngOnInit(): void {
  }
}
參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網
於
標籤：

2018年5月18日 星期五

Angular {{Interpolation}}(內嵌繫結)(05)

html部分
 <a href="{{url}}">{{ title }}</a>
ts部分
 export class InterpolationComponent implements OnInit {
  title = "{{內嵌繫結}}";
  url = "http://tw.yahoo.com";
  constructor() {   
  }
  ngOnInit(): void {
  }
}
參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網
於
標籤：

2018年5月17日 星期四

Angular 如何建立component(04)

Angular每一個畫面都是多個component所組成
以下會記錄如何新增component
1.首先先輸入
ctrl + `(單引號，通常在1的左邊tab上面)
2.按＋號新增終端機，預設可能是power shell，選擇終端機資料夾預設應該會在目前的專案上
3.建立component 
ng generate component pages
ng generate 建立一個 簡寫 g component 哪一種範本 簡寫 cpages 頁面名稱 

未來請輸入方式如下列
ng g c pages

ng g -h 可看目前版本所有可建立的範本
4.建立起來後，會多一個資料夾及有四個檔案，然後app.module.ts 會異動 
CREATE src/app/pages/pages.component.html (24 bytes) <-Html
CREATE src/app/pages/pages.component.spec.ts (621 bytes) <-測試檔
CREATE src/app/pages/pages.component.ts (265 bytes) <-程式
CREATE src/app/pages/pages.component.css (0 bytes) <-css

UPDATE src/app/app.module.ts (392 bytes) 修改了declarations
及import { PagesComponent } from './pages/pages.component';
5.如何顯示這個頁面？
找到剛新增的pages.component.ts
裡面有一個 selector: 'app-pages'
只要將app-pages加入在app.component.html即可顯示出剛剛的頁面
<app-pages></app-pages>
參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網
於
標籤：

Angular 啟動順序(03)

AngularJs只需在前端宣告ng標籤即可運行
但到了Angular的話完全不同
這次框架有自己個一個流程
所有的程式碼及html都有固定的放法
這樣程式在跑的時候才會正常運行
前篇文章所提到的方法啟動server
npm start
以下是已專案預設的程式跑起來的順序
1.進入網頁index.html
2.main.ts開始載入import
3.啟動AppModule
4.執行AppComponent元件
5.執行AppComponent class
6.執行AppComponent templateUrl
7.執行AppComponent style
8.載入完成呈現畫面
參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網
於
標籤：

Angular 新增專案+開發環境設定+常用快速鍵(02)

由於使用Visual Studio Code跟之前使用Visual Studio有點不太一樣
在Visual Studio圖形界面化的方式可新增專案很方便
Visual Studio Code中可能需要打些指令來新增在此筆記一下
1.cmd
2.建立一個資料夾來放專案用，因有些公司可能在C：無法執行所以此次在D：建立一個projects資料夾，使用Angular Cli來建立Angular的專案（請使用英文或數字命名） 
cd\
d:
md projects
cd projects
ng new firstapp
3.測試是否有建置成功，至剛新增的資料夾使用npm
cd firstapp
npm start
4.開啟瀏覽器看看網站是否有成功，有跑起來會有Welcome to app!
http://localhost:4200/
5.如何發佈 
一般
ng build
加參數--prod
ng build --prod
壓縮整的專案js變小
===============================================================
A.如何改變npm的Port
找到package.json
"start": "ng serve"
改
"start": "ng serve --port 8080"
B.如何關閉npm Server 
ctrl + c
y
C.開啟VS Code，在專案下輸入
code .
D.如果Angular版本更新了要如何升級
專案目錄下
ng update
會出現以下表示升級完成
 We analyzed your package.json, there are some packages to update:

      Name                               Version                  Command to update
     --------------------------------------------------------------------------------
      @angular/cli                       1.2.3 -> 6.0.2           ng update @angular/cli
      @angular/core                      4.4.7 -> 6.0.2           ng update @angular/core
      rxjs                               5.5.10 -> 6.1.0          ng update rxjs


    There might be additional packages that are outdated.
    Or run ng update --all to try to update all at the same time.
E.以述為單一專案升級，升級Global Agnular Cli版本方式
看目前版本
 npm list -g --depth=0
檢查最新版本
npm outdated -g
沒出現文字為目前最新版
有出現代表有新版
Package       Current  Wanted  Latest  Location
@angular/cli    6.0.1   6.0.3   6.0.3
若有新版可執行下列安裝最新版
npm install -g @angular/cli
===============================================================
1.格式化文件
shift + alt + f
2.ts html 快速切換 
alt + o
3.註解
ctrl + /
===============================================================
參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網
於
標籤：

2018年5月16日 星期三

Angular 安裝開發環境For Windows(01)

之前寫過AngularJs目前，改成Angular還尚未寫過完整專案藉由此次機會，從開始使自己筆記一下
此次會使用到多次的命令提示字元，均請使用管理者Administrator開啟，之後都使用cmd代替
1.首先安裝Node JS套件管理工具
2.安裝Visual Studio Code開發工具
3.cmd(記得使用administrator開啟)，看版本
npm -v
node -v
4.安裝angular cli開啟命令提示字元
npm install -g @angular/cli 
ng -v
如有安裝錯誤可輸入依序
npm uninstall -g angular-cli 
npm uninstall -g @angular/cli 
npm cache clean 
npm install -g @angular/cli
參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網
於
標籤：

2018年1月17日 星期三

Asp.net MVC 上傳圖片自動轉正(23)

最近常有同事說上傳到網頁圖片就會自動的90度旋轉
後來想到有一個名詞上網找了一下
可交換圖檔格式常被簡稱為Exif（Exchangeable image file format）
裡面有個選項是圖像方向於是找了發現非標準
想說是否能抓取EXif取得圖片轉的方向然後將圖片轉回來
很幸運的網路已經有人寫過將之修改
                if (file != null && file.Count() > 0)
                {
                    foreach (var item in file)
                    {
                        if (item != null)
                        {                            
                            //轉成圖片                           
                            System.Drawing.Image img = System.Drawing.Image.FromStream(item.InputStream);
                            //取得旋轉度數
                            foreach (var prop in img.PropertyItems)
                            {
                                if (prop.Id == 0x0112) //value of EXIF
                                {
                                    int orientationValue = img.GetPropertyItem(prop.Id).Value[0];
                                    RotateFlipType rotateFlipType = GetOrientationToFlipType(orientationValue);//取得轉的度數
                                    img.RotateFlip(rotateFlipType);//依度數轉成正的
                                    break;
                                }
                            }

                            //處理圖片 轉二進位 或存到路徑上
                            //byte[] byteImage = imageToByteArray(img);//轉二進位
                            //img.Save.....
                        }
                    }
                }


  public static  RotateFlipType GetOrientationToFlipType(int orientationValue)
        {
            RotateFlipType rotateFlipType = RotateFlipType.RotateNoneFlipNone;

            switch (orientationValue)
            {
                case 1:
                    rotateFlipType = RotateFlipType.RotateNoneFlipNone;
                    break;
                case 2:
                    rotateFlipType = RotateFlipType.RotateNoneFlipX;
                    break;
                case 3:
                    rotateFlipType = RotateFlipType.Rotate180FlipNone;
                    break;
                case 4:
                    rotateFlipType = RotateFlipType.Rotate180FlipX;
                    break;
                case 5:
                    rotateFlipType = RotateFlipType.Rotate90FlipX;
                    break;
                case 6:
                    rotateFlipType = RotateFlipType.Rotate90FlipNone;
                    break;
                case 7:
                    rotateFlipType = RotateFlipType.Rotate270FlipX;
                    break;
                case 8:
                    rotateFlipType = RotateFlipType.Rotate270FlipNone;
                    break;
                default:
                    rotateFlipType = RotateFlipType.RotateNoneFlipNone;
                    break;
            }

            return rotateFlipType;
        }
參考來源
EXIF
Reset Image Orientation using EXIF in C#
於
標籤：

2018年1月4日 星期四

Windows Win10安裝SqlServer2012錯誤碼0x800F081F

近期將win7換成win10
所以電腦都已重新安裝方式
於是遇到一些問題
在win10下安裝SqlServer2012時需要.net3.5 sp1可使用
1.下載獨立安裝
2.控制台 > 新增移除程式 > 開啟windows功能 > .net...
但以上方法都會出現問題
錯誤碼:0x800F081F，微軟在文章中已有提到問題原因
解決方法
命令提示字元(管理者權限)
DISM /Online /Enable-Feature /FeatureName:NetFx3 /All /LimitAccess /Source:光碟代號:\sources\sxs
參考來源
.NET Framework 3.5 安裝錯誤：0x800F0906、0x800F081F、0x800F0907
無法安裝.Net Framework 3.5問題(錯誤碼: 0x800f081f)
於
標籤：

2018年1月2日 星期二

IIS Nas+IIS虛擬目錄

因時代改變由圖片變成了影片需要更大的空間，
但總覺得產品也變的比較容易壞
所以由之前的D槽變成了Nas
由IIS連上Nas的方法提供一個給遇到的人或給未來的自己
1.建立網站目錄
2.新增虛擬目錄
3.輸入"別名"
4.在"實體路徑"部份要輸入UNC 例:\\192.168.0.2\\myvideo(當然Nas上要先建好這資料夾)
5.連線身份輸入可登入Nas myvideo 資料夾的帳號密碼
參考來源
IIS站點/虛擬目錄中訪問共享目錄(UNC)
於
標籤：

2016年7月23日 星期六

Azure 設定相關文章及安裝軟體

Azure Virtual Machine Server 2012 安裝設定及中文化
於

2016年7月1日 星期五

Asp.net MVC 設定圖片路徑(22)

也許有些美編會將大圖或背景寫在Css裡
但萬一使用者有需要異動資料夾或是由資料庫撈時就沒辦法
所以如果有需求時會拿到html裡如下
<div id="status" style="background-image: url(image/123.gif)"></div>
如果需要做可以動態改變時怎麼辦
網路做法有一堆
自己想到一個做法
<div id="status" style="background-image: url(@Url.Action("Index" , "images")/status.gif)"></div>
使用@Url.Action來產生連結這樣就可做多種變化
於
標籤：

2016年5月18日 星期三

分層式架購相關文章

以下不錯文章記錄
Repository，我可能不會用你
Repository，我可能不會用你 (2) - 範例
應用程式的分層設計 (1) - 入門範例
應用程式的分層設計 (2) - 一點改進
博客园的大牛们，被你们害惨了，Entity Framework从来都不需要去写Repository设计模式
mrkt文章可一步一步學習
ASP.NET MVC 專案分層架構 Part.1 初學者的起手式
ASP.NET MVC 專案分層架構 Part.2 抽出 Repository 裡相同的部份
ASP.NET MVC 專案分層架構 Part.3 - 個別 Repository 的資料存取操作
ASP.NET MVC 專案分層架構 Part.4 - 抽出 Model 層並建立為類別庫專案
ASP.NET MVC 專案分層架構 Part.5 - 建立 Service 層
ASP.NET MVC 專案分層架構 Part.6 - DI/IoC 使用 Unity.MVC
ASP.NET MVC 專案分層架構 - 建議與補充說明
加上 Unit of Work，抽離Entity Framework的依賴就完美了
於
標籤：

2016年4月28日 星期四

Asp.net MVC MvcReportViewer

網路上看到的先跟大家分享，有空再實作看看
ASP.NET MVC Html Helpers for ReportViewer Control
於
標籤：

未分類 TypeScript教學手冊

好東西跟大家分享
TypeScript教學手冊
於
標籤：

2016年4月15日 星期五

c# WinForm鍵盤對應畫面輸入例如小鍵盤

這功能應該網路上都找的到
因為比較少寫winform所以自己記錄一下
1.首先winform 建構式時要設定
this.KeyPreview = true;
2.覆寫Form.ProcessCmdKey大致上這樣就可以了
  protected override bool ProcessCmdKey(ref Message msg, Keys keyData)
        {
            switch (keyData)
            {
                case Keys.NumPad1:
                case Keys.D1:

                     //按下1或鍵盤1時處理      
                     return true; 
                case Keys.Enter:

                    //按下Enter時處理                  
                    return true; 
                case Keys.Escape:

                    //按下Esc時處理
                    return true;
            }

            return base.ProcessCmdKey(ref msg, keyData);

        }
參考來源
Form.ProcessCmdKey 方法 (Message, Keys)
c# - 在 WinForm 中讓 Enter 鍵變成 Tab 鍵
於
標籤：
訂閱： 文章 (Atom)