このトピックでは、MVC WebアプリケーションにMultiRowコントロールを追加し、そこにモデル連結を使用してデータを追加する方法について説明します。

このトピックは次の4つの手順で構成されます。

• 手順1：MVC アプリケーションの作成
• 手順2：MultiRowのデータソースの作成
• 手順3：MultiRowコントロールの追加
• 手順4：プロジェクトのビルドおよび実行

次の図は、上記の手順を実行した後のデータを含むMultiRowコントロールを示しています。

手順 1：MVC アプリケーションの作成

ComponentOneまたはVisualStudioテンプレートを使用して新しいMVCアプリケーションを作成します。MVCアプリケーションの作成の詳細については、「MVCアプリケーションの設定」を参照してください。

手順2：MultiRowのデータソースの作成

1. ［モデル］フォルダに新しいクラスを追加します（例：Orders.cs）。新しいモデルを追加する方法の詳細については、「コントロールの追加」を参照してください。
2. 次のコードをOrders.csモデルに追加します。ここでは、Ordersクラスを使用して、データベース内の受注データを表しています。Ordersオブジェクトの各インスタンスがMultiRowコントロール内の1つのレコードに対応します。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MultiRow.Models
{
    public class Orders
    {
        private static object _lockObj = new object();
        private static Random Rand = new Random();
        private static IList<Order> _orders;
        private static IList<string> _cities;
        private static IList<Customer> _customers;
        public class Customer
        {
            public int Id { get; set; }
            public string Name { get; set; }
            public string Address { get; set; }
            public string City { get; set; }
            public string State { get; set; }
            public string Email { get; set; }
        }
        public class Order
        {
            public int Id { get; set; }
            public DateTime Date { get; set; }
            public DateTime ShippedDate { get; set; }
            public double Amount { get; set; }
            public Customer Customer { get; set; }
        }

        public static IList<Order> GetOrders()
        {
            if (_orders == null)
            {
                var today = DateTime.Now.Date;
                var customers = GetCustomers();
                _orders = new List<Order>();
                for (int i = 0; i < 8; i++)
                {
                    var shipped = today.AddDays(-Rand.Next(-1, 3000));
                    var order = new Order
                    {
                        Id = i,
                        Date = shipped.AddDays(-Rand.Next(1, 5)),
                        ShippedDate = shipped,
                        Amount = Rand.Next(10000, 500000) / 100,
                        Customer = customers[Rand.Next(0, customers.Count - 1)],
                    };
                    _orders.Add(order);
                }
            }
            return _orders;
        }
        public static IList<Customer> GetCustomers()
        {
            if (_customers == null)
            {
                var firstNames = new[] { "Akemi", " Ayako", "Atsuko", "Hanako", "Daichi", "Katsuo", 
                "Junko", "Ken", "Makoto", "Mio" };
                var lastNames = new[] { "Sasaki", "Suzuki", "Kawasaki", "Yamaguchi", "Kimura", 
                "Ikeda", "Kanagawa", "Minato" };
                var cities = GetCities();
                var states = new[] { "SP", "RS", "RN", "SC", "CS", "RT", "BC" };

                _customers = new List<Customer>();
                for (int i = 0; i < 50; i++)
                {
                    var first = firstNames[Rand.Next(0, firstNames.Length - 1)];
                    var last = lastNames[Rand.Next(0, lastNames.Length - 1)];
                    var customer = new Customer
                    {
                        Id = i,
                        Name = first + " " + last,
                        Address = Rand.Next(100, 10000) + " " + lastNames[Rand.Next(0, lastNames.Length - 1)] 
                            + " ,Japan.",
                        City = cities[Rand.Next(0, cities.Count - 1)],
                        State = states[Rand.Next(0, states.Length - 1)],
                        Email = first + "." + last + "@gmail.com",
                    };
                    _customers.Add(customer);
                }
            }
            return _customers;
        }
        public static IList<string> GetCities()
        {
            {
                if (_cities == null)
                {
                    _cities = new[] { "京都", "岩手", "大阪", "カイロ", "石川", "東京", "ハンブルク", "奈良" };
                }
            }
            return _cities;
        }
    }
}

手順3：MultiRowコントロールの追加

アプリケーションにMultiRowコントロールを追加するには、次の手順に従います。

新しいコントローラーの追加

1. ソリューションエクスプローラーで、［コントローラー］フォルダを右クリックします。
2. コンテキストメニューから、［追加］→［コントローラー］を選択します。［スキャフォールディングを追加］ダイアログが表示されます。
3. ［スキャフォールディングを追加］ダイアログで、次の手順に従います。
   1. ［空のMVCコントローラー］テンプレートを選択します。
   2. コントローラーの名前を設定します（例：MultiRowController）。
   3. ［追加］をクリックします。
4. 次に示すようにMVC参照を追加します。

   C#	コードのコピー
   using MultiRow.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc;

5. メソッドIndex()を次のメソッドに置き換えます。
   • C#

   MultiRowController.cs	コードのコピー
   public ActionResult Index() { var model = Orders.GetOrders(); return View(model); }

1. ソリューションエクスプローラーで、［コントローラー］フォルダを展開し、MultiRowControllerをダブルクリックして開きます。
2. メソッドIndex()内にカーソルを置きます。
3. 右クリックし、［ビューの追加］を選択します。［ビューの追加］ダイアログが表示されます。
4. ［ビューの追加］ダイアログで、ビュー名がIndex、ビューエンジンがRazor（CSHTML）であることを確認します。
5. ［追加］をクリックしてコントローラーのビューを追加します。次のコードをコピーし、Index.cshtmlに貼り付けます。

   Index.cshtml

   コードのコピー

   @using MultiRowNetCore.Models @model IEnumerable<Orders.Order> <c1-multi-row id="ovMultiRowCompact" class="multirow"> <c1-items-source source-collection="Model"></c1-items-source> <c1-multi-row-cell-group header="注文" colspan="2"> <c1-multi-row-cell binding="Id" header="ID" width="150" class="id" /> <c1-multi-row-cell binding="Date" header="注金額" format="c" class="amount" /> <c1-multi-row-cell binding="ShippedDate" header="出荷" /> </c1-multi-row-cell-group> <c1-multi-row-cell-group header="お客様" colspan="3"> <c1-multi-row-cell binding="Customer.Name" name="CustomerName" header="お客様" width="200" /> <c1-multi-row-cell binding="Customer.Email" name="CustomerEmail" header="お客様のEーメル" class="email" colspan="2" /> <c1-multi-row-cell binding="Customer.Address" name="CustomerAddress" header="住所" /> <c1-multi-row-cell binding="Customer.City" name="CustomerCity" header="都市"> </c1-multi-row-cell> <c1-multi-row-cell binding="Customer.State" name="CustomerState" header="州" /> </c1-multi-row-cell-group> </c1-multi-row>

手順4：プロジェクトのビルドおよび実行

1. ［ビルド］→［ソリューションのビルド］をクリックして、プロジェクトをビルドします。
2. ［F5］キーを押してプロジェクトを実行します。
   ブラウザのアドレスバーで、生成されたURLにフォルダ名とビュー名を付加してビューを確認します（例：http://localhost:1234/MultiRow/Index）。