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

閲覧総計：2655　　（本日：1　　昨日：0)

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

#ref(): File not found: "カレンダで弁当注文画面60.jpg" at page "カレンダ弁当注文ツールをAjax化した"

【ポイント】
　AccessDataSourceコントロールを利用せずにプログラムから直接ＤＢにアクセスし、
SQLのINSERT(挿入)コマンドでデータをDBに挿入する。

' 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
サーバ：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>

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

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

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

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