ASP.NET Core MVC コントロールヘルプ
クイックスタート
コントロールの使用 > Input > ComboBox > クイックスタート

このセクションでは、MVC Web アプリケーションに ComboBox コントロールを追加し、そこにデータを追加する方法について説明します。ComponentOne ASP.NET MVC コントロールを追加する方法については、「コントロールの追加」を参照してください。

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

次の図は、上記の手順を実行した後の ComboBox を示しています。

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

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

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

  1. ［モデル］フォルダに新しいクラスを追加します（例：Cities.cs）。
  2. 次のコードを新しいモデルに追加して、ComboBox コントロールのデータソースになるクラスを定義します。
    C#
    コードのコピー 
    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVCFlexGrid.Models
{
    public class Cities
    {
        public static List<string> GetCities()
        {
            return new List<string> 
            {
                "Abidjan", "Accra", "Ahmedabad", "Alexandria", "Ankara", "Atlanta", "Baghdad", "Bandung", "Bangkok", "Barcelona", "Beijing", "Belo Horizonte",
        "Bengaluru", "Bogota", "Boston", "Buenos Aires", "Cairo", "Calcutta", "Chengdu", "Chennai", "Chicago", "Chongqung", "Dalian", "Dallas", "Delhi",
        "Detroit", "Dhaka", "Dongguan", "Essen", "Fuzhou", "Guadalajara", "Guangzhou", "Hangzhou", "Harbin", "Ho Chi Minh City", "Hong Kong", "Houston",
        "Hyderabad", "Istanbul", "Jakarta", "Johannesburg", "Karachi", "Khartoum", "Kinshasa", "Kuala Lumpur", "Lagos", "Lahore", "Lima", "London",
        "Los Angeles", "Luanda", "Madrid", "Manila", "Medellin", "Mexico City", "Miami", "Milan", "Monterrey", "Moscow", "Mumbai", "Nagoya", "Nanjing",
        "Naples", "New York", "Osaka", "Paris", "Pheonix", "Philadelphia", "Porto Alegre", "Pune", "Qingdao", "Quanzhou", "Recife", "Rio de Janeiro",
        "Riyadh", "Rome", "Saint Petersburg", "Salvador", "San Francisco", "Santiago", "Sao Paulo", "Seoul", "Shanghair", "Shenyang", "Shenzhen",
        "Singapore", "Surabaya", "Surat", "Suzhou", "Sydney", "Taipei", "Tehran", "Tianjin", "Toronto", "Washington", "Wuhan", "Xi'an-Xianyang", "Yangoon",
        "Zhengzhou", "Tokyo"
            };
        }
    }
}
先頭に戻る

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

AutoComplete コントロールを初期化するには、次の手順を実行します。

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

  1. ソリューションエクスプローラーで、［コントローラー］フォルダを右クリックします。
  2. コンテキストメニューから、［追加］→［コントローラー］を選択します。［コントローラーの追加］ダイアログが表示されます。
  3. ［コントローラーの追加］ ダイアログで、次の手順を実行します。
    1. コントローラーの名前を設定します（例：IndexController）。
    2. ［MVC 5 コントローラー -空］テンプレートを選択します。
    3. ［追加］をクリックします。
  4. メソッド Index() を次のメソッドに置き換えます。
    C#
    コードのコピー 
    public ActionResult Index()
{
    ViewBag.Cities = MVCFlexGrid_JP.Models.Cities.GetCities();
    return View();
}

ビューの追加

  1. ソリューションエクスプローラーで、［コントローラー］フォルダを展開し、コントローラー QuickStartControllerをダブルクリックして開きます。
  2. メソッド QuickStart() 内にカーソルを置きます。
  3. 右クリックし、［ビューの追加］を選択します。［ビューの追加］ダイアログが表示されます。
  4. ［ビューの追加］ダイアログで、ビュー名が QuickStart で、ビューエンジンが Razor（CSHTML）であることを確認します。
  5. ［追加］をクリックします。コントローラーにビューが追加されます。
  6. FlexChart コントロールをビュー QuickStart で次のようにインスタンス化します。
    HTML
    コードのコピー 
    @{
    List<string> cities = ViewBag.Cities;
}

<div>

    <c1-combo-box selected-index=0>
        <c1-items-source source-collection=@cities></c1-items-source>
    </c1-combo-box>
</div>

先頭に戻る

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

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

 

 

Copyright © MESCIUS, Inc. All rights reserved.