ASP.NET Core MVC コントロールヘルプ
クイックスタート
コントロールの使用 > CollectionView > クイックスタート

このセクションでは、MVC WebアプリケーションでCollectionViewをFlexGridコントロールと一緒に使用する方法を説明します。

このトピックは4つの手順で構成されます。

次の図は、上記の手順を実行した後のFlexGridを示しています。

Component One MVC CollectionView Quick Start

手順1：MVC アプリケーションの作成

ComponentOneまたはVisualStudioテンプレートを使用して新しいMVCアプリケーションを作成します。MVCアプリケーションの作成の詳細については、「MVCアプリケーションの設定」を参照してください。

手順2：アプリケーションのデータソースを設定

例では、C1NWindデータベースを使用します。C1NWind.mdfファイルは、システムのC:\Users\<username>\Documents\ComponentOne Samples\ASP.NET MVC\MVC\MvcExplorer\App_Data に用意されています。

  1. C1NWind.mdfファイルをソリューションエクスプローラーのAppDataフォルダに追加します。
  2. ソリューションエクスプローラーで右クリックして［モデル］→［新しい項目の追加］→［データ］を選択し、ADO.NET Entity Data Modelを選択します。
  3. モデルにC1NWindと名前を付け、［追加］をクリックします。
  4. エンティティデータモデルウィザードで、データベースからEF Designerを選択し、［次へ］をクリックします。
  5. C1NWind.mdfデータベースがデータ接続ドロップダウンに追加されます。
  6. ［次へ］をクリックし、Entity Frameworkのバージョンを選択し、［次へ］をクリックします。
  7. ［データベースオブジェクトと設定を選択］で、テーブルを選択し、［完了］をクリックします。

プロジェクトの［モデル］フォルダの下にC1NWind.edmxが追加されていれば、アプリケーションに対するデータソースの設定は成功です。

先頭に戻る

手順3：FlexGridコントロールの追加

FlexGridコントロールを初期化するには、次の手順を実行します。

新しいコントローラーの追加

  1. ソリューションエクスプローラーで、［コントローラー］フォルダを右クリックします。
  2. コンテキストメニューから、［追加］→［コントローラー］を選択します。［コントローラーの追加］ダイアログが表示されます。
  3. ［コントローラーの追加］ダイアログで、次の手順を実行します。
    1. コントローラーの名前を設定します（例：QuickStartController）。
    2. ［MVC 5 コントローラー -空］テンプレートを選択します。
    3. ［追加］をクリックします。
  4. 次に示すようにMVC参照を追加します。
    C#
    コードのコピー 
    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using C1.Web.Mvc.Grid;
using C1.Web.Mvc;
using C1.Web.Mvc.Serializition;
using System.Data.Entity.Validation;
using System.Data.Entity;
using System.Data;
using MVC_DataBinding.Models;
  5. メソッドIndex()を次のメソッドに置き換えます。

    IndexController.cs

    C#
    コードのコピー 
    //FlexGrid に対してデータソースを定義します
private C1NWindEntities db = new C1NWindEntities();
public ActionResult Index()
{
    return View();
}
//JSONのインスタンスを作成します
public ActionResult GridReadCategory([C1JsonRequest] CollectionViewRequest<Categories> requestData)
{
    return this.C1Json(CollectionViewHelper.Read(requestData, db.Categories));
}

コントローラーのビューの追加

  1. ソリューションエクスプローラーで、［コントローラー］フォルダを展開し、コントローラー（例：Default1Controller）をダブルクリックして開きます。
  2. メソッドIndex()内にカーソルを置きます。
  3. 右クリックし、［ビューの追加］を選択します。［ビューの追加］ダイアログが表示されます。
  4. ［ビューの追加］ダイアログで、ビュー名がIndex、ビューエンジンがRazor (CSHTML)であることを確認します。
  5. ［追加］をクリックします。コントローラーにビューが追加されました。
  6. ソリューションエクスプローラーで、Index.cshtmlをダブルクリックして開きます。
  7. Views\Index.cshtmlファイルのデフォルトコードを次のコードに置き換えて、FlexGridコントロールを初期化します。

    この例では、コントローラーのGridReadCategoryアクションはFlexGridのItemSourceのBindプロパティに割り当てられ、データを挿入します。

    HTML
    コードのコピー 
    <c1-flex-grid id="fGRCView" auto-generate-columns="false" allow-add-new="true"
        allow-sorting="true" class="grid">
<c1-items-source read-action-url="@Url.Action("GridReadCategory")"></c1-items-source>
<c1-flex-grid-column binding="CategoryID"></c1-flex-grid-column>
<c1-flex-grid-column binding="CompanyName"></c1-flex-grid-column>
<c1-flex-grid-column binding="Description"></c1-flex-grid-column>
</c1-flex-grid>

手順4：プロジェクトのビルドおよび実行

  1. ［ビルド］→［ソリューションのビルド］をクリックして、プロジェクトをビルドします。
  2. ［F5］キーを押してプロジェクトを実行します。

先頭に戻る

 

 

Copyright © MESCIUS, Inc. All rights reserved.