閲覧総計:5267  (本日:1  昨日:0)

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

#ref(): File not found: "CalTextInp01.jpg" at page "カレンダの日付クリック時の処理手法"

参考にしたページは↓こちら。
「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

【機能】DBの予定情報をカレンダに表示する。

DBにSQL Server2008を使用した場合

【稼働画面】

#ref(): File not found: "SqlScheduleDesign01.JPG" at page "カレンダの日付クリック時の処理手法"

#ref(): File not found: "SqlScheduleData01.JPG" at page "カレンダの日付クリック時の処理手法"

#ref(): File not found: "SqlCalCellDisp01.JPG" at page "カレンダの日付クリック時の処理手法"

【sqlCalCellDisp.aspx】

<%@ Page Language="VB" ContentType="text/html" %>
<%@ Import Namespace="System.Data.Common" %>

<!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;Integrated Security=True;Use r Instance=True"
    'SQL ServerDBのProviderName
    Dim MyDbProviderName As String = "System.Data.SqlClient"
    
    ' それぞれの日付セルをレンダリングするタイミングで実行
    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 objDb As DbConnection = factory.CreateConnection()
            objDb.ConnectionString = MyDbConnectionString
            
            ' 出力する日付セルに対応するスケジュール情報を抽出
            Dim objCom As DbCommand = factory.CreateCommand()
            objCom.CommandText = "SELECT [ID],[title],[sdate],[stime],[etime] FROM [schedule01] WHERE [sdate]=@sdate ORDER BY [stime] ASC"
            objCom.Connection = objDb
            
            Dim objPrm As DbParameter = factory.CreateParameter()
            objPrm.ParameterName = "@sdate"
            objPrm.Value = e.Day.Date.ToString("yyyy/MM/dd")
            objCom.Parameters.Add(objPrm)
            
            objDb.Open()
            
            Dim objRd As DbDataReader = objCom.ExecuteReader()
            ' 取得したスケジュール情報を基に
            ' LiteralControl(固定文字列)を生成し、
            ' 日付セル(e.Call)配下のコントロールとして追加
            Do While objRd.Read()
                e.Cell.Controls.Add(New LiteralControl("<br />" & String.Format("{0}〜{1}:{2}", objRd.GetString(3), objRd.GetString(4), objRd.G etString(1))))
            Loop
        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>
    
  <asp:Calendar id="cal" runat="server"
    DayHeaderStyle-BackColor="#FFCC66"
    onDayRender="cal_DayRender" 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" DayStyle-Height="50px"
    DayStyle-Width="14%" SelectedDayStyle-BackColor="Navy"
    ShowNextPrev="True" NextPrevFormat="FullMonth"> 
    <SelectedDayStyle BackColor="#CC5533" />
  </asp:Calendar>
        <br />
    
    </div>
    </form>
</body>
</html>

DBにMS-Access2003を使用した場合

【ポイント】
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"

【稼働画面】

#ref(): File not found: "AccessScheduleDesign01.JPG" at page "カレンダの日付クリック時の処理手法"

#ref(): File not found: "AccessSchedule01.JPG" at page "カレンダの日付クリック時の処理手法"

#ref(): File not found: "CalCellDisp01.JPG" at page "カレンダの日付クリック時の処理手法"

【acCalCellDisp.aspx】

<%@ Page Language="VB" ContentType="text/html" %>
<%@ Import Namespace="System.Data.Common" %>

<!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"
    
    ' それぞれの日付セルをレンダリングするタイミングで実行
    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 objDb As DbConnection = factory.CreateConnection()
            objDb.ConnectionString = MyDbConnectionString
            
            ' 出力する日付セルに対応するスケジュール情報を抽出
            Dim objCom As DbCommand = factory.CreateCommand()
            objCom.CommandText = "SELECT [ID],[title],[sdate],[stime],[etime] FROM [schedule01] WHERE [sdate]=@sdate ORDER BY [stime] ASC"
            objCom.Connection = objDb
            
            Dim objPrm As DbParameter = factory.CreateParameter()
            objPrm.ParameterName = "@sdate"
            objPrm.Value = e.Day.Date.ToString("yyyy/MM/dd")
            objCom.Parameters.Add(objPrm)
            
            objDb.Open()
            
            Dim objRd As DbDataReader = objCom.ExecuteReader()
            ' 取得したスケジュール情報を基に
            ' LiteralControl(固定文字列)を生成し、
            ' 日付セル(e.Call)配下のコントロールとして追加
            Do While objRd.Read()
                e.Cell.Controls.Add(New LiteralControl("<br />" & String.Format("{0}〜{1}:{2}", objRd.GetString(3), objRd.GetString(4), objRd.G etString(1))))
            Loop
        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>
    
  <asp:Calendar id="cal" runat="server"
    DayHeaderStyle-BackColor="#FFCC66"
    onDayRender="cal_DayRender" 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" DayStyle-Height="50px"
    DayStyle-Width="14%" SelectedDayStyle-BackColor="Navy"
    ShowNextPrev="True" NextPrevFormat="FullMonth"> 
    <SelectedDayStyle BackColor="#CC5533" />
  </asp:Calendar>
        <br />
    
    </div>
    </form>
</body>
</html>

【参考にしたページ】
1.「Calendarコントロールのセルに任意のデータを埋め込むには?」05/03/18
http://www.atmarkit.co.jp/fdotnet/dotnettips/277aspcalceldata/aspcalceldata.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


選択肢 投票
参考になった 0  
ふつう 0  
参考にならなかった 0  

トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS