翁百璋與大泡泡的奇幻旅程

因為 .Net5 的推出，正式宣佈了Blazor˙來臨，

相關的技術請參考微軟的技術文件，還有很多的文章，

我自己也會慢慢寫出來，

我這邊只解釋一下資料實作，

首先你必須要知道Blazor都是在前端運行，

直接給Code 

https://jsfiddle.net/j3uybk2j/5/

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

 $(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $("#files").on("change", function(e) {
      var files = e.target.files,
        filesLength = files.length;
      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove\">Remove image</span>" +
            "</span>").insertAfter("#files");
          $(".remove").click(function(){
            $(this).parent(".pip").remove();
          });
                    
        });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Your browser doesn't support to File API")
  }
});

這是小技巧,簡單來說就是懶, 一行幹掉省去還要去跑foreach 

最後效能調教的時候這都會是一些小細節

可以一次解決的就直接解決掉,

這個範例是SP, 當然要跟DBA合作很密切

不然這段是有點危險的.

當你存放在App_Code裡面的程式無法在其他的地方Using時

有個設定其實是應該要被預設的

但是後期的VS2017-VS2019似乎已經解決這個問題

我是再VS2015遇到的,

不用懷疑, 有些專案換了VS版本就是不行了,

這問題很簡單, 我們開發時要常常開啟F12來看看目前狀況, 

不要盲目地開發

觀測別人程式碼常常都會看到在載入一些資源時為什麼後會都會帶一些怪怪的亂數字串

主要就是讓Server不會去Cache

以下就是解法,  Server會重新去取檔案,

我被同事問過很多次，當然我也因為這種問題困擾過，

這只是一個小觀念

問題就是有沒有辦法做到 List<List<string>>

簡單來說就是一對字串的集合的集合，

我遇過好幾是同事都卡在這邊，

其實解法真的很簡單，就是一念之間

這一題研究很難，網路上的文章比較雜亂，我自己是看了很多不斷嘗試才成功，

當我講解給同事聽時，同事說，怎麼這麼簡單，我說，因為我消化過了．XD

廢話不多說．馬上開始

    [AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, AllowMultiple = true, Inherited = true)]

現在已經是2020了，Net 5也推出了，

但是不可以避免的事，有時候還是得串接一些third party系統的XML Web Service，

我們當然可以用以前的方式直接使用Web參考的方式來呼叫取回ＸＭＬ，

但是常常第三方只會先提供接口，帳號密碼都是暫時的，網址還會更換，

雖然有CI/CD，但是我們總不會希望把帳號密碼跟連結的URI放在程式碼內，

繼前一篇　[JavaScript]如何在mp3檔案上傳到後端Server前,由前端獲取相關檔案資訊　　

現在我們聊到上傳Wave的問題，線上音樂現在有標榜上傳48KHz/24bit，

這樣是高品質音樂，高聆聽享受，

而現在唱片製作最少也都是這樣的格式以上，

至於說要用多高規的格式，是不是就是好事，這不再這篇文章的討論範圍，

雖然現在網速都很快，上傳檔案總是需要一點時間，上傳一首mp3到後端似乎也不用幾秒，

假設今天有個狀況，我們必須要限制mp3的檔案大小, kbps, 時間長短，

上傳到後端來判斷這個太簡單了，一大堆套件可以使用，範例程式一大堆，



但是請注意，你還是得花個幾秒鐘等上傳再來回報，

如果我們可以在前端使用HTML5以及使用瀏覽器的localstorage

讓這項工作在瞬間（我的爛電腦體驗大概幾十毫秒吧）就完成了，節省下來的可是很多資源呢!!
​​​​​​
先HTML部分準備一個上傳檔案的input元件再準備一個audio元件


<p>上傳 .mp3 檔案</p>

<input type="file" id="file" />

<audio id="audio"></audio>

 

接下來就是JavaScript部分，先綁定file的change事件


$("#file").change(function(e) {

    var file = e.currentTarget.files[0]; //取得檔案物件

    $("#filename").text(file.name); //file.name檔名
    $("#filetype").text(file.type); //file.type檔案型態, 正確應該是　audio/mp3
    $("#filesize").text(file.size); //file.size這裡是Bytes

    objectUrl = URL.createObjectURL(file);
    //這個不多做解釋, 黑暗大解說的很詳細了 http://blog.darkthread.net/post-2014-03-12-html5-object-url.aspx

    $("#audio").prop("src", objectUrl); //指定audio來源

});

這邊請注意一點，當檔名跟檔案型態與檔案大小，這前三項不符合我們的需求，就直接先擋掉，

就不要再去做createObjectURL這件事情，

接下來，

audio物件綁定 canplaythrough 事件, 如果選到的檔案是無法被撥放的，這個事件將不會被觸發，

$("#audio").on("canplaythrough", function(e){

    var seconds = e.currentTarget.duration;  //這邊得到總秒數

    var kbit=filesize/128;
        // filesize是剛剛取得的Bytes, 這邊要換算成kbit 所以bytes * 8 = bits, 然後再除以1024 = kbits
        
    var kbps= Math.ceil(Math.round(kbit/seconds)/16)*16; 
        //這邊要換算成kbps K bits per secoond, 這邊的算法是要取一個整數, 也許是128,160等等
  
});

如此, 在client端就可以得知道相關的資訊, 當然方式不只有這一種, 

Let’s Encrypt 是一家可以免費申請SSL憑證的單位，以往還需要用下command的方式才能使用，

現在出現一個線上工具 https://www.sslforfree.com/

整個讓所有過程簡單許多，以下將用一步一步的圖文講解，

從申請、驗證方式、Visual Studio的操作到最後整合到Azure Cloud Service ，

注意：這是Azure Cloud Service，不是App Service，文後會有App Service的參考連結.

這種狀況在本機沒問題沒問題，但是經過部屬到IIS上就出問題了，

如果是這樣找不到的狀況，道專案裡面的參考將這個參考選擇複製到本機，

Ａ：＂請問一下，那我把資料庫照文件都使用管理工具修改好了，但是按儲存時

他說甚麼要不允許我儲存變更然後要卸除啊甚麼的？修改不了啊！！？＂

Ｂ：＂那你有看完他整段的訊息嗎？＂

Ａ：＂啊～～等我一下，我再去看一下＂

Ａ：＂甚麼　啟用了 [ 防止儲存需要資料表重建的變更] 選項

我覺得一個產品要好，撇開那些甚麼甚麼銷售技巧甚麼的，

最大的重點就是要容易使用，快速上手．

雖然我這樣比喻有點不太洽當，

但是灌一個SQL Server難道不能像買台電視，線接好，

遙控器馬上可以用嗎？

比較注重資安的網站，為了避免使用者被植入木馬紀錄鍵盤輸入的紀錄，

所以產生動態鍵盤這個東西，像是下圖所示

這個可以讓使用者用滑鼠去點，不用透過鍵盤，然後每一個按鈕每一次的值都不一樣，

所以叫做動態鍵盤．

這次遇到的是一個交易系統，客戶那邊負責撰寫stored procedure (SP)，

雙方在進行第一次測試前，溝通只有靠規格文件，測試一定要到客戶端，

因為資料庫是封閉系統，所以在開發階段時，也得對規格文件模擬出

客戶端的狀況，但是假的SP不可能完全呈現真實的狀況，

所以前幾次到現場測試時，可以用災難來形容，

套版是我最討厭的事情，枯燥無味沒有技術性，還常常套壞掉，重套．

或是設計改了，切版改了，有時候重套還比較快．

以往ASP.NET　MVC常在宣稱的關注點分離，後來也很少聽到了，

以前在WebForm的時代，就已經沒在用Web Control了，使用public的方式，

依樣可以傳到前端，當然啦Razor是比較漂亮一點，

這個問題我以往不知道被多少人問過，寫下來以後被問直接來看這篇文章就好了．

首先情景是這樣的，後臺系統有個功能叫做問卷管理，而操作的方式就是新增一個問券，

最常看到的就是報名或是吃喜帖，就像Google表單，然後新增很多題目，

所以會有N個題目，每個題目有Ｍ個選項，還有單選或是複選，或是輸入文字．

前端與後端的帳號密碼輸入欄位.

究竟要不要選擇enter 就觸發登入.

================================

這問題還蠻常發生，舊版本的Newtonsoft.Json被預設安裝或者因為其他組建的

相關組件是4.5，以至於安裝新版後，或被其他新安裝的組件時附屬裝了新版，則執行時會出現以下錯誤：

無法載入檔案或組件 'Newtonsoft.Json, Version=4.5.0.0, Culture=neutral, PublicKeyToken=30ad4fe6b2a6aeed' 或其相依性的其中之一。 找到的組件資訊清單定義與組件參考不符。 (發生例外狀況於 HRESULT: 0x80131040)

而在packages.config裡都沒有出現4.5的字眼，相當ＯＯＸＸ！！