はじめに新規にWeb サイトを作成し、ページにSPREADを追加します。

1. Visual Studio の [ファイル] メニューから[新しい Web サイト] をクリックします。
2. 右メニューの［テンプレート］から言語を選択し、中央ペインで 「ASP.NET 空の Web サイト」 を選択します。 [Web の場所] 欄では、ドロップダウン リストで「ファイルシステム」が選択されていることを確認した後、パスとして「C:\databind」と入力し、〈OK〉をクリックします。新しいWebサイトが生成されます。

   

3. ソリューションエクスプローラーから「databind」を右クリックし、［追加］-［Webフォーム］を選択します。
4. ［項目の名前を指定］のダイアログで「Default」まま〈OK〉ボタンをクリックし、ページを追加します。
5. ツールボックスからFpSpread コントロール（FpSpread1）をページにドラッグします。「コントロールのプロジェクトへの追加」を参照してください。

標準のSqlDataSource コントロールを使用して、データベースを設定します。SqlDataSource コントロールの詳細については、MSDNの「SqlDataSource クラス」を参照してください。

1. FpSpread コントロールのスマートタグの［データソースの選択］ドロップダウンから「＜新しいデータ ソース...＞」を選択します。
2. ［データ ソース構成ウィザード］で［アプリケーションがデータを取得する場所］から「データベース」を選択します。データ ソースIDに「SqlDataSource1」が付与されるので、そのまま〈OK〉ボタンをクリックします。

   

3. ［データ接続の選択］で〈新しい接続〉をクリックします。
4. ［接続の追加］ダイアログの［データベース ファイル名］で〈参照〉ボタンをクリックし、databind.mdbファイルを選択します。
5. 必要に応じて、ユーザー名やパスワードを設定し、〈テスト接続〉ボタンのクリックにより接続が成功したら〈OK〉ボタンをクリックします。

   

6. ［アプリケーションがデータベースへの接続に使用するデータ接続］のドロップダウンから、追加した接続を選択し〈次へ〉ボタンをクリックします。
7. ［Select ステートメントの構成］で、SPREAD コントロールに表示するレコードを設定します。Product テーブルから、以下のフィールドを選択します。
   • ID
   • ProductsName
   • Production
   • Price

   

8. 〈詳細設定〉 ボタンクリックすると「SQL 生成の詳細オプション」ダイアログボックスが表示されるので、「INSERT、UPDATE、〜」の項目をチェックし、〈OK〉をクリックします。

   

9. 〈次へ〉ボタンをクリックします。〈クエリのテスト〉ボタンでテストを行い、データがプレビュー表示されることを確認したら〈完了〉ボタンをクリックします。

以上で、SPREADとデータベースの接続は完了です。プロジェクトを実行すると、次のような画面が表示されることを確認してください。

なお、デザイン画面のスマートタグを使用しない場合、コードでは次のように接続します。

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack) return;
    FpSpread1.DataSourceID = "SqlDataSource1";
}

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If IsPostBack Then Return
    FpSpread1.DataSourceID = "SqlDataSource1"
End Sub

データベースと接続した場合も、任意の列を非表示にしたり、セル型を変更するなどのカスタマイズが可能です。次のコードでは、ID列を非表示にし、Price列のセル型を通貨型セルに変更します。

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack) return;

    // データベースに接続します。
    FpSpread1.DataSourceID = "SqlDataSource1";

    // Price列のセル型を通貨型セルに変更します。
    FarPoint.Web.Spread.StyleInfo style = new FarPoint.Web.Spread.StyleInfo();
    FarPoint.Web.Spread.CurrencyCellType curPrice = new FarPoint.Web.Spread.CurrencyCellType();
    style.CellType = curPrice;
    style.HorizontalAlign = HorizontalAlign.Right;
    style.VerticalAlign = VerticalAlign.Middle;
    FpSpread1.ActiveSheetView.SetStyleInfo(-1, 3, style);

    // ID列を非表示にします。
    FpSpread1.Columns[0].Visible = false;
}

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If IsPostBack Then Return
        
        ' データベースに接続します。
    FpSpread1.DataSourceID = "SqlDataSource1"
        
        '  Price列のセル型を通貨型セルに変更します。
        Dim style As New FarPoint.Web.Spread.StyleInfo()
    Dim curPrice As New FarPoint.Web.Spread.CurrencyCellType()
    style.CellType = curPrice
    style.HorizontalAlign = HorizontalAlign.Right
    style.VerticalAlign = VerticalAlign.Middle
    FpSpread1.ActiveSheetView.SetStyleInfo(-1, 3, style)
        
        ' ID列を非表示にします。
    FpSpread1.ActiveSheetView.Columns(0).Visible = False        
End Sub

Web サイトを実行すると次のように表示されます。