Share via

方法 : Visual Studio でテンプレート コントロールにデータをバインドする

  • [アーティクル]

更新 : 2007 年 11 月

GridView、DetailsView、FormView、ListView、DataList、Repeater などのコントロールは、LinqDataSource、ObjectDataSource、SqlDataSource などのデータ ソース コントロールに関連付けることができます。また、コントロールのテンプレートを使用すると (ListView、DataList、Repeater、および FormView の各コントロールではテンプレートが必要)、デザイナでカスタム ユーザー インターフェイス (UI: User Interface) を使用して、データの表示形式をカスタマイズできます。

このトピックでは、TextBox コントロールなどの UI コントロールをテンプレートに追加し、次にコントロールを特定のデータにバインドする処理について説明します。

テンプレート コントロールをデータ ソースにバインドするには

  1. ページ上で SqlDataSource コントロールなどの有効なデータ ソースを指定し、ID プロパティ値を確認します。

    次に例を示します。

    <asp:SqlDataSource ID="SqlDataSource1" Runat="server" 
  SelectCommand="SELECT CustomerID, CompanyName FROM Customers"
  ConnectionString="<%$ 
    ConnectionStrings:NorthwindConnectionString %>">
</asp:SqlDataSource>

    データベースに対する SqlDataSource コントロールの使用方法の詳細については、「SqlDataSource Web サーバー コントロールの概要」を参照してください。

  2. ツールボックスの [データ] グループから、DataList コントロールをページにドラッグします。

    [DataList タスク] ショートカット メニューが表示されます。

    • [DataList タスク] ショートカット メニューが表示されない場合は、DataList コントロールを右クリックし、[スマート タグの表示] をクリックします。

  3. [データ ソースの選択] の一覧で、手順 1. で作成した SqlDataSource コントロールをクリックします。

    ページが表示されると、このコントロールにクエリのすべての列とデータが何もカスタマイズされない形で表示されます。対象のデータに応じて、DataList コントロールに既定のバインドされたフィールドが表示されます (以下のコード例を参照)。

    <asp:DataList ID="DataList1" runat="server" 
    DataKeyField="CustomerID" 
    DataSourceID="SqlDataSource1">
  <ItemTemplate>
    CustomerID:
    <asp:Label ID="CustomerIDLabel" runat="server" 
        Text='<%# Eval("CustomerID") %>'>
    </asp:Label><br />
    CompanyName:
    <asp:Label ID="CompanyNameLabel" runat="server" 
        Text='<%# Eval("CompanyName") %>'>
    </asp:Label><br />
    <br />
  </ItemTemplate>
</asp:DataList>

コントロールのテンプレートを編集するには

  1. デザイン ビューで、DataList コントロールを右クリックし、[スマート タグの表示] をクリックします。

  2. [DataList タスク] メニューの [テンプレートの編集] をクリックします。

    デザイナでテンプレートを編集する準備ができました。他のコントロールをテンプレートにドラッグして、後でバインドできます。

  3. [表示] の一覧の [AlternatingItemTemplate] をクリックします。それぞれのコントロールは別々のテンプレートをサポートします。

  4. AlternatingItemTemplate デザイン領域に「CustomerID:」と入力し、次にツールボックスの [標準] グループから T:System.Web.UI.WebControls.Label コントロールを DataList コントロールにドラッグします。

  5. [Label タスク] メニューの [DataBindings の編集] をクリックします。

  6. [LabelName DataBindings] ダイアログ ボックスで、[バインド可能プロパティ] の [テキスト] をクリックします。

  7. [Text のバインド] の下の [バインドするフィールド] ボックスの一覧の [CustomerID] をクリックします。

  8. CompanyName について、手順 4. ～ 7. を繰り返します。

  9. [AlternatingItemTemplate] デザイン領域で、すべての内容を選択し、次に Ctrl キーを押しながら B キーを押してテキストを太字に変更します。

  10. DataList コントロールを右クリックし、[スマート タグの表示] をクリックします。

  11. [テンプレート編集の終了] をクリックして、テンプレート編集モードを終了します。

    ページをブラウザで表示すると、企業名の一覧が表示され、プレーンテキストと太字のテキストが交互に配置されています。

参照

処理手順

チュートリアル : Web ページでの基本的なデータ アクセス

概念

データ ソース コントロールの概要

SqlDataSource Web サーバー コントロールの概要