簡單使用

2018年5月17日星期四

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日星期三

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 鍵

2016年3月11日星期五

Asp.net 項目'connectionstring' 已加入

這個錯誤是第一次遇到，自己記錄一下
情況:
掛在他專案下的應用程式、都有連資料庫、跟其他專案的應用程式設定的連現字串name一樣
就會出現這種問題
解法

1.把連線字串名稱改掉
2.<remove name="ConnectionString" />

參考來源
http://zhidao.baidu.com/question/156580753.html

2016年2月4日星期四

Asp.net MVC NuGet 常安裝的(21)

在寫新專案時比較方便加入

.Net Framework
Install-Package Autofac.Mvc5 -Version 4.0.2 
Install-Package bootstrap -Version 3.3.7
Install-Package EntityFramework -Version 6.2.0
Install-Package EntityFramework.zh-Hant -Version 6.2.0 
Install-Package Fancybox -Version 2.1.5
Install-Package jQuery -Version 1.12.4
Install-Package Microsoft.jQuery.Unobtrusive.Ajax -Version 3.2.5
Install-Package Newtonsoft.Json -Version 7.0.1 
Install-Package NPOI -Version 2.4.0 
Install-Package PagedList.Mvc -Version 4.5.0 
Install-Package System.Linq.Dynamic -Version 1.0.7 
Install-Package Microsoft.AspNet.Mvc -Version 5.2.7

.Net Core(2020-11-13)
Model
Install-Package FluentValidation.AspNetCore
Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 3.1.21
Install-Package Microsoft.EntityFrameworkCore.SqlServer.Design
Install-Package Microsoft.EntityFrameworkCore.Tools -Version 3.1.21
Service
Install-Package Dapper
Install-Package Microsoft.AspNetCore.Mvc.Core
Install-Package NPOI -Version 2.5.2
Web
Install-Package X.PagedList.Mvc.Core

libman.json(2020-11-13)

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [   
    {
      "provider": "unpkg",
      "library": "@microsoft/signalr@3.1.4",
      "destination": "wwwroot/microsoft/signalr/"
    },
     {
      "library": "fancybox@3.5.7",
      "destination": "wwwroot/lib/fancybox/"
    },
    {
      "library": "jquery@3.5.1",
      "destination": "wwwroot/lib/jquery/"
    },
    {
      "provider": "unpkg",
      "library": "bootstrap@4.5.3",
      "destination": "wwwroot/lib/bootstrap/"
    },
    {
      "library": "bootstrap-datepicker@1.9.0",
      "destination": "wwwroot/lib/bootstrap-datepicker/"
    }
  ]
}

2015年12月25日星期五

IIS 解決asp.net第一次啟動時慢

話題應該有很多人寫過了
本篇讓自己記錄一下
下次架設機器時可用
1.先下載Application Initialization Module for IIS 7.5安裝
2.再下載Application Initialization UI for IIS 7.5安裝
3.進入IIS設定AlwaysRunning
參考網址
Application Initialization Module for IIS 7.5
Application Initialization UI for IIS 7.5

2015年10月1日星期四

Asp.net MVC Bootstrap submit confirm Button loading(20)

有時在批次執行一些動作時會持續很久
要怎麼讓按紐變成Loading讓使用者不會重複按

@using (Ajax.BeginForm("action", "controller", null, new AjaxOptions { HttpMethod = "POST", OnSuccess = "OnSuccess", OnBegin = "OnBegin" }))
{
 
}

寫兩個function OnBegin OnSuccess
一個是在執行submit前一個在後
加上confirm讓使用者有感


        var btn = $('#MultipleCreate');

        function OnBegin() {
            if (!confirm('確定批次新增嗎??')) return false;
            btn.button('loading');
        }

        function OnSuccess(response) {
            btn.button('reset');
            alert('完成');           
        }

2015年8月6日星期四

jQuery 好用的Select Box

個人覺得比jquery ui 的combobox好用的Select2

2015年7月16日星期四

T-SQL 取得identity資訊

目前想試寫一個排程同步的軟體
預到的第一步就是identity問題
找了一下網路如可簡單組出已下

select 
IDENT_SEED('table_name') as 起始值,
IDENT_INCR('table_name') as 每次增值, 
IDENT_CURRENT('table_name') as 目前最大值

重置indentity

dbcc checkident('table_name', RESEED, 100)

Insert後取得indentity

Select @@Identity

參考來源
請問要去那個資料表查出自動編號 IDENTITY (x,y ) 的起始值(x)及增量
SQL Server的Identity字段使用/复制/重设
Usage of IDENT_INCR and IDENT_SEED function of Identity column in sql server

2015年7月11日星期六

T-SQL smalldatetime or datetime抓當天

有時候資料庫欄位會開smalldatetime 或datetime
但是在select的時候程式若為區間那可能就會抓00:00~2359這樣下程式語法
datediff搭配只需輸入

select a.* 
from table as a
Where 
datediff(dy, a.xxx, '2015-07-10') = 0

2015年6月5日星期五

c# INotifyPropertyChanged實作

網路上已經有許多INotifyPropertyChanged的文章
看了許多但還是不太懂所以看著msdn實作了一次
1.先新增一個class

        public int id { get; set; }
        public string name { get; set; }

2.將class繼承INotifyPropertyChanged

        using System.ComponentModel;
        public class member : INotifyPropertyChanged

3.實作INotifyPropertyChanged

        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged(String info)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(info));
            }
        }

4.修改class

  public int id { get; set; }

        private string _name;
        public string name
        {
            get { return this._name; }
            set
            {
                if (value != this._name)
                {
                    this._name = value;
                    NotifyPropertyChanged("Name");
                }
            }
        }

5.新增一個list(抓假資料如果是資料庫也可直接改)

  public List GetMember(int pCount)
        {
            List lst = new List();
            string name = "test";
            for (int i = 0; i < pCount; i++)
            {
                member create = new member()
                {
                    id = i,
                    name = name + i.ToString()
                };
                lst.Add(create);
            }
            return lst;
        }

6.抓出資料

 member script = new member();
 List lst = script.GetMember(10);
 dataGridView1.DataSource = lst;

7.寫另一個頁面去修改name
會發覺改了後dataGridview1的name也會跟著改
太神奇又好用了
參考網址
HOW TO：實作 INotifyPropertyChanged 介面
範例下載
INotifyPropertyChanged實作

2015年6月3日星期三

Html5 Form內按Enter無效

有時用jQuery或其他方式自訂了Enter的function後會不需要form的submit

<form action="xxx.php" method="post"  onsubmit="return false;">
</form>

參考來源
FORM内でのEnter無効化

訂閱：文章 (Atom)

2018年5月17日 星期四

2018年5月16日 星期三

2018年1月17日 星期三

2018年1月4日 星期四

2018年1月2日 星期二

2016年7月23日 星期六

2016年7月1日 星期五

2016年5月18日 星期三

2016年4月28日 星期四

2016年4月15日 星期五

2016年3月11日 星期五

2016年2月4日 星期四

2015年12月25日 星期五

2015年10月1日 星期四

2015年8月6日 星期四

2015年7月16日 星期四

2015年7月11日 星期六

2015年6月5日 星期五

2015年6月3日 星期三