第10章 BLOGイベントカレンダーの実装
Doking's BLOGは勉強ノートなので、カレンダーを押すと全てのノートとノートの回答を確認することができます。
困難さの分析: Calendar カレンダー コントロールをテンプレートに直接追加する必要がありますか?いいえ！それはうまくいきません! Calendar カレンダー コントロールはサーバー コントロールであるため、runat="server" を含むフォームである必要があります。ただし、runat="server" を含むフォームは 1 つのページに 1 つだけ存在できます。そうでない場合は、図 10-1 に示すエラーが発生します。時々表示されます。
図 10-1 ページに runat="server" フォームを含むエラーが 1 つしか存在できない場合はどうすればよいですか
?これは転送用の埋め込みフレームワークです。
10.1 Calendar カレンダー コントロールの追加
(1) 新しい空の ASP.NET VB 動的ページを作成します。
(2) runat="server" フォームを挿入して取り出し、ID="Calfrm" を設定します。
(3) ASP.NET ショートカット メニューの [その他のタグ] ボタンをクリックし、図 10-2 に示すように、ポップアップ [タグ セレクター] ダイアログ ボックスの [ASP.NET タグ] で [asp Calendar] を選択します。 。
図 10-2 「asp Calendar」タグの挿入
(4) 「挿入」ボタンを押すと、図 10-3 に示す [タグエディタ - カレンダー] ダイアログボックスが表示されます。このダイアログでは、Calendar カレンダー コントロールのスタイルを設定できます。中国語なので、ここでは詳しく説明しません。
(5) ASP.NET VB 動的ページを dkCalendar.aspx として保存します。図 10-4 に示すように、IE で参照します。
図10-3 [タグエディタ－カレンダー]ダイアログボックス
図 10-4 IE での dkCalendar.aspx の参照
図 10-1-4 では、週の表示が長すぎて見苦しいことがわかります。 「日、一、二、三、四、五、六」と読めればいいですね。
10.2 カレンダーの週表示を変更する
(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 = System.Globalization.CultureInfo.CurrentCulture.Clone()
dknew.DateTimeFormat.DayNames = New String() {"Day", "一", "二", "三", "四", "五", "六"}
dknew.DateTimeFormat.FirstDayOfWeek = DayOfWeek.Sunday
dkwek.CurrentCulture = dknew
End Sub
</script>
(6) カレンダーコントロール Calendar1 の元のコードを選択し、[ラベル]パネルの[プロパティ]タブに切り替えます図 10-7 に示すように、[外観] オプションを展開し、[DayNameFormat] 項目のドロップダウン メニューを選択して、[完全] を選択します。
(7) dkCalendar.aspx を保存し、IE で参照します。結果は図 10-8 に示されています。
dkCalendar.aspx を変更した後の IE 10.3 での
カレンダー イベントの追加
(1) Dreamweaver で dkCalendar.aspx を開き、コード ビューに切り替え、元のコードを選択します。 Calendar1 を右クリックし、ポップアップ ショートカット メニューで [ラベルの編集 (E) <asp:calendar>] を選択します (図 10-9 を参照)。
図 10-9 「ラベルの編集(E) <asp:calendar>」を選択します。
(2) [ラベルの編集 - カレンダー] が表示されるダイアログ ボックスで、「イベント」項目を展開し、「OnSelectionChanged」を選択し、「カレンダー」をクリックします。 —OnSelectionChanged" 図 10-10 に示すように、イベント テキスト領域に「Calendar1_SelectionChanged」と入力し、[OK] ボタンを押します。
図 10-10 OnSelectionChanged イベントの編集
(3) 図 10-11 の赤丸で示したコードを code <script runat="server"> タグ内に追加します。
図 10-11 Calendar1_SelectionChanged イベントの追加
(4) <head></head> タグの間に、図 10-12 の赤丸で示したコードを挿入します。
(5) <body> タグを見つけて、図 10-13 の赤丸で示したコードに変更します。
図 10-12 JavaScript 関数 dkwk の挿入
図 10-13 <body> タグの変更
(6) 10.2 項の手順 6 を参照して、Calendar1 の「DayNameFormat」項目を再度「Full」に設定します。
(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 の元のコードを検索し、その CommandText が配置されているコマンド ラインを削除します。結果は図 10-15 の赤い丸で示されています。
図 10-15 変更されたレコード セット Ztre の元のコード (9) は、
index.aspx を保存します。
10.4 埋め込みフレームを追加する
(1) テンプレート dkblog.dwt.aspx を開き、ASP.NET ショートカット メニューの [その他のタグ] ショートカット ボタンをクリックし、表示される [タグ セレクター] ダイアログ ボックスで [HTML タグ] を選択します。図 10-16 に示すように、「iframe」項目を選択します。
図 10-16 iframe タグ（埋め込みフレーム）の挿入
(2) 「挿入」ボタンをクリックし、表示される [タグエディタ - iframe] ダイアログボックスで、挿入する埋め込みフレームを次のように設定します。図 10-17 に示されています。
図 10-17 埋め込みフレームの設定
(3) [OK]ボタンを押して[タグエディタ-iframe]ダイアログに戻り、[閉じる]ボタンを押します。
(4) テンプレート dkblog.dwt.aspx を保存し、すべての Web ページを更新します。
(5) IE でindex.aspx を参照します。結果は図 10-18 に示されています。
図 10-18 IE でのindex.aspx の参照
注意: 実際、カレンダー イベントの実装は非常に複雑なイベントです。ここでは単純な例を示します。このセクションのもう 1 つの問題は、埋め込みフレームワークによるメイン ウィンドウ オブジェクトの制御です。ここでは、 メイン ウィンドウ Web ページのフローを制御するために「 parent.location.href 」のみを使用します。 これらについては、読者にゆっくりと学んでいただきたいと思います。