javascript 字串取代

"aaa,bbb,ccc".replace(",", "|") // 只能取代一次
"aaa,bbb,ccc".replace(/,/g, "|") // 可以取代所有符合的字串

避免物件轉為 json 字串造成自我參考無窮迴圈

JsonConvert.SerializeObject(rr, Formatting.Indented, new JsonSerializerSettings { ReferenceLoopHandling = ReferenceLoopHandling.Serialize, PreserveReferencesHandling = PreserveReferencesHandling.Objects });

此作法通常會無效
若某屬性為EF物件且不需要序列化，可以這樣設定，避免循環參考
[Newtonsoft.Json.JsonIgnore]
public 餐飲_食品營養成份 食品營養成份;

datetime 資料透過 json 傳遞注意事項

若以本地時區儲存資料庫，序列化回傳給 javascript時需指定參數，避免轉為  date 物件後被時區再次運算過一次，造成時間跑掉
return Content(JsonConvert.SerializeObject(res, Formatting.Indented, new JsonSerializerSettings { DateTimeZoneHandling = DateTimeZoneHandling.Local }));

說明:
假設值為 2015/12/22 16:00
若不指定DateTimeZoneHandling 為 local，則回傳值為 "2015-12-22T16:00:00"，經過 new Date() 轉換後會變成 Wed Dec 23 2015 00:00:00 GMT+0800 (台北標準時間) <= 被認定為 UTC，因為自動轉為 local 所以被加上timezone
若有指定DateTimeZoneHandling 為 local，則回傳值為 "2015-12-22T16:00:00+0800"，經過 new Date() 轉換後會變成 Tue Dec 22 2015 16:00:00 GMT+0800 (台北標準時間) <= 被認定為 local，不會再加一次 timezone

javascript 傳遞 json 給 c# 時也須於反序列化時加上參數，例如
var obj=JsonConvert.DeserializeObject<JObject>(data, new JsonSerializerSettings { DateTimeZoneHandling = DateTimeZoneHandling.Local });

透過 javascript 觸發 ng-click

$timeout(function () {
var obj=document.querySelector('#aaa');
angular.element(obj).trigger("click");
},100);

注意: 必須透過 $timeout 處理否則會error ，且若obj 為 checkbox 則必須使用下列方式處理，否則打勾狀態會異常
obj.checked=true;
angular.element(obj).trigger("click");
obj.checked=true;

javascript Date() 使用說明

取得日期物件的日期部分
(new Date()).toDateString()
※通常用來判斷日期是否相等且不考慮時間

今天
new Date((new Date()).toDateString())

一年前
$scope.from = new Date();
$scope.from.setFullYear($scope.from.getFullYear() - 1);

在 angularjs 事件函數中傳遞 html tag 物件

以 ng-click 為例

<input type="checkbox" ng-click='register($event)'

$scope.register = function ($event) {
var checkbox = $event.target;
console.log(checkbox.checked);

angularjs 搭配 asp.net 注意事項

★呼叫 $http.post 若不須帶參數還是要給空值
$http.post('aaa.aspx/aaa', {}).then(function (result) {
                            $scope.users = JSON.parse(result.data.d);                         
                        }, function (response) { });

★若有使用 updatepanel 則為了讓其中的 angularjs 語法正常執行，必須於 controller 中加入一段如下語法
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (sender, args) {
                      var elem = angular.element(document.getElementById("UpdatePanelController"));
                    $compile(elem.children())($scope);
                    $scope.$apply();
                });
目的是每次非同步作業執行後必須重新編譯updatepanel 內容
html 範例片段
====
<div ng-app="module1" ng-controller="ctrl1" id="UpdatePanelController">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:ListView ID="ListView1" runat="server" DataSourceID="ObjectDataSource預約紀錄" DataKeyNames="id" OnItemDataBound="ListView1_ItemDataBound">
<ItemTemplate>
<tr>
<td>
<input type="checkbox" ng-click='<%# "register("+Eval("id")+")" %>' />
注意: 無法使用 ng-change，會造成 $compile 出現錯誤訊息

用程式呼叫預儲程序抓資料會timeout，但用 ssms 很快就執行完畢

第一次執行預儲程序時，SQL Server會根據傳入的參數，建立以該參數為基礎的最佳執行計畫，若更換參數且查詢結果筆數差異很大，就會造成效能嚴重低落，加入 WITH RECOMPILE 後每次執行時都會重新建立執行計畫

ALTER PROCEDURE [dbo].[結算]

@DATESfrom DATETIME,@DATESto DATETIME=NULL

WITH RECOMPILE

AS

BEGIN

...

※缺點是不再重複使用執行計畫，所以只有針對會有這情況的時候再加入，或改為針對有這情況的 select 單獨加上  OPTION(RECOMPILE) 

ag-grid 匯出檔案時避免中文亂碼

檔案開頭加入 '\uFEFF' 避免中文亂碼

$scope.gridOptions.api.exportDataAsCsv({customHeader:'\uFEFF' });

log 太大，初始化成最小

連結

angularjs ui grid 匯出檔案方式

javascript
====
angular.module('app', ['ui.bootstrap', 'ui.grid', 'ui.grid.exporter']);
$scope.gridOptions = {
        exporterCsvFilename: 'filename.csv', // 指定csv檔名
        exporterOlderExcelCompatibility: true, // 用excel開啟時避免中文亂碼
        exporterFieldCallback: function (grid, row, col, value) {
            if (col.name === '下次入住') {
                value = $filter('date')(value, "yyyy/MM/dd HH:mm"); // 日期欄位改為常見格式
            }
            return value;
        },
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
        }
}
$scope.export = function () {
        $scope.gridApi.exporter.csvExport("all", "all"); // 匯出csv
};


html
====
<div ui-grid-exporter="" ui-grid="gridOptions"></div>
<button class="btn btn-default" ng-click="export()">匯出</button>

如何設定div 裡面物件位置

以span靠右上為例
div 要設定成 position:relative;
span 要設定成 position:absolute;top:0;right:0;

$http.post 使用方式

 $http.post('CheckReport/地點列表', { 活動項目id: 8 }
                  ).then(function (result) {
                      $scope.telLocations = result.data;
                  }).catch(function (data) {
                      if (data.status != '') alert(data.statusText);
                      else alert('發生錯誤，請重新整理頁面後再試一次');
                      console.log(data.data);
                  });

後端日期型態資料透過 json 丟給前端的 input type=date 綁定 ng-model 無法顯示預設值

前端取得資料後要再轉換成 Date 物件，範例 :
$http.post('CheckReport/查詢').success(function (data, status, headers, config) {
           angular.forEach(data, function (obj, key) {
                if (obj.shareDate != null) obj.shareDate = new Date(obj.shareDate);
            });
            $scope.gridOptions.data = data;
         }).catch(function (data, status, headers, config) {
                if (status != undefined) alert(data.statusText);
                console.log(data.data);
            });

angularjs 的 filter 和 orderby 進階用法

變數直接篩選
ng-options="a for a in typeList | filter:'!往來帳'"

類似 linq where 用法，直接在 javascript 中使用
var a=$scope.Room.filter(function (r) {
                (return true or false)
            });

module 加入 filter

.filter('filterItemBuyed', function () {

        return function (items, category) {

            return Enumerable.From(items).Where(a => a.數量 > 0 && (!category || a.上層分類 == category)).ToArray();

        };

    })

ng-repeat="item in (items | filterItemBuyed:category.value)"

依據物件屬性篩選
 $scope.results = {
    subjects:[
      {title:'English',grade:'A'},
      {title:'Maths',grade:'A'},
      {title:'Science',grade:'B'},
      {title:'Geography',grade:'C'}
    ]
  };
ng-repeat="subject in results.subjects | filter:{grade:'C'}" 

※ filter:{grade:''} 表示只抓 grade 不為空

自訂排序 for ng-repeat
.filter('order', function () {
    return function (items, sortcolumn) {
        var filtered = [];
        angular.forEach(items, function (item) {
            filtered.push(item);
        });
        filtered.sort(function (a, b) {
            if (sortcolumn==1)
              return (a.id > b.id ? 1 : -1);
            else
              return (a.name > b.name ? 1 : -1);
        });
        return filtered;
    };
});
ng-repeat="room in rooms | order:sortcolumn"

excel com 元件存取檔案在 iis 中如何成功

1. 應用程式集區設為 localsystem <= 避免權限不足無法使用元件
2. C:\Windows\System32\config\systemprofile\ 新增目錄 desktop <= 避免無法存取excel檔案

利用拖拉或複製貼上方式取得檔案內容

以下為拖拉一個圖檔的範例，會顯示圖片內容，也可回傳到server
document.getElementById('divupload').addEventListener('drop', onDrop, true)
function onDrop(event) {
        event.stopPropagation();
        event.preventDefault();
        var file = event.dataTransfer.files[0];
        var reader = new FileReader();
        reader.onload = (function (aImg) {
            return function (e) {
                $("#imagedata").attr("src", e.target.result);
                $("#HiddenFieldimagedata").val(e.target.result);
            };
        })($("#imagedata"));
        reader.readAsDataURL(file);
    }

以下為透過複製貼上取得圖檔內容
 $("html").pasteImageReader(function (results) {
            $("#imagedata").attr("src", results.dataURL);
            $("#HiddenFieldimagedata").val(results.dataURL);
        });

divupload is div
$("#imagedata") is img
$("#HiddenFieldimagedata") is asp:HiddenField

讓 Angular UI Grid 的下拉選單選取後顯示的文字是value 而非id

加入一個filter
.filter('griddropdown', function () {
        return function (input, context) {
            var map = context.col.colDef.editDropdownOptionsArray;
            var idField = context.col.colDef.editDropdownIdLabel;
            var valueField = context.col.colDef.editDropdownValueLabel;
            var initial = context.row.entity[context.col.field];
            if (typeof map !== "undefined") {
                for (var i = 0; i < map.length; i++) {
                    if (map[i][idField] == input) {
                        return map[i][valueField];
                    }
                }
            } else if (initial) {
                return initial;
            }
            return input;
        };
    });

設定columnDefs
  field: '需求部門', editableCellTemplate: 'ui-grid/dropdownEditor',
          editDropdownIdLabel: 'id', editDropdownValueLabel: '名稱',
cellFilter: "griddropdown:this",

新增 entity 且 savechanges 後馬上要取得關聯表格的資料會是null

直接 new 物件會有這問題
例如: var model=new 需求單();

請改為透過 Create 產生物件
例如: var model = db.需求單.Create();

利用 jquery 避免重複 submit

(function ($) {
// jQuery plugin to prevent double submission of forms
$.fn.preventDoubleSubmission = function () {
    $(this).on('submit', function (e) {
        var $form = $(this);

        if ($form.data('submitted') === true) {
            // Previously submitted - don't submit again
            e.preventDefault();
        } else {
            // Mark it so that the next submit can be ignored
            $form.data('submitted', true);
        }
    });

    // Keep chainability
    return this;
};
})(jQuery);

$("form").preventDoubleSubmission();

tiff 兩頁切割法 (適用任何需要合併的寫法)

var fd = new FrameDimension(image.FrameDimensionsList[0]);
for (int i = 2; i < image.GetFrameCount(fd); i+=2)
{
                        using (MemoryStream oMemoryStream = new MemoryStream())
                        using (MemoryStream oMemoryStream2 = new MemoryStream())
                        {
                            image.SelectActiveFrame(fd, i);
                            image.Save(oMemoryStream, ImageFormat.Tiff);
                            System.Drawing.Image tiff = System.Drawing.Image.FromStream(oMemoryStream);
                            Encoder encoder = Encoder.SaveFlag;
                            ImageCodecInfo encoderInfo = ImageCodecInfo.GetImageEncoders().First(a => a.MimeType == "image/tiff");
                            EncoderParameters encoderParameters = new EncoderParameters(1);
                            encoderParameters.Param[0] = new EncoderParameter(encoder, (long)EncoderValue.MultiFrame);
                            tiff.Save(oMemoryStream2, encoderInfo, encoderParameters);
                            encoderParameters.Param[0] = new EncoderParameter(encoder, (long)EncoderValue.FrameDimensionPage);
                            image.SelectActiveFrame(fd, i+1);
                            image.Save(oMemoryStream, ImageFormat.Tiff);
                            System.Drawing.Image tiff2 = System.Drawing.Image.FromStream(oMemoryStream);
                            tiff.SaveAdd(tiff2, encoderParameters);
                            encoderParameters.Param[0] = new EncoderParameter(encoder, (long)EncoderValue.Flush);
                            tiff.SaveAdd(encoderParameters);  // 此時 oMemoryStream2 即為合併的圖檔
                        }
}

checkbox 在 mvc 中submit 取值

只有打勾的checkbox 會把設定的 value 回傳給 action，其餘不會回傳(null)
若相同name 只有一個，可以在 action 中設定 bool ?=false，並在 view 設定 value="true"，這樣action 中一定可以取到值(true or false)

jqueryui dialog 使用注意事項

1. 如何讓右上角的X符號消失
.dialog({open: function(event, ui) { $('.ui-dialog-titlebar-close').hide(); }

2. 如何避免在partialview 的架構中關閉再開啟時會殘留原本的視窗
.dialog({buttons: {      
            '關閉': function () {
                $(this).dialog('close');
                $(this).dialog('destroy'); <= 透過destory 確保視窗不會殘留
            }
        }

3. 使用 bootstrap 的 button click 時遇到 cannot call methods on button prior to initialization; attempted to call method 'loading'
調整 javascript 載入順序 : jqueryui 必須在 bootstrap 之前載入