カレンダの日付クリック時の処理手法のバックアップ差分(No.8)

追加された行はこの色です。
削除された行はこの色です。
閲覧総計：&counter();　　（本日：&counter(today);　　昨日：&counter(yesterday);)

　カレンダ コントロールの「日付」をクリックした時の処理の書き方を確認した。
今回は、日付をクリックするとその日の予定明細が表示される事例である。　10/08/09
#ref(sqlCalDescDisp01.JPG);

参考にしたページは↓こちら。
「Calendarコントロール上で選択された日付について処理を行うには？」05/08/12
http://www.atmarkit.co.jp/fdotnet/dotnettips/337aspcalendarsel/aspcalendarsel.html

　ところが、ＤＢへの接続手法がASP.NET2.0以降は、記事内容(ASP.NET1.X)から変更にな
っているので、「ＤＢへの接続」のコードを↓記事を参考に全面的に改造した。
「データソース・コントロールでいってみよう（前編）」　06/07/29
http://www.atmarkit.co.jp/fdotnet/vs2005db/vs2005db_06/vs2005db_06_03.html

　また、実際にはＤＢにMS-Accessを利用したいので、↓このページの情報を参考に、
ＤＢをSQL Server2008→MS-Access2003に変更し、正常に稼働する事を確認した。
「ASP.NET　アクセスデータにアクセスする（コーディング）」　
http://3939deb.seesaa.net/article/107785168.html

#contents

開発環境：VWD2008 + Access2003 + SQL Server2008
サーバ：ASP.NET3.5 + Access2003

【機能】　カレンダの日付をクリックするとその日の予定の詳細情報が表示される。
　また、予定の入っている日は、カレンダの日付が水色で表示されている。

*DBにSQL Server2008を使用した場合 [#n79600a7]

【稼働画面】
#ref(sqlCalDescDesign01.JPG);
#ref(sqlCalDescData01.JPG);
#ref(sqlCalDescDisp01.JPG);

【sqlCalDescription.aspx】
 <%@ Page ContentType="text/html" Language="VB" %>
 <%@ Import Namespace="System.Data" %>
 <%@ Import Namespace="System.Data.Common" %>
 <%@ Import Namespace="System.Drawing" %>
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <script runat="Server">
     'SQL ServerDBのConnectionString
     Dim MyDbConnectionString As String = "Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\SQLCalendar.mdf;Integrat ed Security=True;User Instance=True"
     'SQL ServerDBのProviderName
     Dim MyDbProviderName As String = "System.Data.SqlClient"
     
     Dim scheInfo As DbDataReader
     
     ' それぞれの日付セルをレンダリングするタイミングで実行
     Sub cal_DayRender(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DayRenderEventArgs)
         
         Dim setting As ConnectionStringSettings = _
           ConfigurationManager.ConnectionStrings(MyDbConnectionString)
         Dim factory As DbProviderFactory = _
           DbProviderFactories.GetFactory(MyDbProviderName)
         
         Using db As DbConnection = factory.CreateConnection()
             db.ConnectionString = MyDbConnectionString
             
             ' 出力する日付セルに対応するスケジュール情報を抽出
             Dim comm As DbCommand = factory.CreateCommand()
             comm.CommandText = "SELECT [ID] FROM [schedule02] WHERE [sdate]=@sdate"
             comm.Connection = db
             
             Dim param As DbParameter = factory.CreateParameter()
             param.ParameterName = "@sdate"
             param.Value = e.Day.Date.ToString("yyyy/MM/dd")
             comm.Parameters.Add(param)
             
             db.Open()
             Dim reader As DbDataReader = comm.ExecuteReader()
  
            ' スケジュールが存在する場合にのみセルの背景色をセット
             If reader.HasRows Then e.Cell.BackColor = Color.Lavender
         End Using
         
     End Sub
 
     ' 選択セルが変更されたタイミングで実行
     Protected Sub cal_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
 
         Dim setting As ConnectionStringSettings = _
           ConfigurationManager.ConnectionStrings(MyDbConnectionString)
         Dim factory As DbProviderFactory = _
           DbProviderFactories.GetFactory(MyDbProviderName)
         
         Using db As DbConnection = factory.CreateConnection()
             db.ConnectionString = MyDbConnectionString
             
             ' 選択された日付をキーにscheduleテーブルを検索
             Dim comm As DbCommand = factory.CreateCommand()
             comm.CommandText = "SELECT * FROM [schedule02] WHERE [sdate]=@sdate ORDER BY [stime] ASC"
             comm.Connection = db
             
             Dim param As DbParameter = factory.CreateParameter()
             param.ParameterName = "@sdate"
             param.Value = cal.SelectedDate.ToString("yyyy/MM/dd")
             comm.Parameters.Add(param)
             
             db.Open()
             
             ' 取得したDataReaderをRepeaterコントロールにバインド
             scheInfo = comm.ExecuteReader()
             rep.DataBind()
         End Using
         
     End Sub
 </script>
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
     <title>スケジュールの詳細を表示する</title>
 </head>
 <body>
     <form id="form1" runat="server">
     <div>
     <table border="0">
     <tr><td valign="top" width="230">
       <asp:Calendar id="cal" runat="Server" Width="200" Height="200"
        DayHeaderStyle-BackColor="#FFCC66"
         onDayRender="cal_DayRender" OnSelectionChanged="cal_SelectionChanged"
         ShowGridLines="true"
         BorderWidth="3" BorderColor="Black" Font-Name="Verdana"
         Font-Size="10px" TitleStyle-BackColor="#FFCC66"
         TitleStyle-Font-Size="12px" TitleStyle-Font-Bold="true"
         DayStyle-VerticalAlign="Top" SelectedDayStyle-BackColor="Navy"
         ShowNextPrev="True" NextPrevFormat="FullMonth">
         <SelectedDayStyle BackColor="#CC5533" />
       </asp:Calendar>
     </td><td valign="top" width="370">
      <asp:Repeater id="rep" runat="Server" DataSource="<%# scheInfo %>">
         <HeaderTemplate>
           <table width="100%" bgcolor="#cee3f0" border="0">
          <tr>
            <td><span style="font-weight:bold;">&nbsp;&nbsp;&nbsp;
               <%# cal.SelectedDate.ToString("yyyy年MM月dd日") %>のスケジュール
               </span></td>
          </tr>
          </table>
           <dl>
        </HeaderTemplate>
        <ItemTemplate>
           <dt style="font-weight:bold;">
             <%# DataBinder.Eval(Container.DataItem, "title") %>
            （<%#DataBinder.Eval(Container.DataItem, "stime")%>～
             <%#DataBinder.Eval(Container.DataItem, "etime")%>）</dt>
           <dd><%# DataBinder.Eval(Container.DataItem, "memo") %></dd>
        </ItemTemplate>
         <FooterTemplate></dl></FooterTemplate>
       </asp:Repeater>
     </td></tr>
     </table>
     </div>
     </form>
 </body>
 </html>


*DBにMS-Access2003を使用した場合 [#h881b115]

【ポイント】
ＤＢ接続の為のConnectionString情報とProviderName情報の２つを変更するだけでＤＢを
SQL ServerからMS-Accessに変更できる。
 'MS-AccessDBのConnectionString
 Dim MyDbConnectionString As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|\AccessDB.mdb;Persist Security Info=True"
 'MS-AccessDBのProviderName
 Dim MyDbProviderName As String = "System.Data.OleDb"


【稼働画面】
#ref(acCalDescDesign01.JPG);
#ref(acCalDescData01.JPG);
#ref(sqlCalDescDisp01.JPG);

【acCalDescription.aspx】
 <%@ Page ContentType="text/html" Language="VB" %>
 <%@ Import Namespace="System.Data" %>
 <%@ Import Namespace="System.Data.Common" %>
 <%@ Import Namespace="System.Drawing" %>
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <script runat="Server">
     'MS-AccessDBのConnectionString
     Dim MyDbConnectionString As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|\AccessDB.mdb;Persist  Security Info=True"
     'MS-AccessDBのProviderName
     Dim MyDbProviderName As String = "System.Data.OleDb"
     
     Dim scheInfo As DbDataReader
     
     ' それぞれの日付セルをレンダリングするタイミングで実行
     Sub cal_DayRender(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DayRenderEventArgs)
         
         Dim setting As ConnectionStringSettings = _
           ConfigurationManager.ConnectionStrings(MyDbConnectionString)
         Dim factory As DbProviderFactory = _
           DbProviderFactories.GetFactory(MyDbProviderName)
         
         Using db As DbConnection = factory.CreateConnection()
             db.ConnectionString = MyDbConnectionString
             
             ' 出力する日付セルに対応するスケジュール情報を抽出
             Dim comm As DbCommand = factory.CreateCommand()
             comm.CommandText = "SELECT [ID] FROM [schedule02] WHERE [sdate]=@sdate"
             comm.Connection = db
             
             Dim param As DbParameter = factory.CreateParameter()
             param.ParameterName = "@sdate"
             param.Value = e.Day.Date.ToString("yyyy/MM/dd")
             comm.Parameters.Add(param)
             
             db.Open()
 
             Dim reader As DbDataReader = comm.ExecuteReader()
             ' スケジュールが存在する場合にのみセルの背景色をセット
             If reader.HasRows Then e.Cell.BackColor = Color.Lavender
         End Using
         
     End Sub
 
     ' 選択セルが変更されたタイミングで実行
     Protected Sub cal_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
 
         Dim setting As ConnectionStringSettings = _
           ConfigurationManager.ConnectionStrings(MyDbConnectionString)
         Dim factory As DbProviderFactory = _
           DbProviderFactories.GetFactory(MyDbProviderName)
         
         Using db As DbConnection = factory.CreateConnection()
             db.ConnectionString = MyDbConnectionString
             
             ' 選択された日付をキーにscheduleテーブルを検索
             Dim comm As DbCommand = factory.CreateCommand()
             comm.CommandText = "SELECT * FROM [schedule02] WHERE [sdate]=@sdate ORDER BY [stime] ASC"
             comm.Connection = db
             
             Dim param As DbParameter = factory.CreateParameter()
             param.ParameterName = "@sdate"
             param.Value = cal.SelectedDate.ToString("yyyy/MM/dd")
             comm.Parameters.Add(param)
             
             db.Open()
             
             ' 取得したDataReaderをRepeaterコントロールにバインド
             scheInfo = comm.ExecuteReader()
             rep.DataBind()
         End Using
         
     End Sub
 </script>
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
     <title>スケジュールの詳細を表示する</title>
 </head>
 <body>
     <form id="form1" runat="server">
     <div>
     <table border="0">
     <tr><td valign="top" width="230">
       <asp:Calendar id="cal" runat="Server" Width="200" Height="200"
        DayHeaderStyle-BackColor="#FFCC66"
         onDayRender="cal_DayRender" OnSelectionChanged="cal_SelectionChanged"
         ShowGridLines="true"
         BorderWidth="3" BorderColor="Black" Font-Name="Verdana"
         Font-Size="10px" TitleStyle-BackColor="#FFCC66"
         TitleStyle-Font-Size="12px" TitleStyle-Font-Bold="true"
         DayStyle-VerticalAlign="Top" SelectedDayStyle-BackColor="Navy"
         ShowNextPrev="True" NextPrevFormat="FullMonth">
         <SelectedDayStyle BackColor="#CC5533" />
       </asp:Calendar>
     </td><td valign="top" width="370">
      <asp:Repeater id="rep" runat="Server" DataSource="<%# scheInfo %>">
         <HeaderTemplate>
           <table width="100%" bgcolor="#cee3f0" border="0">
          <tr>
            <td><span style="font-weight:bold;">&nbsp;&nbsp;&nbsp;
               <%# cal.SelectedDate.ToString("yyyy年MM月dd日") %>のスケジュール
               </span></td>
          </tr>
          </table>
           <dl>
        </HeaderTemplate>
        <ItemTemplate>
           <dt style="font-weight:bold;">
             <%# DataBinder.Eval(Container.DataItem, "title") %>
            （<%#DataBinder.Eval(Container.DataItem, "stime")%>～
             <%#DataBinder.Eval(Container.DataItem, "etime")%>）</dt>
           <dd><%# DataBinder.Eval(Container.DataItem, "memo") %></dd>
        </ItemTemplate>
         <FooterTemplate></dl></FooterTemplate>
       </asp:Repeater>
     </td></tr>
     </table>
     </div>
     </form>
 </body>
 </html>


【参考にしたページ】
1.「Calendarコントロール上で選択された日付について処理を行うには？」05/08/12
http://www.atmarkit.co.jp/fdotnet/dotnettips/337aspcalendarsel/aspcalendarsel.html

2.「データソース・コントロールでいってみよう（前編）」　06/07/29
http://www.atmarkit.co.jp/fdotnet/vs2005db/vs2005db_06/vs2005db_06_03.html

3.「ASP.NET　アクセスデータにアクセスする（コーディング）」　
http://3939deb.seesaa.net/article/107785168.html
-- 1' --  &new{2011-05-15 (日) 15:38:59};
- 1 -- [[1]] &new{2011-12-20 (火) 11:24:16};
- 1 -- [[1]] &new{2011-12-20 (火) 11:24:19};
- 1 -- [[-1']] &new{2011-12-20 (火) 11:24:20};
-- 1' -- [[1]] &new{2011-12-20 (火) 11:24:21};
- 1 -- [[1]] &new{2011-12-20 (火) 11:24:22};
- 1 -- [[1]] &new{2012-05-18 (金) 11:38:29};
- 1 -- [[1]] &new{2012-05-18 (金) 11:38:33};
- 1 -- [[-1']] &new{2012-05-18 (金) 11:38:34};
-- 1' -- [[1]] &new{2012-05-18 (金) 11:38:35};
- 1 -- [[1]] &new{2012-05-18 (金) 11:38:36};
- 1 -- [[1]] &new{2012-07-03 (火) 12:33:00};
- 1 -- [[1]] &new{2012-07-03 (火) 12:33:05};
- 1 -- [[-1']] &new{2012-07-03 (火) 12:33:06};
-- 1' -- [[1]] &new{2012-07-03 (火) 12:33:08};
- 1 -- [[1]] &new{2012-07-03 (火) 12:33:09};

#comment_nospam
- 1 -- [[1]] &new{2012-07-03 (火) 12:33:04};
- 1 -- [[1]] &new{2012-05-18 (金) 11:38:32};
- 1 -- [[1]] &new{2011-12-20 (火) 11:24:17};
#vote(参考になった[0],ふつう[0],参考にならなかった[0])
#vote(参考になった[0],ふつう[1],参考にならなかった[0])
カレンダの日付クリック時の処理手法 のバックアップ差分(No.8)

カレンダの日付クリック時の処理手法のバックアップ差分(No.8)
