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

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

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

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

手順 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 ファイルのデフォルトのコードを次のコードに置き換えて、InputTime コントロールを初期化します。
    Razor
    コードのコピー
    <br />
    <br />
    @{
        var minTime = DateTime.Parse("07時");
        var maxTime = DateTime.Parse("19時");
    }
    
    <div>
        <label>時刻を選択</label>
        @(Html.C1().InputTime().Id("iditInputTime")
            .Value(DateTime.Now).Min(minTime).Max(maxTime)
            .Step(new TimeSpan(0, 15, 0))
        )
    </div>
    

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

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

先頭に戻る