閲覧総計:5267 (本日:1 昨日:0)
カレンダ コントロールの「日付」をクリックした時の処理の書き方を確認した。
今回は、日付をクリックするとその日の予定明細が表示される事例である。 10/08/09
参考にしたページは↓こちら。
「Calendarコントロール上で選択された日付について処理を行うには?」05/08/12
http://www.atmarkit.co.jp/fdotnet/dotnettips/337aspcalendarsel/aspcalendarsel.html
ところが、DBへの接続手法がASP.NET2.0以降は、記事内容(ASP.NET1.X)から変更にな
っているので、「DBへの接続」のコードを↓記事を参考に全面的に改造した。
「データソース・コントロールでいってみよう(前編)」 06/07/29
http://www.atmarkit.co.jp/fdotnet/vs2005db/vs2005db_06/vs2005db_06_03.html
また、実際にはDBにMS-Accessを利用したいので、↓このページの情報を参考に、
DBをSQL Server2008→MS-Access2003に変更し、正常に稼働する事を確認した。
「ASP.NET アクセスデータにアクセスする(コーディング)」
http://3939deb.seesaa.net/article/107785168.html
開発環境:VWD2008 + Access2003 + SQL Server2008
サーバ:ASP.NET3.5 + Access2003
【機能】 カレンダの日付をクリックするとその日の予定の詳細情報が表示される。
また、予定の入っている日は、カレンダの日付が水色で表示されている。
【稼働画面】
【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;"> <%# 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接続の為のConnectionString情報とProviderName情報の2つを変更するだけでDBを
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"
【稼働画面】
【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;"> <%# 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