2015年12月31日 星期四

javascript 字串取代

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

2015年12月23日 星期三

避免物件轉為 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 });

2015年12月15日 星期二

透過 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 出現錯誤訊息

2015年12月11日 星期五

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

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

ALTER PROCEDURE [dbo].[結算]
@DATESfrom DATETIME,@DATESto DATETIME=NULL
WITH RECOMPILE
AS
BEGIN
...


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

2015年12月9日 星期三

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

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

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

2015年12月1日 星期二

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>

input 連結 datalist 用程式控制彈出選項

範例: nextTick(() => document.querySelector('input').showPicker());  ※僅支援現代瀏覽器