[.Net MVC] 使用MVC BundleConfig的{version} wildcard的注意事項

使用ASP.Net MVC預設範本的BundleConfig，
會使用{version}來bundle jQuery套件，如：
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));


之前看微軟文件， 使用{version}萬用字元的好處其一是：

• debug組態：會自動bundle full debug版本。
• release組態：就bundle min版本。

看起來也很直覺。

但有一次在release組態，我將full debug(jquery-x.x.x.js)的版本拿掉，
發現jquery沒有正確載入，才發現MVC預設會忽略min版本(in the bundles.IgnoreList)，
所以應是使用full debug版本bundle與minify，
再加入HttpRuntime.Cache，如下圖紅框處。

因此，在Scripts資料夾下放full debug版本的js或css應該就沒問題了。
to be continued...


參考資料：
https://stackoverflow.com/questions/29254181/bundling-not-working-in-mvc5-when-i-turn-on-release-mode
https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification
https://stackoverflow.com/questions/21270834/asp-net-mvc-bundle-not-rendering-script-files-on-staging-server-it-works-on-dev
http://www.mytecbits.com/microsoft/dot-net/asp-net-mvc-bundle-rendering
http://demo.tc/post/779

[.Net/VS] Could not load file or assembly 'Microsoft.Web.Deployment'與莫名發行失敗(fail no output message)

● 使用VS針對web application使用發行，
出現Could not load file or assembly 'Microsoft.Web.Deployment, Version=9.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35'， 究竟發生什麼事??

原以為是web application需要參考Microsoft.Web.Deployment，
經過一番嘗試之後，
發現在本機(client端)安裝web deploy即可。

安裝完到路徑C:\Program Files，會出現IIS\Microsoft Web Deploy V3資料夾，
裡面會有Microsoft.Web.Deployment.dll，如下圖。

● 發行後，VS左下角狀態列出現發行失敗，且無其他訊息。

可將專案實體資料夾下bin內檔案手動清除，再發行看看。

[.Net/VS] Web Deployment 工作失敗：Microsoft.Web.Deployment.DeploymentManager的類型初始設定式發生例外狀況(threw an exception type initializer)

說明：
使用VS內建發行，點選「驗證連接(Validate Connection)」，
出現如下錯誤訊息。

解法：
搜尋網路解法，有人說要解除Microsoft Web Deploy dbSqlPackage Provider(如下圖所示)，
但是我的Server並無安裝該程式。

又看到重新安裝Server上Web deploy的解法，

於是使用Web Platform Installer 5.0安裝：
● web deploy 3.6
● web deploy 3.6 for Hosting Servers
● web deploy 3.6 without bundled SQL support(latest)

再到控制台->解除安裝程式，
找到web deploy 3.6後，點選「變更」，
改成完全安裝就可以了，如下圖。

參考資料：
https://docs.microsoft.com/en-us/iis/publish/using-web-deploy/web-deploy-automatic-backups
https://stackoverflow.com/questions/6351289/web-deployment-task-failed-the-type-initializer-for-microsoft-web-deployment
http://blog.sanc.idv.tw/2014/08/aspnet-web-deploymvciis.html

[.Net MVC] 使用ValidationAttribute與IClientValidatable自訂前後端驗證 (Input Date isn't greater than today)

說明：
之前提過Remote驗證預設沒有後端驗證，
雖然可以自行實作後端驗證。
但MVC提供了自訂驗證(Custom validation)，
可自訂驗證邏輯，並含括前後端驗證，
既然是預設的，就來試看看吧。

實作：
首先，新增一類別做驗證，並宣告為sealed，
因該類別單純用來做驗證，
再繼承ValidationAttribute，並override IsValid(object value)方法，
方法內，編寫驗證邏輯。

P.S. 帶ValidationContext的isValid方法，
可存取ViewModel該驗證屬性的資訊。

掛上剛新增的類別，記得要using類別所在namespace。

但沒有觸發前端驗證??

因為繼承ValidationAttribute只有後端驗證，
所以要補上前端驗證，在驗證類別再加上實作IClientValidatable介面，
也就是實作GetClientValidationRules方法。
方法內，需建構ModelClientValidationRule instance，
其中ValidationType傳入字串需要小寫，用來連結前端的html attribute與js方法。

這個rule會render到該html element的attribute。

最後，透過實作jQuery.validator的自訂驗證方法。

前端驗證也觸發了。

參考資料：
http://www.c-sharpcorner.com/UploadFile/abhikumarvatsa/enabling-client-side-validation-on-custom-data-annotations-w/
http://demo.tc/post/687
https://jqueryvalidation.org/jQuery.validator.addMethod/

[.Net MVC/jQuery] add TextBox Numeric/Spinner

說明：
如果想讓TextBox(input element)可以用選的，如下圖：

該怎麼做呢?

作法：
HTML 5有支援Number input type，按此可知那些瀏覽器有支援，
在input element內設定type="number"，chrome與firefox就可以用選的(spinner)。
但是...，IE 11跟Edge雖然有支援numeric，但沒有實作spinner XD。

如果不想自己寫css跟js，可以使用jQuery.UI提供的spinner，demo按此。
或是Number polyfill。

這裡使用jQuery.UI的spinner來試試。
首先使用NuGet或自行下載jQuery.UI package，目前最新版為1.12.1，有相依於jQuery。
再include jquery-ui.css與jquery-ui-1.12.1.js。

這裡遵照unobtrusive的原則，將HTML跟JS分開。

MVC 5.1後，EditorFor可以加HTML attribute的object了。
也可以建立專用的EditorTemplates，類似需求直接掛屬性即可。

執行看看，IE跟Edge都有spinner了。

參考資料：
http://html5please.com/#number
https://docs.microsoft.com/en-us/aspnet/mvc/overview/releases/mvc51-release-notes#new-features

[.Net MVC] Remote validation example (Input Date isn't greater than today)

說明：
Remote驗證是一種假前端驗證，背後是用ajax呼叫後端Action，
方便開發人員在後端編寫驗證邏輯，不過預設只能在前端觸發。

範例：
首先新增一Controller做驗證，注意Action傳入參數名稱要與ViewModel對應的屬性名稱相同(Model binding)。

在ViewModel該屬性上掛上RemoteAttribute class。
第一個參數是Action name，第二個參數是Controller name。

View部分，使用HtmlHelper產生html element，
需再include jquery、jquery-validate與jquery.validate.unobtrusive.js。

執行網頁後，檢視HTML發現多了remote相關屬性：

切到Network tab，當觸發該欄位時，會送出get request，後端傳回true或false。

實際畫面如下。

結論：
● Remote驗證還是前端驗證，因此不保險，重要驗證還是須通過後端驗證。
● 若觸發欄位無變動，不會送出request，多欄位比較驗證要注意(例：兩個日期比較)。


參考資料：
https://msdn.microsoft.com/en-us/library/system.web.mvc.remoteattribute(v=vs.118).aspx

[jQuery] jQuery plugin DataTables ajax reload 搭配ASP.NET MVC

說明：
使用jQuery plugin DataTables來呈現資料，與資料異動後做reload。


做法：
資料來源為localDB，使用EF code first定義一簡單的Model：

Controller部分，回傳json包在key為data的object內：

最後是View部分：

實際畫面：

參考資料：
https://datatables.net/reference/option/
https://datatables.net/examples/server_side/post.html
http://www.techstrikers.com/Articles/jquery-datatable-bind-json-using-asp.net-mvc5.php
https://datatables.net/reference/api/ajax.reload()
https://editor.datatables.net/examples/simple/inTableControls.html
https://datatables.net/forums/discussion/21164/disable-sorting-of-one-column
https://stackoverflow.com/questions/30627026/jquery-datatables-how-to-add-an-edit-and-delete-option