カレンダ弁当注文ツールをAjax化したのバックアップ差分(No.2)

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

　10/08/10に紹介したカレンダの日付クリック時の処理事例(DBへのINSERT)は、データの
　10/08/10に紹介した「[[カレンダの日付クリック時の処理事例(DBへのINSERT)]]」は、データの
ＤＢへの書込みに少々時間が掛かる。「通信中です！少しおまちください。」のメッセージ
を表示した方がユーザにやさしいと考え、カレンダ機能をAjax化し、UpdateProgressで
「おまちください」メッセージを表示する様にしてみた。　　10/08/11

#ref(カレンダで弁当注文画面60.jpg);
#ref(ajax弁当注文カレンダ60.jpg);

【ポイント】
　AccessDataSourceコントロールを利用せずにプログラムから直接ＤＢにアクセスし、
SQLのINSERT(挿入)コマンドでデータをDBに挿入する。
【参考】loading.gif画像は↓こちらの素材集から選んだ
http://www.benricho.org/loading_images/popular01.html
#ref(loading-05.gif);

 ' INSERT(挿入)クエリの作成
 Dim comm As DbCommand = factory.CreateCommand()
 comm.CommandText = "INSERT INTO [注文テーブル] ([名前], [日付], [商品]) VALUES ('山田　太郎', @CalDate, '日替わり弁当')"
 comm.Connection = db
 
 '選択の日付セルの日付情報を取得
 Dim param As DbParameter = factory.CreateParameter()
 param.ParameterName = "@CalDate"
 param.Value = cal.SelectedDate.ToString("yyyy/MM/dd")
 comm.Parameters.Add(param)
 
 'クエリの実行(INSERTクエリの場合は結果セットを返さないExecuteNonQuery)
 db.Open()
 comm.ExecuteNonQuery()

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

【ajaxOrderCalInsert.aspx】
 <%@ Page Language="VB" %>
 <%@ 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 db As DbConnection = factory.CreateConnection()
             db.ConnectionString = MyDbConnectionString
             
             ' 出力する日付セルに対応するスケジュール情報を抽出
             ' 出力する日付セルに対応する情報を抽出
             Dim comm As DbCommand = factory.CreateCommand()
             comm.CommandText = "SELECT [ID],[名前],[日付],[商品] FROM [注文テーブル] WHERE [日付]=@CalDate"
             comm.Connection = db
             
             Dim param As DbParameter = factory.CreateParameter()
             param.ParameterName = "@CalDate"
             param.Value = e.Day.Date.ToString("yyyy/MM/dd")
             comm.Parameters.Add(param)
             
             db.Open()
             Dim reade As DbDataReader = comm.ExecuteReader()
 
             ' 各日の注文した昼食弁当情報を日付セル（e.Call）配下のコントロールとして追加
             Do While reade.Read()
                 e.Cell.Controls.Add(New LiteralControl("<br />" & reade.GetString(3)))
             Loop
         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
             
             ' INSERT(挿入)クエリの作成
             Dim comm As DbCommand = factory.CreateCommand()
             comm.CommandText = "INSERT INTO [注文テーブル] ([名前], [日付], [商品]) VALUES ('山田　太郎', @CalDate, '日替わり弁当')"
             comm.Connection = db
             
             '選択の日付セルの日付情報を取得
             Dim param As DbParameter = factory.CreateParameter()
             param.ParameterName = "@CalDate"
             param.Value = cal.SelectedDate.ToString("yyyy/MM/dd")
             comm.Parameters.Add(param)
       
             'クエリの実行(INSERTクエリの場合は結果セットを返さないExecuteNonQuery)
             db.Open()
             comm.ExecuteNonQuery()
 
         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">
     <asp:ScriptManager ID="ScriptManager1" runat="server">
     </asp:ScriptManager>
     <div>
     
         弁当注文内容をカレンダに表示＆日付クリックで簡単弁当注文　　10/08/10<br />
         （Ajax仕様に変更：CalendarコントロールをUpdatePanelに入れた　　10/08/11）<br />
         <br />
         <asp:UpdatePanel ID="UpdatePanel1" runat="server">
             <ContentTemplate>
                 <asp:Calendar ID="cal" runat="server" onDayRender="cal_DayRender" 
             OnSelectionChanged="cal_SelectionChanged" BackColor="#FFFFCC" 
             BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="Shortest" 
             Font-Names="Verdana" Font-Size="12pt" ForeColor="#663399" Height="412px" 
             ShowGridLines="True" Width="864px">
                     <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
                     <SelectorStyle BackColor="#FFCC66" />
                     <WeekendDayStyle BackColor="#FFCCFF" />
                     <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
                     <OtherMonthDayStyle ForeColor="#CC9966" />
                     <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
                     <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
                     <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" 
                 ForeColor="#FFFFCC" />
                 </asp:Calendar>
             </ContentTemplate>
         </asp:UpdatePanel>
         <asp:UpdateProgress ID="UpdateProgress1" runat="server" 
             AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="100">
             <ProgressTemplate>
                 <img src="loading-05.gif" style="width: 32px; height: 32px" /> 通信中です！少しお待ちください。
             </ProgressTemplate>
         </asp:UpdateProgress>
         <br />
     
     </div>
     </form>
 </body>
 </html>



【参考にしたページ】
　　　なし


#comment_nospam
#vote(参考になった[0],ふつう[0],参考にならなかった[0])
カレンダ弁当注文ツールをAjax化した のバックアップ差分(No.2)

カレンダ弁当注文ツールをAjax化したのバックアップ差分(No.2)
