このトピックでは、ASP.NET MVC アプリケーションで Ignite UI for MVC™ コンポーネントを使用した作業の開始方法を説明します。
このトピックは、以下のセクションで構成されます。
Ignite UI for MVC™ は、MVC 拡張機能のサーバー側セットを提供します。これによって、次のようにして Ignite UI for jQuery コントロールを定義および使用できるようになります。
Razor の場合:
@(Html.Infragistics().CONTROL_NAME())
または
Razor の場合:
@(Html.Infragistics().CONTROL_NAME(Model))
すべてのコントロールは、Infragistics() 拡張メソッドのヘルパー メソッドを使用でき、intellisense を使用して見ることができます。
Razor の場合:
@(Html.Infragistics().Grid("grid1", Model.GridFiltering))
Ignite UI for MVC の機能は、Infragistics.Web.Mvc アセンブリに含まれています。これは、MVC4 と MVC5 の両方に対してコンパイル済みです。Ignite UI for MVC のアセンブリの場所の詳細は、「Ignite UI for jQuery で JavaScript リソースを使用」を参照してください。
注: dll の参照の
Copy Localプロパティをtrueに設定する必要があります。
インフラジスティックス ローダーを使用してページに必要な依存スクリプトおよびスタイル ファイルをロードします。ローダーの使い方の詳細は、「Ignite UI for jQuery で JavaScript リソースを使用」を参照してください。
以下のコードは、Ignite UI for MVC ローダーを初期化する方法を示します。
Razor の場合:
<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)」を参照してください。
Razor の場合:
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.loader.js"></script>
Razor の場合:
@(Html.Infragistics().Loader()
.ScriptPath(“http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/”)
.CssPath(“http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/”)
.Render())
Ignite UI for MVC コントロールをインスタンス化する場合、他のオプションをすべて構成し終わった後、最後に Render メソッドを呼び出します。これは、クライアントでコントロールをインスタンス化するのに必要な HTML および JavaScript を描画するメソッドです。
MVC アプリケーションでコントロールを設定するための 2 つの異なるオプションがあります。以下の表は、コントロールを Model で定義するか View で定義するかに応じて Ignite UI for MVC コントロールの定義に使用できる方法を示します。詳細は、概要表の後に記載されています。
| メソッド | 説明 |
|---|---|
| Model でのコントロールの定義 | Model クラスを構成し、グリッド拡張メソッドの引数として渡すことでコントロールを定義します。 |
| View でのコントロールの定義 | チェーン構文を使用して View でコントロールを定義します。 |
チェーン構文を使用しコントロールを初期化すると、すべての作成および構成のロジックがビューに移動します。これによって、コントローラー コードが非常に簡潔で明快になります。ビューにコントロールを定義するには、呼び出したものと同じオブジェクトを常に返すヘルパー メソッドを介して、必要なプロパティとメソッドを公開します。
以下のコードは、チェーン構文を使用してigTree コントロールを初期化する方法を示します。
Razor の場合:
@(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 を構成する方法を示します。
Razor の場合:
.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");
})
})
モデル クラスを使用する場合、コントローラーに依存してコントロールを構成します。これは、要求の後に、コントロールのいくつかの設定やプロパティを取得する場合に便利です。これらは、チェーン構文を使用してすべてを 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);
}
以下の手順では、Ignite UI for MVC を使用して作業するために必要なアセンブリおよびリソース (CSS および JavaScript ファイル) を追加する方法を示します。
この手順を実行するには、以下が必要です。
このトピックでは、 igTree コントロールを使用した ASP.NET MVC アプリケーションの作成について順を追って説明します。以下はプロセスの概念的概要です。
チェーンを使用した MVC アプリケーション内の igTree の宣言
コントローラーのコードの追加
バインディング
以下の手順は、igTree を使用して ASP.NET MVC アプリケーションを開発する方法を示します。
MVC アプリケーションへの必要なリソースの追加
MVC アプリケーションで igTree を宣言
Infragistics Loader を追加
この手順では、ページのヘッダーに Infragistics Loader を追加します。
Razor の場合:
@(Html.Infragistics()
.Loader()
.ScriptPath("{IG Resources root}/js/")
.CssPath("{IG Resources root}/css/")
.Render()
)
igTree コントロールを追加
この手順では、MVC アプリケーションに igTree コントロールを追加します。
Razor の場合:
@(Html.Infragistics()
.Tree()
.ID("XmlTree")
.InitialExpandDepth(0)
.DataSource(Model)
.CheckboxMode(CheckboxMode.TriState)
.DataBind()
.Render()
)
注: コード リストの Render メソッドの使用に注意してください。すべての Ignite UI for MVC は、コントロールのサーバー側描画を開始するために最後のメソッドとして Render メソッドを呼び出す必要があります。
コントローラーのコードを追加
アクション名を追加
この手順では、コントローラーに 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;
}
バインディング
ツリー バインディングを追加
この手順では、igTree にバインディング構成を追加します。
注: バインドされたデータの各フィールドが階層でどのように機能するか igTree コントロールが判断できるようにするには、バインディング オブジェクトをツリーで表示する必要がある型ごとに構成する必要があります。
C# の場合:
.Bindings( bindings => {
bindings.
ValueKey("Value").
TextKey("Text").
ImageUrlKey("ImageUrl").
ChildDataProperty("Folder");
})
Ignite UI for MVC を使用して作業する方法を習得した後、コントロールを ASP.NET MVC で使用する方法については、「igGrid を使用する ASP.NET MVC アプリケーションの開発」を参照してください。
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
オンラインで表示: GitHub