閲覧総計:2655 (本日:1 昨日:0)
10/08/10に紹介した「カレンダの日付クリック時の処理事例(DBへのINSERT)」は、データの
DBへの書込みに少々時間が掛かる。「通信中です!少しおまちください。」のメッセージ
を表示した方がユーザにやさしいと考え、カレンダ機能をAjax化し、UpdateProgressで
「おまちください」メッセージを表示する様にしてみた。 10/08/11
【参考】loading.gif画像は↓こちらの素材集から選んだ
http://www.benricho.org/loading_images/popular01.html
開発環境: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>
【参考にしたページ】
なし