ASP.NET AJAXとSPREADの連携

SPREAD for .NET Web Forms EditionのAJAXエンジンを活用する

2007/08/28 14:00

Calendarで選択された日付をSPREADに設定する

1．CalendarのSelectionChangedイベントでSPREADに値を設定する

　それでは次にCalendarで選択した日付をSPREADに設定する処理を追加しましょう。これにはCalendarのSelectionChangedイベントを使用します。次のコードをWebフォームのソースコード「Default.aspx.vb」に追加します。

Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, _
      ByVal e As System.EventArgs) Handles Calendar1.SelectionChanged

    ' カレンダーの日付を取得
    Dim dval As DateTime = Calendar1.SelectedDate

    ' セルに日付を設定
    With FpSpread1.Sheets(0)
        .SetValue(.ActiveRow, .ActiveColumn, _
                  dval.ToString("yyyy/MM/dd"))
    End With
    ' カレンダーを非表示
    Calendar1.Visible = False

End Sub

protected override void OnInit(EventArgs e)
{
    base.OnInit(e);
    // イベントの登録
    FpSpread1.ButtonCommand
      += new FarPoint.Web.Spread.SpreadCommandEventHandler(
           FpSpread1_ButtonCommand);
    Calendar1.SelectionChanged+=new EventHandler(
           Calendar1_SelectionChanged);
}

protected void Calendar1_SelectionChanged(object sender, 
                                          System.EventArgs e)
{

    // カレンダーの日付を取得
    DateTime dval = Calendar1.SelectedDate;

    // セルに日付を設定
    {
        FarPoint.Web.Spread.SheetView sh = FpSpread1.Sheets[0];
        sh.SetValue(sh.ActiveRow, sh.ActiveColumn, 
                    dval.ToString("yyyy/MM/dd"));
    }
    // カレンダーを非表示
    Calendar1.Visible = false;

}

注意

　OnInitメソッドは既に記述されたものがある場合、イベントの登録部分のみを追記してください。

2．テスト

　Webサイトを実行してみましょう。カレンダーのアイコンをクリックして日付を選択します。選択した日付がセルに設定されます。

その他

　ここまででポップアップカレンダーの主要な機能を実装しました。しかし、まだ問題が残っています。

問題　ポップアップカレンダーがSPREADから大きく外れた位置に表示される（クリックしたセルの上に表示されないと困る）。

　これからこの問題に対処していきます。

1．Calendarをクリックした位置に表示する

　イメージ型セル「MyCal」を作成した際、クリックイベントをクライアント側でも処理できるようJavaScriptでclickedCalCellメソッドを追加しました。このメソッドを使用します。

　clickedCalCellメソッドではevent引数からクリック位置を取得できます。Calendarをこの位置に表示すれば問題を解決できます。まず、Calendarを指定した位置（絶対位置）に表示できるよう、CalendarのStyleプロパティを次のように変更します。Webフォーム「Default.aspx」のHTMLソースを開いて直接HTMLを編集します。

変更前　Styleプロパティが存在しない場合は、新しく追加します。

<asp:Calendar ID="Calendar1" runat="server" 
     Visible="False" Style="position: static">

変更後

<asp:Calendar ID="Calendar1" runat="server" 
     Visible="False" 
     Style="position: absolute; z-index:10000;background-color:White">

　そして、JavaScriptにopenCalメソッドを追加します。

<script type="text/javascript">
  var x; var y;
  function clickedCalCell(e) {      
    //セルのクリック位置を保存
    var e=e||window.event;   
    x=e.clientX;
    y=e.clientY;
    //ポストバックデータの更新
    var s=document.getElementById("FpSpread1");
    s.UpdatePostbackData();                  
  }          
  function openCal(){
    //カレンダーの表示位置を設定
    var cp = document.getElementById("Calendar1");
    cp.style.left=x+"px";
    cp.style.top=y+"px";      
  }           
</script>

　ButtonCommandイベントでカレンダーを表示した直後、このopenCalメソッドを実行してカレンダーを正しい位置に表示します。

　これにはASP.NET AJAXのScriptManager.RegisterStartupScriptメソッドを使用します。次のスクリプトをWebフォームのソースコード「Default.aspx.vb」のButtonCommandイベントに追加します。

' カレンダーを正しい位置に表示する
ScriptManager.RegisterStartupScript(Me, Me.GetType(), _
                               "onStartUpScript", "openCal();", True)

// カレンダーを正しい位置に表示する
ScriptManager.RegisterStartupScript(this, this.GetType(), _
                               "onStartUpScript", "openCal();", true);

　この処理を追加したButtonCommandイベントの全文は次のようになります。

Protected Sub FpSpread1_ButtonCommand(ByVal sender As Object, _
        ByVal e As FarPoint.Web.Spread.SpreadCommandEventArgs) _
            Handles FpSpread1.ButtonCommand

    If e.CommandName = "dateclick" Then

        If Not Calendar1.Visible Then
            ' カレンダーに日付を設定する
            With FpSpread1.Sheets(0)
                If .GetValue(.ActiveRow, .ActiveColumn) _
                                                   IsNot Nothing Then
                    Calendar1.SelectedDate = _
                       .GetValue(.ActiveRow, .ActiveColumn)
                End If
            End With
            ' カレンダーを正しい位置に表示する
            ScriptManager.RegisterStartupScript(Me, Me.GetType(), _
                               "onStartUpScript", "openCal();", True)
        End If
        ' カレンダーの表示を切り替える
        Calendar1.Visible = Not Calendar1.Visible

    End If
End Sub

protected void FpSpread1_ButtonCommand(object sender,
                        FarPoint.Web.Spread.SpreadCommandEventArgs e)
{
    if (e.CommandName == "dateclick")
    {
        if (!Calendar1.Visible)
        {
            // カレンダーに日付を設定する
            FarPoint.Web.Spread.SheetView sh = FpSpread1.Sheets[0];
            if (sh.GetValue(sh.ActiveRow, sh.ActiveColumn) != null)
            {
                Calendar1.SelectedDate
                       = Convert.ToDateTime(sh.GetValue(
                                     sh.ActiveRow, sh.ActiveColumn));
            }
            // カレンダーを正しい位置に表示する
            ScriptManager.RegisterStartupScript(this, 
                                                this.GetType(), 
                                                "onStartUpScript", 
                                                "openCal();", true);
        }
        // カレンダーの表示を切り替える
        Calendar1.Visible = !Calendar1.Visible;
    }
}

　また、この処理はユーザーがカレンダーの次の月をクリックした時にも必要です。CalendarのVisibleMonthChangedイベントにも同じ処理を追加します。次のコードをWebフォームのソースコード「Default.aspx.vb」に追加します。

Protected Sub Calendar1_VisibleMonthChanged(ByVal sender As Object, _
    ByVal e As System.Web.UI.WebControls.MonthChangedEventArgs) _
      Handles Calendar1.VisibleMonthChanged
    ' カレンダーを正しい位置に表示する
    ScriptManager.RegisterStartupScript(Me, Me.GetType(), _
       "onStartUpScript", "openCal();", True)
End Sub

C#　OnInitメソッドは既に記述されたものがある場合、イベントの登録部分のみを追記してください。

protected override void OnInit(EventArgs e)
{
    base.OnInit(e);
    // イベントの登録
    FpSpread1.ButtonCommand 
      += new FarPoint.Web.Spread.SpreadCommandEventHandler(
           FpSpread1_ButtonCommand);
    Calendar1.SelectionChanged
      += new EventHandler(Calendar1_SelectionChanged);
    Calendar1.VisibleMonthChanged
      += new MonthChangedEventHandler(Calendar1_VisibleMonthChanged);
}

protected void Calendar1_VisibleMonthChanged(object sender, 
                                             MonthChangedEventArgs e)
{
    // カレンダーを正しい位置に表示する
    ScriptManager.RegisterStartupScript(this, 
                                        this.GetType(), 
                                        "onStartUpScript", 
                                        "openCal();", 
                                        true);
}

2．テスト

　Webサイトを実行してみましょう。日付をクリックした時、カレンダーはクリックした位置に表示されます。また次の月へ移動した場合も、カレンダーは正しい位置に表示されます。

3．完成

　これでサンプルアプリケーションは完成です。もしマシンにFirefoxがインストールされていれば、FirefoxでWebサイトを実行してみてください。WebサイトがIEと同様にFirefoxでも動作することを確認できます。

最後に

　このようにASP.NET AJAXとSPREADを使用することで、SPREADとSPREAD以外のコントロールとを連携したより広範な処理にAJAXを活用することができます。

　ASP.NET AJAX、およびSPREAD AJAXのそれぞれが適所で活用され、今までにないレベルの対話性、レスポンスを実現したWebアプリケーションを作ることで、ユーザビリティの高いWebサービスを提供できるのではないでしょうか。

この記事は参考になりましたか？

印刷用を表示

現役エンジニア直伝！「現場」で使えるコンポーネント活用術（SPREAD）連載記事一覧: 2022年版実践WPF業務アプリケーションのアーキテクチャ【設計編／後編】～ドメイン駆動...

2022年版実践WPF業務アプリケーションのアーキテクチャ【設計編／中編】～ドメイン駆動...

2022年版実践WPF業務アプリケーションのアーキテクチャ【設計編／前編】～ドメイン駆動...

もっと読む

この記事の著者: グレープシティ株式会社（グレープシティカブシキガイシャ）

　宮城県仙台市に本社を構えるグレープシティでは、日本の業務に適したシステムをより早く開発するためのソフトウェアを提供しています。エンドユーザーの利用しやすさ、幅広いユーザー環境への対応、そして何よりプログラマの作業を軽減することを一番に目指しています。公式サイト

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事