一步一腳印工作札記

發表文章

目前顯示的是 5月, 2016的文章

JQuery Mobile 在 ASP.NET 下使用 Pages 完成多頁面方法

WebForm 專案中使用 JQuery Mobile 有時希望在一個程式頁面下 .aspx 將不同頁面寫在一起，一來避免程式頁面越來越多，另外維護相關程式碼也較方便，之前透過 CSS display 隱藏其它頁面元件，程式中常要判斷何時要顯示又何時隱藏，好不累人。之前知道 Pages 可用於多個頁面，但在 ASP.NET 下始終沒有找到解決的方法。好在最後仍不負眾望(其實只有我本人)試出下列方法，令人感動 T _ T，那就趕快記下來吧.. 在 Site.Master.aspx 頁面中加入兩個頁面(FirstPage & SecondPage) <body> <div data-role="page" id=" FirstPage "> <form runat="server"> <asp:ScriptManager runat="server"> <Scripts> ... </Scripts> </asp:ScriptManager> <head id="hd" ... > ... </head> ...

閱讀完整內容

ASP.NET 使用元件會有多次重繪問題

前幾天公司專案在 ASP.NET 頁面中發現欄位 asp:TextBox 會產生類似多次重繪的特殊景象 ><...(如下圖)，搞了很久最後才發現專案 SiteMaster.aspx 頁面中有引用 JQuery Mobile & Boostrap 而造成了打架行為，做個記錄警惕一下，下次記得不要再混用 JQuery Mobile & Boostrap 比較保險。

閱讀完整內容

ASP>NET 中 Site.Master 使用 ResolveUrl( ) 來轉換 JavaScript 根目錄 ~ 無法判斷問題

在寫 WebForm 中常會引用到 JQuery 及 CSS，若想寫在一個地方後，讓其它頁面也能夠引用，避免重覆寫碼，那 Site.Master 絕對是最好的選擇，不過有時 aspx 頁面可能在不同資料夾路徑，絕對路徑的寫法那可是萬萬行不通。那相對路徑呢? ....是很好的idea ?只是要注意在 JavaScript 中 ~ 號並非能夠被解析為根目錄。所以要透過 ASP.NET 的 ResolveUrl 做轉換的動作哦，另外 CSS 則不需要(小O 才疏學淺，原因未明)。透過以下使用 JQuery Mobile 舉例如下: <script src="<%= ResolveUrl ("~/Scripts/jquery-1.11.3.min.js") %>" type="text/javascript"></script> <script src="<%= ResolveUrl ("~/Scripts/jquery.mobile-1.4.5.min.js") %>" type="text/javascript"></script> <link rel="stylesheet" href="Content/jquery.mobile-1.4.5.min.css" />

閱讀完整內容

無效的回傳或回呼引數。已在組態中使用或在網頁中使用 <%@ Page EnableEventValidation="true" %> 啟用事件驗證

寫手機網頁使用 Client 端的 jquery mobile 時 button 都會比較長，但改用 asp::Button 時發現按鈕大小卻變了，W3C 建議使用 jquery mobile Button 時，儘量使用<a href="#" data-role="button" > ，因此改用 asp::LinkButton 後果然解決了 Button 長度問題，只可惜按下去後，依然有點淚流滿面如下。後來拜求 google 大大，找到了原因及解法如下: 開啓了資料回傳安全驗證功能(EnableEventValidation 為 true)，導致錯誤訊息產生。如果必須要驗證資料，則必須使用 ClientScriptManager.RegisterForEventValidation 註冊控制項或直接在頁面.aspx上端 <%Page ... EnableEventValidation = "false"> ，那如果全部頁面都不想驗證，那請在 web.config 下找到 <configuration> <system.web> <pages enableEventValidation ="false" > .... </page> .... </configuration> 嗯博大精深 ^^ 收工回家去............................

閱讀完整內容

ASP.NET 抓取前個網頁 GET & POST 方法

ASP.NET 要從一個網頁(來源網頁)切換到另一個網頁(目標網頁)時，若要抓取來源網頁 ASP.NET 元件內容時，可以有以下兩種做法 GET (這裡指ASP.NET，當然也可以透過 Url 傳參數) & POST 供參考，若有誤也請大家指正: 假設來源網頁為 source.aspx ，目標網頁為 target.aspx 來說第 1 種方式：運用 PerviousPage Step 1. source.aspx.cs 中加入: public String GET_TEL { get { return txtTel.Text;　// 例如取電話欄位的內容，假設為 '1234' } } Step 2. target.aspx 最上面加入　<%@ PreviousPageType VirtualPath="source.aspx" %> Step 3. target.aspx.cs 中就可以利用 string strTel=""; if (PreviousPage != null) strTel = PreviousPage.GET_TEL; // strTel 應該要等於 '1234' 第 2 種方式：運用 Request.Form Step 1. source.aspx 中元件(ex: aspx::Button) 加入 PostBackUrl = "target.aspx" Step 2. target.aspx.cs 中引用　using System.Collections.Specialized; NameValueCollection nvc = Request.Form; string nextKey, strValue; for (int i = 0;...

閱讀完整內容

Semaphere & Mutex 的差別

寫程式，免不了要常常在使用非同步機制，對於資源存取的鎖定與獨佔以避免造成不同的thread 或 process 使用到相同的資源(ex 不同的 thread 同時寫入內容到檔案，造成內容錯誤) 而裡面常會用到 Semaphere & Mutex 來做到 critical section ，自己也常會搞混，那就不如記下來方便備查: Semaphere & Mutex 都是處理同步機制 semaphore 可以設定有多少個 process 存取資源 (利用一個 count)，假如存取的 process數量到達 Count 的值，其他的 process 會被送到一個 wait queue 的佇列中，等待有process釋放資源(這時 Count 會減1)，再繼續執行。 Mutex就像是把鑰匙，記錄是哪個 process 拿到了這把鑰匙的所有權，process取得鑰匙後就能進到 critical section 存取資源，等到存取完成把鑰匙的所有權釋出歸還讓其它的 process 能夠使用，達到 mutual exclusion

閱讀完整內容

C# 執行緒中有時候會需要用到某一個執行緒等待另一個執行緒執行完或經過多久才能執行，MSDN裡面有個簡單透過console的範例，覺得滿受用並在此留下腳印囉.... using System; using System.Threading; public class SampleCode { static Thread mainThread, thread1, thread2; public static void Main() { mainThread = Thread.CurrentThread; thread1 = new Thread(ThreadProc); thread1.Name = "Thread1" ; thread1.Start(); thread2 = new Thread(ThreadProc); thread2.Name = "Thread2" ; thread2.Start(); } private static void ThreadProc() { Console.WriteLine( "\nCurrent thread: {0} " , Thread.CurrentThread.Name); i f (Thread.CurrentThread.Name == "Thread1" && Thread2.ThreadState != ThreadState.Unstarted) if (thread2.Join(2000)) // 超過兩秒 terminate! Console.WriteLine( "Thread2 has termminated." ); else Console.WriteLine( "The timeout has elapsed and Thread1 will resume." ); ...

閱讀完整內容

CSS簡單透過 display 為 flex 來使內部所有DIV 水平及垂直居中

很簡單地，不過其中對於 align-items 還是 justify-content 其他的 property 有空自己試試，才能真正修成正果，練就爐火純清的境界(紅字為其中比較重要的屬性) HTML: <div class="container"> <div class="content"> <div>Hello</div> <div>一步一腳印</div> </div> </div> CSS: .container{ width:50%; height:500px; background:red; display:flex; } .content{ border:2px solid black; width:250px; height:80px; background:red; margin :auto; display :flex; align-items :center; // 水平居中 justify-content :center; // 垂直居中 }

閱讀完整內容

SCSS 基本教學及應用

如題若不想重覆一堆代碼，並且減少CSS Codeing 時間，SCSS學起來粉重要: 幾個簡單的介紹足以應付目前基本的切版及應用: 1.設定變數(Variable) $color1:red; $color2:yellow; $color3: green; body{ background-color: $color3 ; // 設定綠色為 body 背景，就是好用又簡單 2. 建立及呼叫函數應用 (@Mixin & @include) @Maxin testfunction ( ){ // 建立函數供使用 background-color:$color2; font-size:large; } body{ @Include testfunction ( ); // 呼叫函數來使用 } 3.巢狀迴圈(Nesting): .Container{ 　　width;150px; margin: 0 auto; 　　.Post { 　　　　 border: solid 1px #ccc; 　　 padding: 10px; 　　　　　　　 background:#eee; 　　　　　font-size: 12px; 　　　　　　　　　 } 　　} } // 分別指定 class 'Container' 以及 .Container 底下 class 'Post' 相關的 CSS 屬性

閱讀完整內容

基本三欄式版型切版語法(HTML5+CSS3)

如題就不多說了... 代碼如下就請看倌自行參考: HTML: <body id="allimage"> <div id="control"> <div id="header"> header 的內容放在這裡</div> <div id="leftmanu"> <p>左選單內容</p> </div> <div id="content"> <p>網頁主要顯示內容</p> </div> <div id="rightmanu"> <p>右選單內容</p> </div> <div id="bottom"> 版尾區</div> </div> </body> CSS: #header { background-color: #93F; font-family: Fixedsys; color: #FFF; height: 100px; } #leftmanu { font-family: Fixedsys; background-color: #F93; width: 200px; color: #666; float: left; } #bottom { font-family: Fixedsys; color: #FFF; background-color: #F00; clear: both; height: 100px; } #control { width: 800px; } #rightmanu { background-color: #F0F; font-family: Fixedsys; width: 200px; color: #FFF; float: right; } #content { fon...

閱讀完整內容

透過 SCSS 建立圓型按鈕，鼠標在上面時有漸進漸出效果

有點時間看到透過CSS 來建立圓型按鈕，並能在 hover Event 時產生漸進漸出效果，滿簡單的就放到上面給初學朋友們參考參考 (大神級的就請多指教) HTML: <div class="center"> <a href="#"> <div class='button'> <div class="button_outline"></div> <div class="button_background"> </div> BUTTON </div> </a> </div> CSS: $color_blue:#3C474B; $color_gray:#AEB5B7; $color_white:#ffffff; $transition:2s cubic-bezier(1,0.5, 0.7,1); @mixin center{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); } *{ box-sizing:border-box; } a{ text-decoration:none; } .center{ @include center; } .button{ position:relative; width:200px; height:200px; line-height:200px; text-align:center; font-family:helvetica; font-weight:bold; font-size:1.5em; ...

閱讀完整內容

憑證與電子簽章簡略說明

電子簽章 & 憑證聽起來好像很玄，但那是什麼東東? 又有什麼用呢? 讓我們繼續看下去.. 電子簽章: 是以PKI (Public Key Infrastructure)技術為基礎的數位簽章方式，裡面要包含了非對稱演算法、雜湊演算法、時戳等等，才算完整的電子簽章。非對稱演算法是以 RSA 最為代表，在其一開始產生兩個極大數字，稱為 "金鑰對"，彼此無法互導，而是使用第一把金鑰(私鑰)對資料加密，而透過第二把金鑰(公鑰)來進行解密，私鑰由使用者自行保管對電子文件做簽署(即簽章的動作)，而透過第三者機構所留存的公鑰來對文件加以解密驗證(即為驗章的動作)，確認是由簽署者所簽署，達到其 " 不可否認性 "。憑證(Certificate): 簽章驗證由第三者機構扮演的憑證中心（CA）為使用者簽署一張包含使用者基本資料、使用者公開金鑰、憑證有效日期、憑證產生製造日期等資料之數位憑證，用來驗證使用者所簽署之簽章。放置使用者公鑰之憑證，可以隨時流通在外，讓任何人都可以驗證簽署者的簽章。在這樣的架構下，就要先檢驗簽章本身是否「有效」，除了驗證簽章為該憑證所有人所簽署外，還需要要驗證憑證的有效性，包含檢驗憑證是否是「合法」憑證、憑證有沒有過期、憑證是否有效等。電子簽章文件格式(PKCS#7 & XML Signature): 在簽署的人簽章動作結束後，要把原始資料與簽章資料產生一份特殊格式的文件，並要能讓外部的人容易取得，以供流通用。目前最常用的是由「RSA組織」定義的「PKCS#7」格式與「W3C」定義的「XML Signature」格式。PKCS #7 是較早被發行的安全文件格式，因此「PKCS#7」也是目前最常被使用的格式。 PS. 可參考 http://www.cc.ntu.edu.tw/chinese/epaper/20070620_1011.htm

閱讀完整內容

Page.ClientScript & ClientScript & ClientScriptManager 的區別

Page.ClientScript & ClientScript & ClientScriptManager 在 ASP.NET 程式中常會看到及用到?但知道它的區別嗎? <1> Page.ClientScipt & ClientScript : 其實它就是 ClientScript 只是忽略了 Page 前字，用於管理普通 script 例如向 Client 輸出一個 <script>alert('hello world');</script> <2> ClientScript & ClientScriptManager : ClientScript 是物件，它的類別就是 ClientScriptManager ，至於用途請看 <1> 的部份在 Server 端有時難免會用到Javascript 能夠靈活運用 ClientScriptManager，相信會有莫大的幫助。

閱讀完整內容

CSS 動畫背景漸次改變顏色(5秒鐘由紅色慢慢變為藍色)

簡單做個動畫背景改變顏色來加深對 animation & @keyframes 用法印象 HTML: <div id="myDiv">Block</div> CSS: <style> #myDiv{ width:300px; height: 200px; background: red; animation: mymove 5s infinite; -webkit-animation: mymove 5s infinite; } @keyframes mymove{ from { background-color:red;} to {background-color:blue;} } </style>

閱讀完整內容

利用CSS畫一個圓

想透過CSS畫一個圓嗎? 只要將 width height 還有 border-radius 三個設定為相同大小就可以了，簡單的範例如下: HTML: <div id="circle">TEXT</div> CSS: #circle{ background-color:red; color:green; width:150px; height:150px; border:2px solid black; margin: auto; text-align:center; line-height:150px; border-radius:150px; }

閱讀完整內容