  |
 |
2009年7月4日     |
|
日付入力ができるポップアップウィンドウを作成する 海外internet.com発の記事前提知識
はじめに 少し前、私はWebフォームに取り組んでいて、ユーザーが しかし、今は.NETの時代です。私は、ASP.NETに組み込まれているリッチコントロールを利用して、これを簡単に行う方法を考え出したいと思いました。そこでGoogleで軽く検索をかけてみた結果、解決策が見つかりました。それは、ASP.NET この方法を試したところ、すべてうまくいきました。サードパーティコントロールを使用したり、自分で一から作成することなく、望んでいた機能を実現するソリューションを手に入れたのです。しかし、それはテストの始まりでした。 すべて動作はしたものの、一方で、ユーザーが日付をクリックしてから 改良案の模索 私は依然として、自分でカスタムのカレンダコントロールを作るつもりはありませんでしたが、このPostBack方式には不満がありました。そこで、ASP.NET その結果、カレンダの個々の日付から標準の日付リンクを消去し、自分でリンクを作成できることを発見しました。そこで、 ソリューションの作成では、今回のソリューションを構成する要素を見てみましょう。
Webフォームは、次のように単純なものです。  以下は「pick」リンクのHTMLです。このリンクから、日付入力ポップアップが起動します。 <a href="javascript:;" onclick="calendarPicker(’Form1.txtEventDate’);" title="Pick Date from Calendar">pick</a> コードからわかるとおり、このリンクは <script language="javascript" type="text/javascript"> /// <summary> /// Launches the DatePicker page in a popup window, /// passing a JavaScript reference to the field that we want to set. /// </summary> /// <param name="strField">String. /// The JavaScript reference to the field that we want to set, /// in the format: FormName.FieldName /// Please note that JavaScript is case-sensitive.</param> function calendarPicker(strField) { window.open(’DatePicker.aspx?field=’ + strField, ’calendarPopup’, ’width=250,height=190,resizable=yes’); } </script> 次に示すのは、DatePicker ASPXページです。  DatePickerページは、1つの標準ASP.NET <%@ Page language="c#" Codebehind="DatePicker.aspx.cs" AutoEventWireup="false" Inherits="CalendarPopup.DatePicker" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head> <title>DatePicker</title> <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1"> <meta name="CODE_LANGUAGE" content="C#"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> <style type="text/css"> BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 4px; PADDING-TOP: 0px } BODY { FONT-SIZE: 9pt; FONT-FAMILY: Verdana, Geneva, Sans-Serif } TABLE { FONT-SIZE: 9pt; FONT-FAMILY: Verdana, Geneva, Sans-Serif } TR { FONT-SIZE: 9pt; FONT-FAMILY: Verdana, Geneva, Sans-Serif } TD { FONT-SIZE: 9pt; FONT-FAMILY: Verdana, Geneva, Sans-Serif } </style> </head> <body onblur="this.window.focus();" ms_positioning="FlowLayout"> <form id="Form1" method="post" runat="server"> <div align="center"> <asp:calendar id="Calendar1" runat="server" showgridlines="True" bordercolor="Black"> <todaydaystyle forecolor="White" backcolor="#FFCC66"/> <selectorstyle backcolor="#FFCC66"/> <nextprevstyle font-size="9pt" forecolor="#FFFFCC"/> <dayheaderstyle height="1px" backcolor="#FFCC66"/> <selecteddaystyle font-bold="True" backcolor="#CCCCFF/> <titlestyle font-size="9pt" font-bold="True" forecolor="#FFFFCC" backcolor="#990000"/> <othermonthdaystyle forecolor="#CC9966"/> </asp:calendar> </div> </form> </body> </html> 今回のソリューションの鍵になるのは、 /// <summary> /// Replaces the standard post-back link for each calendar day /// with the javascript to set the opener window’s TextBox text. /// Eliminates a needless round-trip to the server. /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void Calendar1_DayRender(object sender, System.Web.UI.WebControls.DayRenderEventArgs e) { // Clear the link from this day e.Cell.Controls.Clear(); // Add the custom link System.Web.UI.HtmlControls.HtmlGenericControl Link = new System.Web.UI.HtmlControls.HtmlGenericControl(); Link.TagName = "a"; Link.InnerText = e.Day.DayNumberText; Link.Attributes.Add("href", String.Format("JavaScript:window.opener.document.{0}.value" + "= ’{1:d}’; window.close();", Request.QueryString["field"], e.Day.Date)); // By default, this will highlight today’s date. if(e.Day.IsSelected) { Link.Attributes.Add("style", this.Calendar1.SelectedDayStyle.ToString()); } // Now add our custom link to the page e.Cell.Controls.Add(Link); } このメソッドは、 JavaScriptにおける 今いる日にちに対応するテーブルセル内に、置き換えたハイパーリンクを挿入すれば、すべて完了です。 ただし、まだカスタムメソッドを呼び出すように VS .NETは、ASP.NET  カスタムデリゲートを自分でアタッチしたい場合（あるいは単にVS .NETのIDEによって変更された箇所を確認したい場合）は、分離コードファイル内の「Web Form Designer generated code」と書かれた場所で /// <summary> /// Required method for Designer support - do not modify /// the contents of this method with the code editor. /// </summary> private void InitializeComponent() { this.Calendar1.DayRender += new System.Web.UI.WebControls.DayRenderEventHandler(this.Calendar1_DayRender); this.Load += new System.EventHandler(this.Page_Load); } テスト これで、求めている機能を達成するための作業はすべて終わりました。プロジェクトをビルドし、実行して、結果をテストしましょう。「pick」リンクをクリックすれば、DatePickerポップアップを起動できるはずです。 起こり得る問題 動作が正しく行われているか確認しなければならない箇所がいくつかあります。最初に、分離コードファイル内の ページがまだ正常に動作しない場合は、JavaScriptエラーの可能性があります。JavaScriptは大文字と小文字を区別することに注意してください。正しい「FormName.FieldName」を 疑わしい場合はデバッグをすることです。VS .NETではJavaScriptコードのデバッグも可能です。JavaScriptをデバッグするには、Internet Explorerの［Tools］メニューから［Internet Options］ダイアログボックスを開きます。そして、［Advanced］タブで［Disable script debugging］のチェックを外します。  スクリプトのデバッグを有効にしたら、プロジェクトをデバッグモードで起動します。［Debug］メニューから［Windows］→［Running Documents］を選択します。  ［Running Documents］ウィンドウ内のDefault.aspxをダブルクリックし、JavaScriptにブレークポイントを設定します。  ブラウザの呼び出しがブレークポイントに達すると、コントロールからVisual Studioに戻ります。そこでスクリプト内のJavaScriptパラメータの値を調べることができます。この機能は非常に役に立ちます。  さらなる改善の可能性PostBackの回数をさらに減らすために、自分で「月入力」コントロールを作成して、ユーザーが何回もクリックすることなく特定の月に1ステップで到達できるようにすることもできるでしょう。この単純なサンプルは、さまざまに拡張および改善することができます。 結論.NET以前に覚えたWeb開発について、すべてを忘れる必要はありません。Microsoftは、Webコントロールの機能拡張を簡単にしてくれています。この記事を読んで、ASP.NETが開発者が物事のしくみに好奇心を持ち、変更を加えることを奨励するように作られていることをわかっていただけたら、と思います。 著者紹介Conrad Jalali（Conrad Jalali）
ユーザビリティに重点を置く設計会社、Useful Studiosの共同創立者。ここ5年間はActive Server Pages（ASP）に取り組んでおり、C#とSQL Server 2000を使用したASP.NET開発を専門とする。Sarah Lawrence Collegeを卒業し、教養課程の学士号を取得。Microsoft認定プロフェッショナル（MCP）の資格を所有。妻Elizabethと飼い犬Sparkyと共にワシントンDCに居住。メールの宛先はconrad＠smallcog.com。
関連記事 関連テーマ
最新トップニュース
|
|
Conrad Jalali
