~.:.': .NET碎碎念:'.':.~

2009年3月19日

css高亮選單

話說坎尼看到這篇所介紹的
利用 border style 來創造有角度的物件
於是想說可不可以套到用目前已經做好的高亮語法中 (或是光棒)

先講一下坎尼的設計流程
主要是利用 mouseover 及 mouseout 兩個事件
使背景改變達成 highlight 效果，再利用顯示及隱藏當箭頭的 div 物件

首先在畫面上加入 Table

接著把核心的箭頭樣式加入
另外再對 Table 裡的物件做 style 的設計

接下來是省 code 一哥 jQuery
先設定奇偶數的表格列樣式
再利用 jQuery 的 each 方法，對每個列裡的物件做操作

code 的部分坎尼就不多講了，上面都有註釋
當然不懂 jQuery 的看倌們先上官網充一下電吧
未來坎尼文章裡的 javascript 部分可能都會漸漸走向 jQuery 化

這篇的說明很少，圖也很少，不過卻有少見的 demo網頁

這個功能坎尼還有另一個想作的東西
但這一切就留待下一篇吧 (要先等坎尼研究出來 XD

補充一下...這些code是可以運用於 Gridview (當然要做點小修改就是
有興趣的人可以複製 demo 網頁裡的 source 回去研究 ^^

參考資料 Using borders to produce angled shapes

2009年3月18日

2009年3月13日

如何在網頁中控制鼠標的位置

因為案子的需求，需要讓鼠標能夠自動跑來跑去
坎尼第一時間就想到應該可以用 Javascript 做控制吧...
沒想到 javascript mouse position 這幾個關鍵字
讓坎尼在谷歌大神的家裡繞了兩天囧>

兩天後，坎尼想通了
既然 Web 上不行，只好從 Windows Form 下手了
沒想到關鍵字 winform change mouse position 給了谷歌大神，還是找了個半天
最後發現.NET裡控制鼠標的不是 mouse_event 而是 Cursor.Position ...

坎尼先開了個 WinForm AP 的專案來測試
後來突發異想「如果引用 System.Windows.Forms，API不知道還能不能用？」

首先，在方案總管的專案名稱上按右鍵 → Add Reference
選擇 System.Windows.Forms 按加入
要執行相關API時，記得 using (如下圖)

然後在頁面上放置兩個 TextBox 當 X, Y 的輸入框
再放一個 ASP Button 並加入 Click 事件
外層可用 Update Panel 包住，以免鼠標移動時，畫面會跟著 postback 一下
註：Update Panel 是選擇性的，可以不加

最後在 Click 事件裡，呼叫 System.Windows.Form 裡的 Cursor
將 Position 屬性設定成新增 X, Y 值

以上，大功告成

由於滑鼠移動的執行畫面不知道如何抓圖
請大家自行測試吧 :P

2009年3月8日

IIS7 未啟用 Application Development Features 會導致 HTTP Error 500.19 (The requested page cannot be accessed because the related configuration data for the page is invalid.)

上禮拜為了寫一個小小的測試程式，必須要實際佈署到 IIS 才能驗證功能是否正確，
所以第一次嘗試在 Win7 Beta (x64) 上設定 IIS7，沒想到不小心就搞了一個多小時…
要啟用 IIS7，（從 Vista 之後）第一步就是從 Control Panel 中的
「Programs and Features」中執行「Turn Windows features on or off」，
在我啟用 IIS7 之後，就開啟 browser 瀏覽到我的測試頁面，結果出現下面這個錯誤：

hmm … 仔細的看了一下我的 web.config，預設是不會有 <httpErrors /> 這個設定的，
所以應該不是我或者 VS2008 手賤亂改設定造成的問題。
（有趣的是，我只是要瀏覽 .htm 網頁，還不是執行 .aspx 網頁哦）

雖然受到了小小的驚嚇，但是由於 IIS7 提供了非常豐富的錯誤描述資訊，
所以我想這也沒什麼了不起的，想必 Google 一下很快就會有結果了吧！

果不其然，很快的我就查到了跟我的狀況完全相符的描述：
IIS7 HTTP Errors Configuration on Lockdown

OK, 以下這段是重點：

In order to set <httpErrors /> you have to open up applicationHost.config on your server and unlock the node or specifically set the value for the site you want. I like to unlock the node and set <httpErrors /> within the web.config of my application. I find this much clearer and more isolated then having application specific settings defined within the applicationHost.config on a specific server.

這篇文章提到了 IIS7 錯誤訊息中沒有明講的「applicationHost.config」這個關鍵檔案，
於是繼續搜尋看看這個檔案到底位置在哪，要如何修改：Editing Applicationhost.config on 64 bit Win 2008，嗯，跟我的環境蠻合的，那就仔細讀一下內容吧！

稍微看了一下，這個檔案應該位於在「c:\windows\system32\inetsvr\config\applicationhost.config」，但是正如這篇文章所說，我的 UltraEdit 和 VS2008 顯然都是 32bit application，根本無法開啟這個檔案！（幸好我沒有改內建的 Windows Explorer，所以還看的到檔案）

於是乎，我依照作者的建議，用萬能的 notepad 來開啟 applicationhost.config，
鏘鏘鏘鏘！檔案順利打開了，但是 <httpErrors /> 區塊的設定如下：
<section name="httpErrors" overrideModeDefault="Allow" />
所以完全就是可以允許每個 web application 隨意亂改 httpErrors 的處理方式嘛！

那麼揪～～～～竟是為什麼我會收到 HTTP Error 500.19 呢？

按照過去的經驗，通常會出現這種好像鬼打牆的靈異現象，很可能是因為某些最基礎（或者說底層）的環境設定不正確，導致系統丟出這種沒頭沒腦的錯誤（仔細看一下上圖，Config Source 指出的區塊根本就和 <httpErrors /> 無關，如果繼續往 <httpErrors /> 這條死胡同裡面鑽，那天就不用睡覺了），於是乎我開始尋找 IIS7 的初始設定有沒有什麼要特別注意的地方，結果無意間看到一篇讓我靈機一動的文章：Server Error HTTP Error 404.3 Not Found，之前在 Vista 上設定 IIS7 的時候也看到這篇，看到 screenshot 我才想到，我忘記設定 Application Development Features 了！

在第一次 turn on IIS7 的時候，要特別注意以下設定：
（根據這次實驗，完全不啟用 Application Development Featues 的話，連靜態 html 網頁都開不起來）

設定完成後，在 IIS7 的 Handler Mappings 中可以看到以下內容：

後來我又實驗了一下，把 Application Development Features 關掉的話，Handler Mappings 會變成這樣（沒有 .aspx、.asmx mappings）：

此時去瀏覽網頁又會出現 HTTP Error 500.19，所以這個謎的真相就是這樣 … Orz
印象中 IIS6 有個設定叫做 Web Service Extensions，有時候 ASP.NET v2.0.50727 的 mapping 消失的時候，也會出現無法處理 ASP.NET 2.0 網頁 request 的狀況，
但是丟出的錯誤訊息是很明確的（忘記是啥了@@）。IIS7 在這種狀況下居然丟出一個毫不相干的錯誤訊息，反而變成很不 friendly 了 …

（不過也只有像我一樣一開始腦殘忘記設定 Application Development Featurs 的人才會感受到這種痛苦就是了 .. Orz 太信任 IIS7 的錯誤訊息也不一定是件好事…）

2009年3月7日

製作動態新聞跑馬燈

雖然這功能在各大論譠常看到
不過還是來騙一下文章好了

先來解釋一下坎尼的作法
做一頁要取資料的頁面，再用 javascript 的非同步發送機制取得資料

跑馬燈的畫面配置：要放訊息的 div * 1

取資料的畫面配置：把預設的 < ! DOCTYPE 以下的 code 清掉

首先是第一個範例：跑馬燈型
在取資料頁面的 Page_Init 事件，加入取得最新消息資料的程式碼
將抓出來的最新消息資料組成 html 跑馬燈指令
最後用 Response.Write 的方式輸出

在要顯示消息的地方，加入下列的code
這地方要注意的是，要先引用 jQuery 套件

利用 jQuery 提供的 .ajax 功能，呼叫取資料頁面
再將取得的資料放入畫面上的 div

執行時，時間一到系統就會自動去後端取資料 (下圖為執行畫面)

第二個範例：動畫型
拜 jQuery 所賜，很多以前要寫很多 code 的動畫效果
現在只要短短的一兩行就可解決

後端取資料的 code 改成隨機取得一筆資料
並用 Response.Write 輸出到畫面上

顯示的javacsript改成用 fadeIn 及 fadeOut 來達成淡出淡入效果

執行畫面

這兩個範例坎尼覺得用途不太一樣
跑馬燈主要是用來顯示新訊息
淡出淡入的動畫效果用來顯示廣告會比較好

最後是本次的範例檔下載

2009年3月5日

微軟最新互動技術（穹頂、神桌、從背後摸）

咳咳，騙文章時間又到了 :D

自從訂了 Channel 9、Channel 10，還有 Microsoft Research 之後，總是有看不完的影片，以下幾個是這幾天看到比較酷炫的，分享一下：

穹頂（這是我亂翻的，天文資料的 demo 很炫）

神桌（TOUCH AND GESTURE COMPUTING）（Surface Team 的那位很帥阿！）

從背後摸（Back Of Device Input）

同場加映：微軟對 2019 年的展望

2009年3月2日

ASP.NET 2.0+ Complete Event Sequence

對於初學 ASP.NET 的新手來說，搞清楚 ASP.NET 內建的數十種 event 的執行順序是非常重要的（對於專業開發 control 的人應該是超重要的），特別是在處理 Data Binding 的時候更是如此，首先必須大略瞭解 ASP.NET Engne (或者應該說 .aspx 的 HttpHandler) 依序對一些重要系統資源做了甚麼處理（e.g., Load SessionState、Load PageViewState、Run Page Constructor、Unload Control..），才會知道若要對某些資源作處理時，可以把程式寫在哪個 event 的 event handler 中。

關於 event 執行的順序，在 MSDN 上通常叫做「XXX Lifecycle」，例如 Application Lifecycle、Page Lifecycle 等，雖然各別來看 Application Level ＆Page Level 的 event sequence 都很清楚，但是 Application events 和 Page events 之間的先後順序呢？

更嚴重的問題是，若採用貼近 Microsoft 所建議的開發模式，Page 上免不了會套用 MasterPage、UserControl、和 Custom Control，這些 Control（這個詞好像不太好=.=）都有自己的 code-behind，因此也都有自己的 Init、Load、Unload 等等 event，
那麼這些 events 跟 Application 和 Page events 之間的先後順序又是怎麼樣呢？

而且不要忘記了，MasterPage 上可以擺 UserContrl，而 UserControl 上還可以使用 CustomControl 呢！
（喜歡自己用 JSON 手工打造 UI 的網站可能不會用到這麼多東西）

幸好透過偉大的 Google，我們可以找到ranking 很高的示意圖，但是！製圖時間已經是 2004 年，也沒有把 Application Event 納入。

另外一個更新的 reference 是 Jeff 這個好人的 blog post，但看了下面的留言就會發現，這是根據某個 pre-beta 版本而做出來的結果，不符合 production 版的 ASP.NET 2.0 的行為。（經過實測也發現，有些 Jeff 列出的 event 現在已經被拿掉了）

（Update 3/1: 這應該就是親愛的小馬王同學的 reference 來源吧？）

那麼到底要如何能夠隨時隨地確認 ASP.NET 的 complete event sequence 呢？！
當然是老老實實的一個一個去實作每個 event 的 event handler，然後以 trace/log 的方式來紀錄事件觸發的順序呀！

為了驗證 ASP.NET 2.0+ 的完整 event sequence，我做了一個簡單的 application，一一實作每個 event 的 event handler，在其中用 log4net 將 event 資訊寫到 .csv 檔中。

為了區別事件是在哪裡發生的，我用了「MasterPage」、「ContentPage」、「UserControlPage」和「CustomControl」等 prefix，並且輸出 UserControl 和 CustomControl 的 ClientID，以利識別 control 所在的頁面。

稍微觀察一下就會發現一些有趣的地方，例如 DataBinding 相關 event 被觸發的次數、相同事件 (e.g., Init) 在不同 Page 會有不同的順序，Session 載入的時機 … 等等。

基本上目前實作的 event handler 都是參考 MSDN 的說明，Jeff 所列出的 event 有些很有趣，例如與 ViewState 相關的 event，但是我挑了幾個來實作都無效，砍尼有空可以再幫我加強這個部份 :p

經過一些整理，完整的 event sequence 長得像下面這個樣子：
（好的 visualization 真的很重要呀 … 這裡論上應該可以弄成一顆樹，會比較好看）

Application_Start

Application_BeginRequest

Application_AuthenticateRequest

Application_PostAuthenticateRequest

Application_AuthorizeRequest

Application_PostAuthorizeRequest

Application_ResolveRequestCache

Application_PostResolveRequestCache

ContentPage_Constructor

Application_PostMapRequestHandler

Session_Start

Application_AcquireRequestState

Application_PostAcquireRequestState

Application_PreRequestHandlerExecute

ContentPage_PreInit

MasterPage_Constructor

UserControlPage_Constructor_

CustomControl_OnInit_ctl00_ContentPlaceHolder1_MyUserControl1_MyCustomControl1

ContentPage_GridView1_Init_ctl00_ContentPlaceHolder1_MyUserControl1_GridView1

UserControlPage_Init_ctl00_ContentPlaceHolder1_MyUserControl1

CustomControl_OnInit_ctl00_ContentPlaceHolder1_MyCustomControl1

ContentPage_GridView1_Init_ctl00_ContentPlaceHolder1_GridView1

CustomControl_OnInit_ctl00_MyUserControl1_MyCustomControl1

ContentPage_GridView1_Init_ctl00_MyUserControl1_GridView1

UserControlPage_Init_ctl00_MyUserControl1

CustomControl_OnInit_ctl00_MyCustomControl1

ContentPage_GridView1_Init_ctl00_GridView1

MasterPage_Init

ContentPage_Init

ContentPage_InitComplete

ContentPage_PreLoad

ContentPage_Load

MasterPage_Load

UserControlPage_Load_ctl00_ContentPlaceHolder1_MyUserControl1

CustomControl_OnLoad_ctl00_ContentPlaceHolder1_MyUserControl1_MyCustomControl1

ContentPage_GridView1_Load_ctl00_ContentPlaceHolder1_MyUserControl1_GridView1

CustomControl_OnLoad_ctl00_ContentPlaceHolder1_MyCustomControl1

ContentPage_GridView1_Load_ctl00_ContentPlaceHolder1_GridView1

UserControlPage_Load_ctl00_MyUserControl1

CustomControl_OnLoad_ctl00_MyUserControl1_MyCustomControl1

ContentPage_GridView1_Load_ctl00_MyUserControl1_GridView1

CustomControl_OnLoad_ctl00_MyCustomControl1

ContentPage_GridView1_Load_ctl00_GridView1

ContentPage_LoadComplete

ContentPage_PreRender

MasterPage_PreRender

UserControlPage_PreRender_ctl00_ContentPlaceHolder1_MyUserControl1

ContentPage_GridView1_DataBinding_ctl00_ContentPlaceHolder1_MyUserControl1_GridView1

ContentPage_GridView1_RowCreated_ctl00_ContentPlaceHolder1_MyUserControl1_GridView1

ContentPage_GridView1_RowDataBound_ctl00_ContentPlaceHolder1_MyUserControl1_GridView1