0

私はmvc3を初めて使用し、c＃コーディングとかみそりのビューエンジンを使用しています。jqueryなどを使用せずに日付ピッカーを使用する方法はありますか？

4

2 に答える 2

2

JavaScript と jquery を使用しない場合は、HTML が残ります。また、HTML には などの標準入力フィールドがあることもご存知でしょう<input type="text">。純粋な HTML を使用すると、ユーザーが日付入力をクリックしたときに動的な日付ピッカーを表示することはできません。

于 2012-04-05T06:28:03.813 に答える
0

「すべてのスクリプト言語」を避けたい場合は、3 つのドロップダウンが必要だと思います。

  1. 月 (1 - 12)
  2. 日 (1 - 31)
  3. 年

モデルは、月、日、年の 3 つの個別のフィールドを取得する必要があります。次に、コントローラーのアクションで、日付の解析を行って有効な日付であることを確認し、そうでない場合は ModelState 例外を追加する必要があります。

MVC には jQuery が付属しているため (そしてバリデーターは非常に便利です)、なぜそれらの使用を避けようとしているのですか?

これらはすべて jQuery またはプレーンな JavaScript で行うことができるため、実際に自分自身を制限することになります。

編集 - コードサンプルの追加

あなたのモデル

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

public class DatePickerViewModel
{
     [Required]
     [DisplayName("Month")]
     [Range(1,12,ErrorMessage = "Month must be between 1 and 12")]
     public int? Date_Month {get;set;}

     [Required]
     [DisplayName("Day")]
     [Range(1,31,ErrorMessage = "Day must be between 1 and 31")]
     public int? Date_Day {get;set;}

     [Required]
     [DisplayName("Day")]
     [Range(1900,2012,ErrorMessage = "Year must be between 1900 and 2012")]
     public int? Date_Year {get;set;}
}

あなたのコントローラー

public class DatePickerController : Controller
{
     [HttpGet]
     public ActionResult Choose()
     {
          return View(new DatePickerViewModel());
     }

     [HttpPost]
     public ActionResult Choose(DatePickerViewModel model)
     {
          if(!ModelState.IsValid)
               return View(model);
          else
          {
               DateTime date;
               if(!DateTime.TryParse(String.Format("{0}/{1}/{2}",model.Date_Month, model.Date_Day, model.Date_Year),out dt))
               {
                    ModelState.AddModelError("","Invalid Date");
                    return View(model);
               }

               //Do something with the variable "date"
               return View("SomeOtherView");
          }


     }
}

そしてあなたの見解

@model DatePickerViewModel

@using(Html.BeginForm())
{
     <div>
          <div>@Html.LabelFor(m => m.Date_Month) @Html.ValidationMessageFor( m => m.Date_Month)</div>
         <div>@Html.DropDownListFor(m => m.Date_Month, (from n in Enumerable.Range(0, 12) select new SelectListItem{ Text = n==0? "":n.ToString(),Value =  n ==0? "":n.ToString()})</div>
     </div>
     <div>
          <div>@Html.LabelFor(m => m.Date_Day) @Html.ValidationMessageFor( m => m.Date_Day)</div>
         <div>@Html.DropDownListFor(m => m.Date_Day, (from n in Enumerable.Range(0, 31) select new SelectListItem{ Text = n==0? "":n.ToString(),Value =  n ==0? "":n.ToString()})</div>
     </div>
     <div>
          <div>@Html.LabelFor(m => m.Date_Year) @Html.ValidationMessageFor( m => m.Date_Year)</div>
         <div>@Html.DropDownListFor(m => m.Date_Year, (from n in Enumerable.Range(1899, 2012) select new SelectListItem{ Text = n==1899? "":n.ToString(),Value =  n == 1899? "":n.ToString()})</div>
     </div>
     <div><input type="submit" value="Submit"/></div>
}

ご覧のとおり、JavaScript をまったく使用せずに日付セレクターを有効にするためだけに作成する必要がある未加工のコードの量は非常に多くなります。任意の jQuery 日付ピッカーを使用する場合に必要なのは、Model/ViewModel の null 許容 DateTime プロパティ、ビューのテキスト ボックス、およびテキスト ボックスを日付セレクターに変換する JS の小さなスニペットだけです。

jQuery Date Picker プラグインの使用方法については、車輪の再発明を避け、既に存在するコードを再利用してください。

于 2012-04-05T04:52:45.930 に答える