好像為了這個找了很多次 google, 每次都花了不少時間..

1. 新增功能角色
 
2. 新增管理服務
 
3. 安裝 Web Deploy 套件 
https://www.iis.net/downloads/microsoft/web-deploy

4. 完工..

參考: https://stackoverflow.com/questions/41386690/missing-import-web-application-option-in-web-deploy-3-6

相關參考
https://vuejs.org/v2/guide/

1.
加入vue.js

2.
先"包裹"一層 要用到Vue的元素
個人覺得有點想原本習慣的<!--Content-->
但這次只要放入標籤(我是用Id)
像是範例為 vMain   
然後宣告js 物件 我是取名也叫做 vMain 不知道會不會有撞名問題
所以我的el: 就是 #vMain

3.
再來加入變數
{{Creat_Date}}  兩個括號 桃紅色的
如果data 這個物件裡面有一個叫Creat_Date 的資料他就會被放進去

這樣第一個app 就完成了。

其中 Vue 裡面包含幾樣東西 
el >> 標示 這個Vue 的標籤
data >> 裡面存放的資料變數
created >> 生命週期的
methods>>包含各種功能function

這次的列表頁需要用到以前用的 List Item 跟 Pager
對應到vue 會使用到
v-for for 迴圈
v-for" item in dt  ">> dt 為data中的一個array陣列 (此範例中 為PD 中的 DT)
item 則是在這裡的區域變數

有些要顯示有些要隱藏
v-if
v-if" pager.currentPage  > 1" pager 為data 中的一個物件 裡面有包含 currentPage 的變數

還有要傳ajax 回去要資料
所以要在 vue 中的 methods 建立 function
已這次的例子 getList就是目前的function 可以用到一些 data 裡面的資料
回傳成功之後資料也可以回寫在data上面

以及之前會在各種事件的觸發 
@click 觸發點擊事件
在標籤上加上 @click 可以觸發 類似 onclick 的事件 
但是是調用methods裡面function

日期格式
由於之前的套件PD 回傳的日期資料會是 yyyy-MM-ddTHH:mm:ss 這樣的格式
所以使用了 map  將 dt 裡面的日期 轉換成為我要的格式

v.dt.map(function (obj) {
      var rObj = obj;
      rObj["Create_Date"] = $.datepicker.formatDate('yy-mm-dd', new Date(obj["Create_Date"]));
      return rObj;
});

過去都是使用 jquery lazy load js 來實作延遲載圖，
其運作原理是偵測scroll事件以及img物件的相對位置來決定要不要load圖片

現在有更簡單的方式，就是用 IntersectionObserver API 這個 Web標準
來偵測 img 物件是不是進入可視 webview 範圍
https://developers.google.com/web/updates/2016/04/intersectionobserver

document.addEventListener("DOMContentLoaded", function() {

var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));;



if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) {

    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {

     entries.forEach(function(entry) {

        if (entry.isIntersecting) {

         let lazyImage = entry.target;

         lazyImage.src = lazyImage.dataset.src;

         lazyImage.srcset = lazyImage.dataset.srcset;

         lazyImage.classList.remove("lazy");

         lazyImageObserver.unobserve(lazyImage);

        }

     });

    });



    lazyImages.forEach(function(lazyImage) {

     lazyImageObserver.observe(lazyImage);

    });

}

//這裡可以加上else處理萬一瀏覽器不支援的狀況

});

網頁裡面只要用  <img data-src='圖片網址' class='lazy' />  就可以啦

IntersectionObserver API
目前 Can I Use 網站顯示大部分 browser 都支援，iOS safari 要 12.2 版才支援
應該可以放心使用


 

A下拉霸
 <div class="col-md-6">
                                        <label for="contact:fromlan">Source Language <span class="red">*</span></label>
                                        <div class="bfh-selectbox" data-name="From_Language_Id" id="FromLanItemParent">
                                            <!--FromLanItem S-->
                                            <div data-value="{Id}"><img src="assets/images/_smarty/flags/{Image}" alt="{Abbreviation}"> {LanguageName}</div>
                                            <!--FromLanItem E-->
                                        </div>
                                    </div>

自動生成的下拉霸
1 name 要用 data-name=""來設定
2 完全沒有選擇的時候可能會回傳空值

套件來源
http://bootstrapformhelpers.com/select/

B電話號碼
<label for="contact_department">Your Phone Number </label>
                                        <div>
                                            <input id="phone" name="phone" type="tel">

                                        </div>
                                        <div style="display:none">
                                            <input id="PhoneCountry" name="PhoneCountry" type="">
                                        </div>


                                        <script src="/assets/build/js/intlTelInput.js"></script>
                                        <script>
                                            var input = document.querySelector("#phone");
                                            var iti1 = window.intlTelInput(input, {
                                                // allowDropdown: false,
                                                // autoHideDialCode: false,
                                                // autoPlaceholder: "off",
                                                // dropdownContainer: document.body,
                                                // excludeCountries: ["us"],
                                                // formatOnDisplay: false,
                                                // geoIpLookup: function(callback) {
                                                //   $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
                                                //     var countryCode = (resp && resp.country) ? resp.country : "";
                                                //     callback(countryCode);
                                                //   });
                                                // },
                                                // hiddenInput: "full_number",
                                                // initialCountry: "auto",
                                                // localizedCountries: { 'de': 'Deutschland' },
                                                // nationalMode: false,
                                                // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
                                                placeholderNumberType: "MOBILE",
                                                // preferredCountries: ['cn', 'jp'],
                                                separateDialCode: true,
                                                utilsScript: "/assets/build/js/utils.js",
                                            });
                                            input.addEventListener("countrychange", function () {
                                                $('#PhoneCountry').val(JSON.stringify(iti1.getSelectedCountryData()))
                                                // do something with iti.getSelectedCountryData()
                                            });
                                        </script>

需要用另一個欄位來記錄電話號碼的國家資料 

套件的來源
https://github.com/jackocnr/intl-tel-input
 

若是在某個 namespace 之下, 有和 Root 階層相同名稱的物件. 此時, 該 namespace 之下的物件無法直接指定根目錄下的物件.

解決方法, 在物件名稱前面加上 global::

 
 

 
1. 從最外層找 Security(安全性) > 確認有bulkadmin

2. 從最外層找 Logins(登入) > 會使用 Bulk Inset 的帳號 
3. 右鍵點選Properties (屬性) > 點選 ServerRoles (伺服器角色)
4. 勾起 bulkadmin > Ok 即設定完成


 

作業系統版本：Platform 



參考網址：
https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)

注意事項 (為避免產出結果和預期有重大差異, 請詳讀以下內容):

1. 若後台有使用 HTML 編輯器, 以 CKEditor 現有功能為準. 編輯器所見內容和前台實際內容可能有差異, 此為無法避免之情況, 請僅慎使用, 建議以文字模式編輯, 以避免跑版.
2. 驗收以 Chrome, IE, Safari, Firefox 結案時間的最新兩個版本為準(IE 目前為 IE Edge 及 IE 11). 手機以前 10 大廠牌兩年內出版的手機為準.
3. Android 手機僅測試 Chrome, IOS 手機僅測試 Safari. 其它手機預設瀏覽器或 APP 內建流覽器不包括在驗收範圍之內.
4. 若需要文件, 除報價有說明外, 應另外計費, 若合約中包括程式檔案說明, 僅限我方建立之程式檔案, 引用之公開套件不另做文件說明.
5. 若客戶要求資安弱點掃瞄, 或通過特別認証, 應另外計費.
6. 本公司盡力維護程式品質, 但無法保証無 Bug, 上線前請完整測試. 若上線後才發現之 Bug, 本公司僅負責修復, 無法提供額外賠償.
7. 主機代管限制
    圖檔以經 Cloudfalre 為準. 若需更高品質可代為申請 amazon 的 CDN 服務.
    Email 不保証送達, 若需更高品質可代為申請 amazon 的 SES 服務.
    每月 1000 張訂單為限, 超過後要另外計算費用.
8. 網站代管, 資料備份以一天一次為準, 如需增加頻率, 另外協議後計價.
9. 搜尋建議使用 Google 的 site search(但偶爾會有廣告, 出現機率很小), 若要自行客製, 合約未明確規定時, 以各單元分開搜尋為準, 例如產品及新聞的搜尋結果會分成兩個搜尋結果頁面, 排序為依等定欄位排序, 比對方式為所輸入的文字明確比對.

UW -> DB 物件產生器會產生兩個function
GetAllDataFromBaseTableWithCache(string OrderFields = "_Default", bool IsCopy = true )
以及
Get物件名稱FromCachedDT(string Key)
-----------------------------------------------------------
設計上是希望將所有資料Cache在記憶體，然後前端直接抓出資料，不須到資料庫抓資料
理論上網頁速度應該比較佳，實際上卻發現是效能殺手

原因在於 GetAllDataFromBaseTableWithCache 是抓出整個table的資料放到 Cache
然後又做了一件事，當有人要資料時，會把整個 DataTable 做 Copy() 再 return
也就是說，當DataTable有數千筆資料列時
每叫用一次 "Get物件名稱FromCachedDT(string Key)" 就會把數千筆資料整個複製一次
再從複製出來的DataTable Select 出一列 return
------------------------------------------------------------
解決方法:
Get物件名稱FromCachedDT(string Key)  --> 改成一筆一筆資料做 Cache，這樣 Copy() 只會Copy一筆
實測上，原本頁面要跑1.8秒，調整後可以 0.4 秒就完成
-----------------------------------------------------------
結論:
PG產生器就把 GetAllDataFromBaseTableWithCache 拿掉吧

        public void TEST(SEPM.SEPMDataContext oDC)

        {

            //一般 LINQ 寫法, 欄位只能寫死, 如:

            var Q = query.OrderBy(r => r.statusId).ToList();



            //若 OrderBy 的欄位不是固定的



            //方法一：條列

            var orderBy = "XXX";

            if (orderBy == "ownerId")

            {

                Q = Q.OrderBy(r => r.ownerId).ToList();

            }

            else if (orderBy == "endDate")

            {

                Q = Q.OrderBy(r => r.endDate).ToList();

            }



            //方法二：

            Q = Q.OrderBy(r => GetPropertyValue(r, orderBy)).ToList();

        }



        private object GetPropertyValue(object obj, string property)

        {

            System.Reflection.PropertyInfo propertyInfo = obj.GetType().GetProperty(property);

            return propertyInfo.GetValue(obj, null);

        }

參考：http://coderemind.blogspot.tw/2013/10/linq.html