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

このトピックでは、アプリケーションに InputColor コントロールを追加する方法を示します。ComponentOne ASP.NET MVC コントロールを追加する方法については、「コントロールの追加」を参照してください。

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

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

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

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

手順 2:新しいコントローラーおよびビューの追加

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

  1. ソリューションエクスプローラーで、[コントローラー]フォルダを右クリックします。
  2. コンテキストメニューから、[追加]→[コントローラー]を選択します。[コントローラーの追加]ダイアログが表示されます。
  3. [コントローラーの追加] ダイアログで、次の手順を実行します。
    1. コントローラーの名前を設定します(例:Default1Controller)。
    2. [MVC 5 コントローラー -空]テンプレートを選択します。
    3. [追加]をクリックします。
  4. アプリケーションに新しいコントローラーが追加されます。

ビューの追加

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

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

  1. ソリューションエクスプローラーで、[ビュー]フォルダを展開します。
  2. Index.cshtml をダブルクリックして開きます。
  3. Index.cshtml ファイルのデフォルトのコードを次のコードに置き換えて、InputColor コントロールを初期化します。
    Razor
    コードのコピー
    @using System.Drawing
    <br />
    <br />
    <script>
        function changeColor(sender, e) {
            document.getElementById("image1").style.backgroundColor = sender.value;
        }
    </script>
    // 画像を追加して高さと幅を設定します
    <p>
        <img id="image1" height="300" width="400"
             src="@Href("~/Content/images/componentone_logo.png")" />
    </p>
    <div>
        //画像の背景色を設定します
        @Html.C1().InputColor().Value(Color.White).OnClientValueChanged("changeColor")
    </div>
    

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

  1. [ビルド]→[ソリューションのビルド]をクリックして、プロジェクトをビルドします。
  2. [F5] キーを押してプロジェクトを実行します。
    ブラウザのアドレスバーで、生成された URL にフォルダ名とビュー名を追加して(例:http://localhost:1234/Default1/index)、ビューを表示します。または、ビューをホームページにリンクします。

先頭に戻る