ASP.NET Core で Ignite UI タグ ヘルパーを使用する

2019 vol. 2 バージョンより、Ignite UI for jQuery 製品は、ASP.NET Core でタグ ヘルパーが使用できるようになりました。

https://jp.igniteui.com/help/using-ignite-ui-tag-helpers

　

Visual Studio で ASP.NET Core Web アプリケーションを作成後、ビューのスコープにタグ ヘルパーを追加してください。

<!-- Index.cshtml -->
@using Infragistics.Web.Mvc
@addTagHelper Infragistics.Web.Mvc.TagHelpers.Grids.*, Infragistics.Web.AspNetCore

　

タグ ヘルパー上では、

• コントロールはタグとして宣言する。
• オプションは属性として設定する。
  • ただし、ラムダ式で設定するオプションは子タグとして宣言する。

でコントロールの設定ができます。

<!-- コントロール名はタグとして宣言する。オプションは属性として設定する。 -->
<ig-grid ig-data-source="@Model"
         auto-generate-columns="false"
         auto-generate-layouts="false"
         primary-key="Id"
         render-checkboxes="true"
         width="900px"
         id="grid">
    <!-- columns のように、HTML ヘルパーでラムダ式で設定するオプションは、子タグとして宣言する。 -->
    <columns>
        <column key="Id" header-text="ID" width="150px" />
        <column key="Username" width="200px" />
        <column key="IsAdmin" header-text="Is аdmin" ig-data-type="bool" width="200px" />
        <column key="BirthDate" header-text="Birth date" ig-data-type="date" width="100px" />
        <column key="CountryId" header-text="Country" width="200px" />
    </columns>
    <features>
        <sorting>
        </sorting>
    </features>
</ig-grid>

　

サンプル

　

ヘルプドキュメント

• 「Ignite UI タグ ヘルパーの使用」
  • https://jp.igniteui.com/help/using-ignite-ui-tag-helpers