バージョン

Ignite UI for Asp.Net Core タグ ヘルパーの使用

トピックの概要

このトピックは、新しい ASP.NET Core 1.0 で追加されるタグ ヘルパー構文を使用して Ignite UI for Asp.Net Core™ コンポーネントを構成する方法を紹介します。

このトピックの内容

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

ビューのスコープにタグ ヘルパーを追加

すべての Ignite UI for jQuery タグ ヘルパーを現在のビュー スコープに追加するには、@addTagHelper 命令が使用されます:

@using Infragistics.Web.Mvc

@addTagHelper *, Infragistics.Web.AspNetCore

列挙体オプションが使用されていない場合、名前空間を使用する必要はありません。 特定のコントロールのみをビューに登録するには、コントロールのタグ ヘルパーの名前空間をワイルドカード (*) で終了して指定できます。

igGrids のみを登録する場合:

@using Infragistics.Web.Mvc

@addTagHelper Infragistics.Web.Mvc.TagHelpers.Grids.*, Infragistics.Web.AspNetCore

データ バインドされたコントロールの構成

このセクションでは、ig-grid タグ ヘルパーを使用して igGrid を構成する方法を紹介します。

以下のモデルを使用します:

namespace MyApp.Models
{
    using System;

    public class User
    {
        public int Id { get; set; }

        public string Username { get; set; }

        public string CountryId { get; set; }

        public DateTime BirthDate { get; set; }

        public bool IsAdmin { get; set; }
    }
}

ビューに登録します:

@model IQueryable<MyApp.Models.User>

igGrid で更新機能を構成し、エディターを追加します:

<ig-grid ig-data-source="@Model"
         auto-generate-columns="false"
         auto-generate-layouts="false"
         primary-key="Id"
         render-checkboxes="true" 
         width="900px"
         id="grid"
         update-url="@Url.Action("Update")">
    <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>
        <updating>
            <updating-column-settings>
                <updating-column-setting column-key="CountryId" 
                                         editor-type="@ColumnEditorType.Combo">
                    <combo-editor-options value-key="Id"
                                          text-key="Name"
                                          mode="@ComboMode.DropDown"
                                          ig-data-source="@Url.Action("Countries")" />
                </updating-column-setting>
                <updating-column-setting column-key="BirthDate"
                                         editor-type="@ColumnEditorType.DatePicker" />
            </updating-column-settings>
        </updating>
    </features>
</ig-grid>

<input type="button" id="saveChanges" class="button-style" value="Save Changes" />

<script type="text/javascript">
    $("#saveChanges").on("click", function() {
        $("#grid").igGrid("saveChanges");
    });
</script>

コントロールの構成は、HTML ヘルパーの使用する場合と同様です。 コントロールはタグとして宣言し、オプションはタグ属性として設定します。 ただし、ラムダ式の使用で設定されるオプションは子タグとして宣言されます。

たとえば、HTML ヘルパーで列の設定:

.Columns(column =>
{
    column.For(m => m.Id).HeaderText("ID").Width("150px");
    column.For(m => m.Username).Width("200px");
    column.For(m => m.IsAdmin).HeaderText("Is аdmin").DataType("bool").Width("200px");
    column.For(m => m.BirthDate).HeaderText("Is аdmin").DataType("bool").Width("200px");
    column.For(m => m.CountryId).HeaderText("Country").Width("200px");
})

タグ ヘルパーの設定:

<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>

関連コンテンツ

オンラインで表示: GitHub