Ignite UI

バージョン

コントロールを MVC プロジェクトに追加

トピックの概要

このトピックでは、ASP.NET MVC アプリケーションで Ignite UI™ コンポーネントを使用した作業の開始方法を説明します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

MVC ヘルパーの使用方法

モバイル MVC ヘルパーの使用方法の概要

Ignite UI の ASP.NET MVC ヘルパーは、既存のクライアント専用コントロールを MVC 拡張機能のサーバー側セットにラップします。これによって、次のようにしてコントロールを定義および使用できるようになります。

ASPX の場合:

<%= Html.Infragistics().CONTROL_NAME()  %>

または

ASPX の場合:

<%= Html.Infragistics().CONTROL_NAME(Model)  %>

すべてのコントロールは、Infragistics() または InfragisticsMobile() 拡張メソッドのヘルパー メソッドを使用でき、intellisense を使用して見ることができます。

ASPX の場合:

<%= Html.Infragistics().Grid("grid1", Model.GridFiltering)%>

インストールしたリソースへ移動

Ignite UI 2016.2 のインストール時に一般的なフォルダー構成を選択した場合、各リソースは次のパスに置かれています。

タイプ パス
アセンブリ C:\Program Files (x86)\Infragistics\2016.2\Ignite UI\MVC
スクリプト ファイル C:\Program Files (x86)\Infragistics\2016.2\Ignite UI\js
CSS ファイル C:\Program Files (x86)\Infragistics\2016.2\Ignite UI\css

MVC 2、MVC 3、MVC 4、MVC 5、および MVC 6

MVC ヘルパーのすべてのコードは、Infragistics.Web.Mvc アセンブリに含まれています。これは、MVC2、MVC3、MVC4、MVC5、および MVC6 の両方に対してコンパイル済みです。ASP.NET MVC ヘルパーのアセンブリの場所の詳細は、「Ignite UI で JavaScript リソースを使用」を参照してください。

: dll の参照の Copy Local プロパティを true に設定する必要があります。

ローダーの MVC ヘルパーを使用

インフラジスティックス ローダーを使用してページに必要な依存スクリプトおよびスタイル ファイルをロードします。ローダーの使い方の詳細は、「Ignite UI で JavaScript リソースを使用」を参照してください。

以下のコードは、ASP.NET MVC ヘルパーを使用してローダーを初期化する方法を示します。

ASPX の場合:

  <script src="{IG Resources root}/js/infragistics.loader.js"></script>
    <%= Html.Infragistics()
        .Loader()
        .ScriptPath("{IG Resources root}/js/")
        .CssPath("{IG Resources root}/css/")
        .Render()
    %>

JavaScript ファイルは、Infragistics CDN 上のホスト環境でも使用可能です。CDN を使用すると非常に多くのメリットがあります。詳細は、ヘルプ トピック「インフラジスティックス コンテンツ配信ネットワーク (CDN)」を参照してください。

ASPX の場合:

<script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.loader.js"></script>

ASPX の場合:

<%= Html.Infragistics().Loader()
    .ScriptPath(“http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/”)
    .CssPath(“http://cdn-na.infragistics.com/igniteui/2016.2/latest/css/”)
    .Render() %>

Render() メソッドの呼び出し

ASP.NET MVC ヘルパーでコントロールをインスタンス化する場合、他のオプションをすべて構成し終わった後、最後に Render メソッドを呼び出します。これは、クライアントでコントロールをインスタンス化するのに必要な HTML および JavaScript を描画するメソッドです。

MVC プロジェクトで Ignite UI コントロールを定義するメソッド

コントロールを構成するメソッドの概要

MVC アプリケーションでコントロールを定義するための 2 つの異なるオプションがあります。以下の表は、コントロールを Model で定義するか View で定義するかに応じて Ignite UI コントロールの定義に使用できる方法を示します。詳細は、概要表の後に記載されています。

メソッド 説明
Model でのコントロールの定義 Model クラスを構成し、グリッド拡張メソッドの引数として渡すことでコントロールを定義します。
View でのコントロールの定義 チェーン構文を使用して View でコントロールを定義します。

View でのコントロールの構成

チェーン構文を使用しコントロールを初期化すると、すべての作成および構成のロジックがビューに移動します。これによって、コントローラー コードが非常に簡潔で明快になります。ビューにコントロールを定義するには、呼び出したものと同じオブジェクトを常に返すヘルパー メソッドを介して、必要なプロパティとメソッドを公開します。

以下のコードは、チェーン構文を使用してigTree コントロールを初期化する方法を示します。

ASPX の場合:

<%= Html.
        Infragistics().
        Tree().
        ID("MVCBoundTree").
        Bindings( bindings => {
            bindings.
            TextKey("Text").
            ValueKey("Value").
            ChildDataProperty("Child").
            Bindings( b1 => {
                b1.
                TextKey("Text").
                ValueKey("Value").
                ImageUrlKey("ImageUrl").
                NavigateUrlKey("NavigateUrl").
                TargetKey("Target");
            });
        }).
        DataSource(Model).
        DataBind().
        Render()  
    %>

複雑なオブジェクトでは、ラムダ式を使用して構文を得ます。以下にリストするコードは、ラムダ式を使用して ColumnLayouts を構成する方法を示します。

ASPX の場合:

.ColumnLayouts(layouts =>
    {
        layouts.For(x => x.CustomerAddresses)
        .PrimaryKey("AddressID")
        .ForeignKey("CustomerID")
        .AutoGenerateColumns(false)
        .Columns(childcols1 =>
            {
                childcols1.For(x => x.AddressTypeID).HeaderText("AddressTypeID");
                childcols1.For(x => x.AddressID).HeaderText("AddressID");
                childcols1.For(x => x.CustomerID).HeaderText("CustomerID");
            })
    })

Model でのコントロールの構成

モデル クラスを使用する場合、コントローラーに依存してコントロールを構成します。これは、要求の後に、コントロールのいくつかの設定やプロパティを取得する場合に便利です。これらは、チェーン構文を使用してすべてを View 内で構成した場合には使用できません。

: モデル クラスは、ビューにデータを返すために使用できるヘルパーとして存在します。これは、コントローラーの特定の機能に必要なわけではありませんが、複雑なリモート操作のコーディングを簡素化します。

C# の場合:

[ActionName("Filtering")]
public ActionResult GridFiltering()
{
   GridFilteringModel model = new GridFilteringModel();
   model.GridFiltering.DataSourceUrl = Url.Action("BindGridFiltering");
   this.InitializeSortingGridOptions(model.GridFiltering);
   return View(model);
}

private void InitializeSortingGridOptions(GridModel model)
{
   model.Height = "500px";
   model.Columns.Add(new GridColumn("Product ID", "ProductID", "number", "100px"));
   model.Columns.Add(new GridColumn("Product Name", "Name", "string", "300px"));
   model.Columns.Add(new GridColumn("Product Number", "ProductNumber",        "string", "205px"));
   model.Columns.Add(new GridColumn("Standard Cost", "StandardCost", "number", "110px"));
   GridFiltering filtering = new GridFiltering();
   model.Features.Add(filtering);
}

igTree を使用した ASP.NET MVC アプリケーションの開発

概要

以下の手順では、ASP.NET MVC で Ignite UI を使用して作業するために必要なアセンブリおよびリソース (CSS および JavaScript ファイル) を追加する方法を示します。

要件

この手順を実行するには、以下が必要です。

  • Web アプリケーションが含まれるプロジェクト
  • Ignite UI 2016.2 がインストール済み
  • jQuery コア ライブラリ バージョン 1.4.4 またはそれ以降
  • jQuery UI ライブラリ 1.8.17 以降
  • Modernizr オープン ソース JavaScript ライブラリ 2.5.2 以降

概要

このトピックでは、 igTree コントロールを使用した ASP.NET MVC アプリケーションの作成について順を追って説明します。以下はプロセスの概念的概要です。

  1. チェーンを使用した MVC アプリケーション内の igTree の宣言

  2. コントローラーのコードの追加

  3. バインディング

手順

以下の手順は、igTree を使用して ASP.NET MVC アプリケーションを開発する方法を示します。

  1. MVC アプリケーションへの必要なリソースの追加

    • Ignite UI 2016.2 のインストール フォルダーへ移動します: C:\Program Files (x86)\Infragistics\2016.2\Ignite UI

    • js および css フォルダーを MVC アプリケーションのルート ディレクトリへコピーします。

    • Infragistics.Web.Mvc アセンブリへの参照を追加します。

      : dll の参照の Copy Local プロパティを true に設定する必要があります。

  2. MVC アプリケーションで igTree を宣言

    • Infragistics Loader を追加

      この手順では、ページのヘッダーに Infragistics Loader を追加します。

      ASPX の場合:

      <%= Html.Infragistics()
           .Loader()
           .ScriptPath("{IG Resources root}/js/")
           .CssPath("{IG Resources root}/css/")
           .Render()
       %>
      
    • igTree コントロールを追加

      この手順では、MVC アプリケーションに igTree コントロールを追加します。

      ASPX の場合:

      <%= Html.Infragistics()
           .Tree()
           .ID("XmlTree")
           .InitialExpandDepth(0)
           .DataSource(Model)
           .CheckboxMode(CheckboxMode.TriState)
           .DataBind()
           .Render()  
       %>
      

      : コード リストの Render メソッドの使用に注意してください。すべての Infragistics ASP.NET MVC ヘルパーは、コントロールのサーバー側描画を開始するために最後のメソッドとして Render メソッドを呼び出す必要があります。

  3. コントローラーのコードを追加

    • アクション名を追加

      この手順では、コントローラーに ActionName を追加します。

      C# の場合:

      [ActionName("node-images")]
      public ActionResult DataBindingUsingMVC()
      {
       return View("NodeImages", this.GetData());
      }
      
    • コントローラに GetData() ヘルパー メソッドを追加

      この手順はデータ ソースを作成するヘルパー メソッドを定義します。

      C# の場合:

      private IEnumerable<Folders> GetData()
      {
      string phisicalFilePath = System.Web.HttpContext.Current.Server.MapPath(       System.Web.HttpContext.GetGlobalResourceObject("Tree", "path_treeData")       .ToString());
      var ctx = XDocument.Load(phisicalFilePath);
      IEnumerable<Folders> data = from item in ctx.Root.Elements("Folder")
         select new Folders
         {
            Text = item.Attribute("Text").Value,
            Value = item.Attribute("Value").Value,
            ImageUrl = Url.Content(item.Attribute("ImageUrl").Value),
            Folder = from i1 in item.Elements("Folder")
       select new Folders
        {
          Text = i1.Attribute("Text").Value,
          Value = i1.Attribute("Value").Value,
          ImageUrl = Url.Content(i1.Attribute("ImageUrl").Value),
          Folder = from i2 in i1.Elements("Folder")
                 select new Folders
                 {
             Text = i2.Attribute("Text").Value,
             Value = i2.Attribute("Value").Value,
             ImageUrl = Url.Content(i2.Attribute("ImageUrl").Value),
             Folder = from i3 in i2.Elements("Folder")
                     select new Folders
                     {
                           Text = i3.Attribute("Text").Value,
                           Value = i3.Attribute("Value").Value,
                           ImageUrl = Url.Content(i3.Attribute("ImageUrl").Value)
                     }
                  }
                }
            };
      return data;
      }
      
  4. バインディング

    • ツリー バインディングを追加

      この手順では、igTree にバインディング構成を追加します。

      : バインドされたデータの各フィールドが階層でどのように機能するか igTree コントロールが判断できるようにするには、バインディング オブジェクトをツリーで表示する必要がある型ごとに構成する必要があります。

      C# の場合:

      .Bindings( bindings => {
               bindings.
               ValueKey("Value").
               TextKey("Text").
               ImageUrlKey("ImageUrl").
               ChildDataProperty("Folder");
           }).
      

次の手順

Ignite UI で ASP.NET MVC を使用して作業する方法を習得した後、コントロールを ASP.NET MVC で使用する方法については、「igGrid を使用する ASP.NET MVC アプリケーションの開発」を参照してください。

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

Copyright © 1996 - 2017 Infragistics, Inc. All rights reserved.

このトピックについてのご意見・ご感想をメールにてお寄せください。|オンラインで表示:GitHub