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

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

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

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

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

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

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

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

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

コントローラーのビューの追加

  1. メソッドIndex()内にカーソルを置きます。
  2. 右クリックし、［ビューの追加］を選択します。［ビューの追加］ダイアログが表示されます。
  3. ［ビューの追加］ダイアログで、ビュー名がIndex、ビューエンジンがRazor（CSHTML）であることを確認します。
  4. ［追加］をクリックしてコントローラーのビューを追加します。

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

  1. Index.cshtmlファイルのデフォルトコードを次のコードに置き換えて、InputDateTimeコントロールを初期化します。
    Razor
    コードのコピー 
    @{
  var today = DateTime.Now.Date;
  var minDate = new DateTime(today.Year, 1, 1);
  var maxDate = new DateTime(today.Year, 12, 31);
}
<div> <label>日付を選択</label>
        <c1-input-datetime id="idtInputDateTime" value="@today" min="@minDate" max="@maxDate"></c1-input- datetime>
</div>

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

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

先頭に戻る

 

 

Copyright © MESCIUS, Inc. All rights reserved.