新技術を学習する過程で、新参者は多くの場合、それほど簡単に解決できない典型的なタスクに直面します。 初心者向けの一連のMVC3記事で、このような問題の解決策を紹介します。
Web開発者が直面する一般的な質問は、ドロップダウンカレンダーアイテムを使用してページに便利な日付エントリを追加することです。 この記事では、NuGetパッケージマネージャーとjQuery UIライブラリを使用して、このような要素をMVC 3に少し追加する方法について簡単に説明します。
以下は、ソースコードを含む完全なソリューションです。
Nugetを介したコンポーネントのインストール
まず、jQuery UI DatePickerコントロールを含むパッケージをプロジェクトに追加する必要があります。これにより、Webページの入力フィールドに便利な日付エントリを整理できます。
NuGetパネルを開き、次のコマンドを入力します。
インストールパッケージjQuery.UI.Widgets.Datepicker
数秒後、パッケージがダウンロードされ、すべての依存関係とともにインストールされます（図1）。
図1 NuGetコマンドを実行してプロジェクトにパッケージを追加する
マークアップ
コントロールの動作を示すために、HomeコントローラーのIndex.cshtmlページの次のレイアウトを作成します。
<p> : @Html.TextBox("exampleDateTime") </p> <p> : @Html.TextBox("exampleDateTime2", null, new { @class = "datePicker" }) : @Html.TextBox("exampleDateTime3", null, new { @class = "datePicker" }) </p>
マークアップには、日付を入力するための単一のフィールドと、同じCSSクラスを持つデータを入力するための2つのフィールドが含まれています。
スクリプトとスタイル
コンポーネントがページで機能するためには、その動作とパフォーマンスを担当するスクリプトを接続する必要があります。 さらに、少なくともコントロールの最も単純な設計が必要です。
これを行うには、ページの上部に、スクリプトファイルとスタイルを接続する必要性の表示を追加します。
<link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" type="text/javascript"></script>
3つのCSSスタイルには、テーマとコントロールの処理が含まれます。 必要に応じて、それらを1つのファイルに結合できます。
最初のスクリプトはjQuery UIライブラリを接続し、2番目のスクリプトはDatepickerコンポーネントを接続します。
これで、ページにコントロールを含める準備ができました。 それをアクティブにし、次のJavaScriptコードを使用して宣言されたコントロールに添付します。JavaScriptコードはページの最後に配置する必要があります。
<script type="text/javascript"> $(document).ready(function () { $('#exampleDateTime').datepicker({ firstDay: 1, dateFormat: 'dd.mm.yy' }); $('.datePicker').datepicker({ firstDay: 1, dateFormat: 'dd.mm.yy' }); }); </script>
これは、識別子による呼び出しを通じて単一のテキスト入力要素の初期化が行われる場所です。 また、例として、単一のCSSクラスに従って複数の要素を一度に初期化する。
firstDayパラメーターは、週の最初の曜日（デフォルトでは1-月曜日、0-日曜日）を設定します。 日付形式を指定するには、特別なパラメーターdateFormatが使用されます。
その結果、ページを起動した後、jQuery UIが提供する便利なコントロールを使用してデータを入力できるようになります（図2）。
図 2. jQuery UIコントロールの操作
ローカリゼーション
まず、標準のjQuery UI Datepickerメカニズムを使用して、ローカライズを自分で設定できます。
$ .datepicker.setDefaults（{dayNamesMin：['Sun'、 'Mon'、 'Tue'、 'Wed'、 'Thu'、 'Fri'、 'Sat']}）;
第二に、これは開発者からの既製のローカライズスクリプトを使用するための最良の方法であり、 http：//jqueryui.com/downloadで入手できます。 パッケージには、jquery.ui.datepicker-ru.jsファイルなどが含まれます。 ページに追加すると、コントロールのローカライズバージョンが表示されます（図3）。
図 3.実際のローカリゼーション
ソースコード
Visual Studio 2010のプロジェクトソースコードは、 ここからダウンロードできます 。