雷．IT and Me

老實說，VS提供這種懶人用的方便控制項，對我而言一點吸引力也沒有，一來彈性小，限制多，二來能夠達到一樣效果而且強太多的3rd party UI元件庫實在太多了(我個人覺得最棒的是Ext JS)，實在沒必要使用VS提供的陽春元件。但秉持著學習的精神，而且當然 這是VS內建的控制項，整合上當然會比起使用外部元件庫來的方便許多。

首先，先在網站專案中新增一個新的項目：「網站導覽」，檔名叫web.sitemap，是個不折不扣的xml檔。

其xml的結構簡單說一下，以<siteMap></siteMap>為root，裡面包著<siteMapNode></siteMapNode>，然後裡面再繼續一層包一層<siteMapNode></siteMapNode>，就看你的網站架構怎麼樣，就怎麼做。

而<siteMapNode>有幾個屬性，最重要的是url，有填入後，在待會兒應用的巡覽控制項中就會有超連結可以點選，但注意，整份xml中在不同的siteMapNode中的url值不可以重覆！這我覺得實在不太合理，也太死板，不過既然以此為key，那我們也就照著做。

再來是title，這個就是show出來的文字。而description就是到時滑鼠移上去停留後的提示字。

<siteMapNode url="~/main.aspx" title="Home"  description="Return to Home">

     ......還有很多巢狀的<siteMapNode></siteMapNode>放在其中

</siteMapNode>

做好了後，接下來就可以使用VS提供的幾種巡覽控制項的應用。

一種是Menu，一種是SiteMapPath，一種是TreeView，這三種的用法也不是我想說的重點，因為這很簡單，自己試試玩一玩也大概知道能做什麼。

接下來要來談談的是怎麼做些客製化的改變。以SiteMapPath為例好了，這個控制項可以讓我們做出像這種：  首頁 > 產品 > 軟體 > 賺大錢系列   之類的功能，但用基本設定的話，可能有時候無法滿足我們的需求。

假設我們想在目前頁面的文字上(比如目前是「賺大錢系列」)做一些客製化修改，好比在文字之前加一個圖案好了，我們知道在控制項上點選右邊箭頭後，會有個「編輯樣版」功能。

我們選擇"CurrentNodeTemplate"來做編輯，會出現一個小區域，我們只要拉一個Image的控制項進去就好。但此時會發現，咦，真的就只有Image而已，那原本要show出來的文字呢？不見了怎麼辦，該怎麼讓他show出來呢？

我們結束樣板編輯後，會發現在SiteMapPath上的目前位置只有剛剛的圖示，沒有文字，接著我們到aspx的原始檔去。

<CurrentNodeTemplate>
    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/current.gif" />
</CurrentNodeTemplate>

會發現類似像這樣的內容，我們要直接在這個原始檔上下功夫，我們要使用資料繫結的語法Eval(string id)，在參數則傳入我們要繫結欄位的名稱，記得前面說過的那個web.sitemap xml檔吧，我們掌管show出來的文字的屬性是title，因此，我們就將之填入Eval()中。並且在前後使用一個特殊的<%# %>將之包起來，如下：

<%# Eval("title") %>如此，在網站run-time後，就會將這段語法解析後，轉成該繫結的資料並印出來(也就是"賺大錢系列"這幾個字)。記得喔，Eval("title")後面沒有分號結束。

所以完成後的原始檔就會如下：

<CurrentNodeTemplate>
    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/current.gif" /><%# Eval("title") %>
</CurrentNodeTemplate>

這樣修改過後的樣版，到時候就會出現一個我們自訂好的圖示(比如說是個燈泡)再加上目前頁面的title，這就是簡單的應用。

最後結果類似像：首頁 > 產品 > 軟體 > 賺大錢系列