使ってみようASP.NET AJAX Control Toolkit（入力補助コントロール編）

ASP.NET AJAX Control Toolkitの利用方法を学習する 前編

ReorderList・SliderExtender

ReorderListコントロール

　ReorderListコントロールはリスト内の要素がドラッグ＆ドロップによって整理し直すことが可能なリストコントロールで、ドラッグによりリスト内の位置を変更し、ドロップをされた段階でデータソースを更新するという特徴があります。ReorderListはポストバックを利用するかコールバックを利用することで、リストの再整理を行うことができます。

　コールバックを利用して再整理を行う場合、ポストバックは起こりません。データのみの整理であるならば役立ちます。もし、データ項目の追加、編集、削除が必要ならクライアントサイドとサーバサイドのデータを同期させるためにポストバックを起こす必要があります。

　必要に応じて必要なテンプレート、必要な整理方法を選択する必要があるコントロールです。また、ReorderListコントロールはプロパティ設定の他に6種類のテンプレートの設定も必要になります（すべてが必須ではありません）。

表5

プロパティ名	概要
PostBackOnReorder	再整理がポストバックかコールバックを開始するかを設定。編集やデータに結びついたリストの機能を削除するためにポストバックはenabledに設定する必要あり
DataSourceID	ReorderListコントロールで使用するDataSourceIDを設定
DragHandleAlignment	ユーザーがリスト内の項目をドラッグするためのドラッグハンドルの表示位置を設定
ItemInsertLocation	新しいアイテムがリストに追加された時、BeginningかEndであるか設定
DataKeyField	データのための第一キーフィールドを設定
SortOrderField	アイテムのソート順を表すフィールドを設定
ItemTemplate	リストアイテムのために表示するテンプレート
EditItemTemplate	編集モードにある列のために表示するテンプレート
ReorderTemplate	アイテムをドラッグしている時に表示するテンプレート
InsertItemTemplate	新しいアイテムをリストに加えるために表示するテンプレート
DragHandleTemplate	ユーザーがアイテムを再整理するためにドラッグするドラッグハンドルのテンプレート
EmptyListTemplate	リストにデータがない時に表示するテンプレート

　ReorderListコントロールは今回ご紹介するコントロールの中では利用する上で難易度が高いコントロールです。他のコントロールに比べて書くコードの量が増えてしまうことはご理解ください。なお、サンプルファイルを読むと理解が深まると思いますので、ぜひ参照ください。

　ここではSQL Serverとデータセットを利用してリストを表示し、データアクセスコンポーネントを拡張することで再整理、行の追加を行う方法を紹介します（ダウンロードサンプルのファイルは「/ReorderList/ReorderList.aspx」です）。最初はdefault.aspxの一部です。

default.aspx（一部）

<ajaxToolkit:ReorderList 
    ID="ReorderList1" 
    runat="server"
    DataKeyField="ViewID" 
    DataSourceID="ObjectDataSource1"
    SortOrderField="ReorderID" 
    AllowReorder="True" 
    PostBackOnReorder="False" >
  <ItemTemplate>
    <div class="ItemBlock">
      <asp:Label ID="Label1" runat="server" 
          Text=
          '<%# HttpUtility.HtmlEncode(Convert.ToString(Eval(
                                                  "Chores"))) %>' >
      </asp:Label>
      <asp:Label ID="Label2" runat="server" 
          Text=
          '<%# HttpUtility.HtmlEncode(Convert.ToString(Eval(
                                       "Progress", " - {0}"))) %>' >
      </asp:Label>
    </div>
  </ItemTemplate>
  <ReorderTemplate>
    <asp:Panel ID="Panel2" runat="server" CssClass="reorderList" />
  </ReorderTemplate>
  <DragHandleTemplate>
    <div class="dragHandle"></div>
  </DragHandleTemplate>
  <InsertItemTemplate>
    <div class="InsertBlock">
      <asp:TextBox ID="TextBox1" Text='<%# Bind("Chores") %>'  
          runat="server" ValidationGroup="add">
      </asp:TextBox>
      <asp:RequiredFieldValidator ID="RequiredFieldValidator1" 
          runat="server" ValidationGroup="add"
          ErrorMessage="家事項目を入力してください" 
          ControlToValidate="TextBox1" />
      <br />
      <asp:TextBox ID="TextBox2" Text='<%# Bind("Progress") %>'  
          runat="server" ValidationGroup="add">
      </asp:TextBox>
      <asp:RequiredFieldValidator ID="RequiredFieldValidator2" 
          runat="server" ValidationGroup="add"
          ErrorMessage="進捗を入力してください" 
          ControlToValidate="TextBox2" />
      <asp:Button ID="Button1" runat="server" Text="追加" 
          CommandName="Insert" ValidationGroup="add" />
    </div>
  </InsertItemTemplate>
</ajaxToolkit:ReorderList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
    DeleteMethod="Delete"
    InsertMethod="insertNewRow" 
    OldValuesParameterFormatString="original_{0}" 
    SelectMethod="GetData"
    TypeName="ChoresTableAdapters.TodoTableTableAdapter" 
    UpdateMethod="updatePriority">
  <DeleteParameters>
    <asp:Parameter Name="Original_ViewID" Type="String" />
  </DeleteParameters>
  <UpdateParameters>
    <asp:Parameter Name="Chores" Type="String" />
    <asp:Parameter Name="Progress" Type="String" />
    <asp:Parameter Name="reorderID" Type="Int32" />
    <asp:Parameter Name="Original_ViewID" Type="Int32" />
  </UpdateParameters>
  <InsertParameters>
    <asp:Parameter Name="Chores" Type="String" />
    <asp:Parameter Name="Progress" Type="String" />
    <asp:Parameter Name="reorderID" Type="Int32" />
  </InsertParameters>
</asp:ObjectDataSource>

　続いてデータアクセスコンポーネントの拡張です。

Chores.vb

Imports Microsoft.VisualBasic
Imports System.Data
Imports System.Data.SqlClient
Imports System.ComponentModel

Namespace ChoresTableAdapters

  Partial Public Class TodoTableTableAdapter

    <DataObjectMethod(DataObjectMethodType.Update)> _
        Public Sub updatePriority(ByVal chores As String, _
                                  ByVal progress As String, _
                                  ByVal reorderID As Int32, _
                                  ByVal Original_ViewID As Int32)
    '必要な処理を記述
    End Sub

   'TextBoxコントロールに入力された値をchores,progressとして
   '新しい行を作成しTodoTableに追加する
   <DataObjectMethod(DataObjectMethodType.Insert)> _
       Public Sub insertNewRow(ByVal chores As String, _
                               ByVal progress As String, _
                               ByVal reorderID As Int32)

         Dim todoTA As New ChoresTableAdapters.TodoTableTableAdapter
         Dim TodoDS As New Chores

         todoTA.Fill(TodoDS.TodoTable)

         Dim dr As DataRow = TodoDS.Tables("TodoTable").NewRow

         dr("chores") = chores
         dr("progress") = progress
         dr("reorderID") = reorderID

         TodoDS.Tables("TodoTable").Rows.Add(dr)

         todoTA.Update(TodoDS)

      End Sub

  End Class

End Namespace

　サンプルを実行すると図6～10のようになります。

図6 ReorderListコントロールの実行結果

図7 Itemのドラッグ時

図8 Itemのドロップ時

図9 新たな行の追加

図10 追加ボタンクリック時

　今回は使用していませんが、ReorderListは他にもEditItemTempleteやEmptyListTemplateがありますので、記事を参考にして触れてみてください。

SliderExtenderコントロール

　SliderExtenderコントロールはTextBoxコントロールをスクロールバー型のスライダーに変えるエクステンダコントロールで、マウスカーソルを利用してスライダーの機能を利用することが可能になります。デフォルトでMinimumが0、Maximumが100、Stepsが1に設定されています。

表6

プロパティ名	概要
Minimum	スライダーの最小の値を設定
Maximum	スライダーの最大の値を設定
Decimals	小数点以下の桁数を設定
Steps	どの単位でスライドするかの値を設定
EnableHandleAnimation	スライドをアニメーションを使って移動させるかどうか設定
RailCSSClass	スライドのレールのCSSクラスを設定
HandleCSSClass	スライドのハンドルのCSSクラスを設定
HandleImageURL	スライドのハンドルのImageURLの設定
Length	スライドの長さを設定
BoundControlID	ダイナミックにスライドの値を表示するボタンかラベルを設定
TargetControlID	スライダーに拡張させる「TextBoxコントロール」のIDを設定

　スライダーの初期値を100に、最小値を-100、最大値を100と設定し、Labelコントロールにスライダーの値を表示させるには次のように設定することで実現できます。

default.aspx（一部）

<asp:TextBox ID="TextBox1" runat="server" text="100"></asp:TextBox>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
<ajaxToolkit:SliderExtender 
    ID="SliderExtender1" 
    runat="server" 
    BehaviorID="TextBox1" 
    TargetControlID="TextBox1" 
    Minimum="-100" 
    Maximum="100" 
    BoundControlID="Label1" 
    Steps="100" />

　サンプルを実行すると図11～12のようになります（ダウンロードサンプルのファイルは「/SliderExtender/SliderExtender.aspx」です）。

図11 SliderExtenderコントロールの実行結果

図12 SliderExtenderコントロールの動作結果