ASP.NET Core MVC で igGrid を表示する

ASP.NET Core MVC で igGrid を表示するサンプルです。igGrid を配置している cshtml 上にて、igGrid の表示に必要なスタイルファイル、及び、スクリプトファイルを参照しています。

Index.cshtml

@{
    ViewData["Title"] = "Home Page";
}

@section Styles {
    <link href="https://cdn-na.infragistics.com/igniteui/2020.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet">
    <link href="https://cdn-na.infragistics.com/igniteui/2020.2/latest/css/structure/infragistics.css" rel="stylesheet">
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

<table id="grid"></table>

@section Scripts {
    <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
    <script src="https://cdn-na.infragistics.com/igniteui/2020.2/latest/js/i18n/infragistics-ja.js"></script>
    <script src="https://cdn-na.infragistics.com/igniteui/2020.2/latest/js/infragistics.core.js"></script>
    <script src="https://cdn-na.infragistics.com/igniteui/2020.2/latest/js/infragistics.lob.js"></script>
    <script src="https://cdn-na.infragistics.com/igniteui/2020.2/latest/js/modules/i18n/regional/infragistics.ui.regional-ja.js"></script>
    <script>
        $(function () {

            var data = [
                { "名前": "John Smith", "年齢": 45 },
                { "名前": "Mary Johnson", "年齢": 32 },
                { "名前": "Bob Ferguson", "年齢": 27 }
            ];

            $("#grid").igGrid({
                dataSource: data
            });
        });
    </script>
}