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

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

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

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

手順 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 ファイルのデフォルトのコードを次のコードに置き換えて、Calendar コントロールを初期化します。
    Razor
    コードのコピー
    @using MVCFlexGrid_JP.Models
    @{
        //変数を作成し、min, max および現在の値を設定します
        var today = DateTime.Now.Date;
        var minDate = new DateTime(today.Year, 1, 1);
        var maxDate = new DateTime(today.Year, 12, 31);
    }
    <div>
        //Calendarコントロールを初期化します
        @(Html.C1().Calendar()
                //コントロールをカスタマイズします
            .Value(today).Min(minDate).Max(maxDate).MonthView(true)
            .Width(300)
    
        )
    
    </div>
    

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

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

先頭に戻る