第十章 BLOG事件日曆的實現
既然Doking's BLOG是學習筆記,那麼按日曆可以查出所有筆記和筆記回覆。
難點分析:是不是要在範本中直接加入Calendar日曆控制項?不!那是不行的!由於Calendar日曆控件是伺服器控件,因此要在含有runat="server"表單該伺服器控件,但一頁面中只能有一個含有runat="server"表單,不然有時會出現如圖10-1所示的錯誤顯示。
圖10-1 頁面只能有一個含有runat="server"表單的錯誤
那怎麼辦?這裡是採取嵌入式框架進行轉移。
10.1 新增Calendar日曆控制項
(1)新建一個空白ASP.NET VB動態頁。
(2)插入帶出runat="server"表單,設定ID=”Calfrm」。
(3)點選ASP.NET快捷選單下的「更多標籤」按鈕,在彈出【標籤選擇器】對話框中選擇“ASP.NET 標籤”下的“asp Calendar”,如圖10-2所示。
圖10-2 插入「asp Calendar」標籤
(4)按下「插入」按鈕,彈出【標籤編輯器—Calendar】對話框,如圖10-3所示。在這個對話中,可以對Calendar日曆控制項的樣式進行設置,由於有中文,在這裡就不多講了。
(5)儲存ASP.NET VB動態頁為dkCalendar.aspx。在IE中瀏覽,如圖10-4所示。
圖10-3 【標籤編輯器—Calendar】對話框
圖10-4 dkCalendar.aspx在IE中的瀏覽
在圖10-1-4中,可以看到星期的顯示太長了,很難看!如果顯示為“日、一、二、三、四、五、六”,那就好了。
10.2 修改Calendar的星期顯示
(1)在Dreamweaver中開啟dkCalendar.aspx,切換到程式碼視圖,尋找如下程式碼:
<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="gb2312" %>
把它改為:
<%@ Page Language="VB" Debug="true" Culture="zh-CN"%>
(2)點擊ASP.NET快速選單下的「а:xy」按鈕,插入命名空間,如圖10-5所示。
(3)此時新添代碼:
<%@ Import Namespace="" %>
輸入命名空間為System.Globalization,即代碼改為:
<%@ Import Namespace="System.Globalization" %>
(4)再添加命名空間System.Threading,結果如圖10-6所示。
圖10-5 插入命名空間
圖10-6 插入命名空間後程式碼
(5)在程式碼:
<%@ Import Namespace="System.Treading" %>
之後,空白一行,並插入如下程式碼:
<script runat="server">
Dim dkday'定義選擇日期所產生的連結字串的全域變數
'改變星期顯示的函數
Private Sub Calendar1_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Calendar1.PreRender
Dim dkwek = System.Threading.Thread.CurrentThread
Dim dknew =Thread System.Globalization.CultureInfo.CurrentCulture.Clone()
dknew.DateTimeFormat.DayNames = New String() {"日", "一", "二", "三", "四", "五", "六"}
dknew.DateTimeFormat.FirstDayOfWeek = DayOfWeek.Sunday
dkwek.CurrentCulture = dknew
End Sub
</script>
(6)選擇日曆控件Calendar1的原代碼,切換到【標籤】面板的【屬性】選項卡,展開“外觀”選項,選擇“DayNameFormat”項目的下拉式選單,並選擇“Full”,如圖10-7所示。
(7)保存dkCalendar.aspx,在IE中進行瀏覽,結果如圖10-8所示。
圖10-7 選擇「DayNameFormat」值為「Full」 圖10-8 dkCalendar.aspx修改後在IE瀏覽
10.3 新增日曆事件
(1)在Dreamweaver中開啟dkCalendar.aspx,切換到程式碼視圖,選擇Calendar1的原始程式碼,右鍵單擊它,在彈出的快捷選單中選擇“編輯標籤(E)<asp:calendar>”,如圖10-9所示。
圖10-9 選擇“編輯標籤(E)<asp:calendar>”
(2)在彈出【編輯標籤—calendar】的對話框中,展開“事件”項,選擇“OnSelectionChanged”,在“Calendar —OnSelectionChanged”事件文字區域中,輸入“Calendar1_SelectionChanged”,按下“確定”按鈕,如圖10-10所示。
圖10-10 編輯OnSelectionChanged事件
(3)在程式碼<script runat="server">標籤中加入如圖10-11紅色圈所示的程式碼。
圖10-11 新增Calendar1_SelectionChanged事件
(4)在標籤<head></head>之間,插入如圖10-12紅色圈所示的程式碼。
(5)找標籤<body>,將其改為如圖10-13紅色圈所示的程式碼。
圖10-12 插入javascript函數dkwk
圖10-13 修改標籤<body>
(6)再次把Calendar1的“DayNameFormat”項目的設為“Full”,參考10.2節中的第6步驟。
(7) 儲存dkCalendar.aspx,開啟index.aspx,在page_load函數中加入以下程式碼:
if Request.QueryString("dkday")<>nothing then
Ztre.CommandText="SELECT * FROM ZTRE WHERE cstr(ZITIME) LIKE ' %" &Request.QueryString("dkday")&"%' ORDER BY ZITIME DESC"
else
if (request.QueryString("menanw")<>nothing) 或 (session("menanw")<>nothing) then
Ztre.CommandText ="SELECT * FROM ZTRE WHERE LMID = ? ORDER BY ZITIME DESC"
else
Ztre.CommandText="SELECT * FROM ZTRE ORDER BY ZITIME DESC"
end if
end if
結果如圖10-14所示。
圖10-14 在page_load函數中加入程式碼
(8)找到記錄集Ztre的原始程式碼,刪除其CommanText所在的命令列,結果如圖10-15紅色圈所示。
圖10-15 修改後記錄集Ztre的原代碼
(9)保存index.aspx。
10.4 新增嵌入式框架
(1)開啟模板dkblog.dwt.aspx,在ASP.NET快捷選單中,點擊“更多標籤”快捷按鈕,在彈出【標籤選擇器】對話框中,選擇“HTML標籤”,並選擇「iframe」項,如圖10-16所示。
圖10-16 插入iframe標籤(即嵌入式框架)
(2)點選「插入」按鈕,在彈出【標籤編輯器—iframe】對話方塊中對要插入的嵌入式框架進行有關設定如圖10-17所示。
圖10-17 對嵌入式框架進行相關設定
(3)按下「確定」按鈕,返回【標籤編輯器—iframe】對話框,再按下「關閉」按鈕。
(4)儲存範本dkblog.dwt.aspx,更新所有網頁。
(5)在IE中瀏覽index.aspx,結果如圖10-18所示。
圖10-18 在IE中瀏覽index.aspx
提醒:其實日曆事件的實作是十分複雜的事件,這裡只是給一個簡單的例子。這一節還有一個困難就是嵌入式框架對主視窗物件的控制,這裡中只是舉了個用「 parent.location.href 」控制主視窗網頁的流轉。這些就留給讀者們慢慢研究了。