加構獨立的 API Server 時, 要使用 Cookie 認証必需有以下條件:

1. Web Server 和 API Server 有相同的父網域.
2. Cookie 的網域指定到相同的父網域.
3. 在 API 的 Application 中允許 CORS Request, 需要修改 Startup.cs

3.1 在 ConfigureServices 中要加入  AddCors, 而且要記得 AllowCredentials()

        public void ConfigureServices(IServiceCollection services)

        {

            services.AddCors(options =>

            {

                options.AddPolicy(name: "Cors(PolicyName",

                                 builder =>

                                 {

                                     builder.WithOrigins("https://web1.yourdomain.com",

                                                         "https://web2.yourdomain.com")

                                     .AllowCredentials();

                                 });

            });



            services.AddControllers()

                .AddNewtonsoftJson(opt =>

                 opt.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver());

3.2 在 Configure 中, 要加入 app.UseCors("Cors(PolicyName"), 記得要在  UseAuthorization() 之前.

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

        {

            app.UseExceptionMiddleware();



            app.UseHttpsRedirection();



            app.UseHttpsRedirection();



            app.UseRouting();



            app.UseCors(MyAllowSpecificOrigins);



            app.UseAuthorization();

4. 在 Client 端要加上 withCredentials: true

                            $.ajax({

                                url: apiRoot + "apiurl",

                                type: 'GET',

                                dataType: 'json', // 預期從server接收的資料型態

                                success: function (res) {

                                    console.log("success: ");

                                    console.log(res);                                    

                                },

                                xhrFields: {

                                    withCredentials: true

                                },

                                error: function (XMLHttpRequest, textStatus, errorThrown) {

                                    alert("發生錯誤");

                                }

                            });

相關參考
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;
});

這兩天發現的現象。有點不好找錯，所以紀錄一下
因為制式報名頁面使用 ajax form 物件，但 ios 的 safari 一直發生資料有送出，
但是送出後網頁就不跑success後面的 javascript，例如彈跳訊息及導到下個頁面
一開始debug的方向有點猜錯，所以花了點時間找問題
後來才注意到，原來他跑到 ajax error去了，不是 ajax success
直覺可能是 ContentType 的問題，因為預設是 text/html
結果 Response.ContentType 改 application/x-javascript, 就過了  (WTF)
我猜 application/json 應該也沒問題吧
------------------------------
經查證: application/json 比較正確 



 

又發現新說法

我們在 front-end 做 scroll event的監聽的時候很常會過度的觸發要執行的事情，因此導致效能不太佳，
我們需要的是固定頻率執行某個function ， 這個原來叫 throttle

另外一種狀況像是autocomplete，不需要每一個keyup 都去ajax 去backend 抓資料回來，所以我們過去，
設一個變數去記住setTimeout 回傳回來的數字，如果下一次的keyup 發生在預設的時間內就去把 setTimeout清掉。
原來這種做法，有一個稱呼叫 debounce

不過jQuery 沒有內建這兩個function。這樣在複雜的 js 中增加易讀性。

在做地址的時候用了一個套件(TWZIPCODE)
可以幫你產生下拉霸的郵遞區號選項
很方便(jQuery)
但是在控制他的資料及回傳
又不知道怎樣比較方便直觀了

首先目前也是文字控制的方式是
UWForUNT.WU.ReplaceStringInControl(Me.Page, "#Post_Code#", Post_Code)
直接用 #Post_Code#
再把她取代

直接讓前端讀到值

回傳時 若是用後端控制 不用再傳ajax 或是 塞到別的後端控制項
回傳的方式
UW.WU.GetValueFromQueryStringOrForm("Post_Code")

但是因為之後不讓 Page Load 再次改成預設值
可以加
If Not Me.IsPostBack Then
   UW.WU.GetValueFromQueryStringOrForm("Post_Code")
End If
才不會永遠是預設值
(            $('#twzipcode').twzipcode({
            zipcodeSel: '#Post_Code#', // 此參數會優先於 countySel, districtSel
            countySel: '台北市',
            districtSel: '大安區',
            zipcodeName: 'Post_Code'
            })
)

他如果有包在裡可以直接讀取

另外若是 有一些後端要傳給前端的資料 用response.Write("<script>XXX</script>")
可以直接寫入前端

用 ajax 傳資料時
IE 9 不支援 url"" 填空白 (預設自己)
要填自己 : url"Myself.aspx" 

修改QC檢查站,新增效期檢查功能,因需要在動態產生的產品品項加上效期檢查鈕,每次動態產生的項目都要為按鈕元素綁定
觸發ajax檢查效期事件,原先的作法是每次動態產生的同時,為該元素綁定一次事件,品項有幾項就要做相同的綁定次數,後來在網路上看到另外一種寫法,利用DOM事件會由子元素一路向父元素Bubble Up的特性,在document或特定元素統一掛上事件函數，事件被觸發時再透過選擇器比對事件目標元素是否吻合，決定要不要執行事件邏輯，藉此提升效率，同時還能將"未來才會產生的元素"也納入事件的涵蓋範圍,以下是範例:

$(document).ready(function () {

            //原先的寫法:

           $("td").bind("click", function(){

　　　　 $(this).toggleClass("click");

　　 });

//事件委託:

​$("table").delegate("td","click", function(){

　　　　 $(this).toggleClass("click");

　　 });

    })

在這邊利用事件冒泡的特性,藉由頁面載入完成的同時對父元素作事件委託處理,接下來不管產生幾個動態元素,都可以透過事件監聽判斷該函式是否該執行,原先如果動態產生一百個品項就要綁定一百次的事件,只要頁面載入完成後一次就完成,達到有效率的寫法!!

以前只是用 facebook 的server端 API 來處理登入
這次因為活動關係而純粹使用 JS SDK 來處理 user 的發文
這裡把一些用到 function 作整理
比較特別的是 FB.login 使用時機，因為他會 window.open 新視窗
若是 ajax 資料後再呼叫，通常會被瀏覽器檔下來
使用時機最好是user點了button後就直接執行

//先檢查是不是已經登入

FB.getLoginStatus(function (response) {

    if (response.status === "connected") {

    // 已登入FB

    }

else {

        // 未登入FB

        // 盡量不要在此呼叫 FB.login , 因為彈跳視窗會被擋下來

}

});



//呼叫登入 scope:publish_stream 是要讓user同意發文到FB的權限

FB.login(function (response) {

    if (response.authResponse) {

        // 已登入，可取得 AccessToken

    } else {

        // 未登入

    }

}, { scope: 'publish_stream' });



// 檢查 user 有無同意發文到FB的權限 (publish_stream)

FB.api({ method: 'users.hasAppPermission', ext_perm: 'publish_stream' }, function (resp) {

    if (resp === "1") {

        //有同意

    } else {

        //不同意

    }

});



// 分享連結到登入者的FB牆

// msg 是發文的內容

// link, picture, caption, description 是一組的

var args = {

    message: msg,

    link: product.Link,

    picture: product.Picture,

    caption: product.Name,

    description: "超高口碑BB霜/CC霜、頂級精華液哪款半價 由你決定!"

};

FB.api('/me/feed', 'post', args, function (response) {

    if (response.id) {

        // 成功會回傳訊息id

    }

    else {

        // 分享失敗

    }

});

再補充一下，若只是單純分享網頁，可以使用 FB.ui，就不用管有無登入以及權限問題

    FB.ui({

        method: 'feed',

        name: '快去搶！超過9成的使用者滿意推薦的《玻尿酸精華》',

        link: 'http://www.shopunt.com/tch/event/2014-aqua-deluge/default.aspx',

        picture: 'http://www.shopunt.com/Upload/tch/unt/14mar/fb154x154.jpg',

        caption: 'UNT 頂級玻尿酸保濕精華液(奢華)',

        description: '熱銷破百萬 真實口碑見證的水感奇肌 逆時補水科技 快速滲透 為肌膚注入高水位……'

    },

        function (response) {

            if (response && response.post_id) {

                // handle  success

            }

            else {

                alert("facebook分享失敗!");

            }

        }

    );

當使用Ajax做回應的時候～
有時候會將HTML本文做取代
例如：$(e).html(回應文)、$(e).replaceWith(回應文)
但是回應文中若是包含Javascript可能會執行，但是並不會顯示在Html裡面
注意：會執行、但不一定會顯示

最近常使用 jQuery ajax form 處理表單，意外發現使用ajax form 傳送的 textarea 資料斷行符號只會有 vbLf (\n)
而非我們一般認知的 vbCrLf (\r\n)

原因在於 javascript 變數處理 string 資料，斷行文字只有 \n 不會是 \r\n
ajax form 物件在轉換 form data 到 XHR 的 post data 時，自然就把 \r 給濾掉了
所以 Server 會端收到僅有 \n 的斷行符號

這樣使用 UW.TextFns.ContentToHtml 就不會產生 "<br>" 了
因為這支程式是使用 vbCrLf 去取代成 <br>