JQuery UI Datepicker とモデル バインドと Web フォームの統合

Tom FitzMacken

このチュートリアル シリーズでは、ASP.NET Web Forms プロジェクトでモデル バインドを使用する基本的な側面について説明します。 モデル バインドを使用すると、データ ソース オブジェクト (ObjectDataSource や SqlDataSource など) を処理するよりも、データの操作が簡単になります。 このシリーズは入門資料から始まり、後のチュートリアルでより高度な概念に移ります。

このチュートリアルでは、JQuery UI Datepicker ウィジェット を Web フォームに追加し、モデル バインドを使用して選択した値でデータベースを更新する方法について説明します。

このチュートリアルは、シリーズの 最初 と 2 番目 の部分で作成されたプロジェクトに基づいています。

完全なプロジェクトは C# または VB で ダウンロード できます。 ダウンロード可能なコードは、Visual Studio 2012 または Visual Studio 2013で動作します。 Visual Studio 2012 テンプレートを使用します。これは、このチュートリアルで示すVisual Studio 2013 テンプレートとは若干異なります。

作成する内容

このチュートリアルでは、次のことについて説明します。

1. 学生の登録日を記録するプロパティをモデルに追加する
2. ユーザーが JQuery UI Datepicker ウィジェットを使用して登録日を選択できるようにする
3. 登録日の検証規則を適用する

JQuery UI Datepicker ウィジェットを使用すると、ユーザーは、ユーザーがフィールドを操作するときにポップアップするカレンダーから日付を簡単に選択できます。 このウィジェットを使用すると、日付を手動で入力するよりも、ユーザーにとって便利な場合があります。 Datepicker ウィジェットを、データ操作にモデル バインドを使用するページに統合する場合、追加の作業はごくわずかです。

モデルに新しいプロパティを追加する

まず、 Datetime プロパティを Student モデルに追加し、その変更をデータベースに移行します。 UniversityModels.cs を開き、強調表示されたコードを Student モデルに追加します。

public class Student
{
    [Key, Display(Name = "ID")]
    [ScaffoldColumn(false)]
    public int StudentID { get; set; }

    [Required, StringLength(40), Display(Name="Last Name")]
    public string LastName { get; set; }

    [Required, StringLength(20), Display(Name = "First Name")]
    public string FirstName { get; set; }

    [EnumDataType(typeof(YearEnum)), Display(Name = "Academic Year")]
    public YearEnum AcademicYear { get; set; }

    [Range(typeof(DateTime), "1/1/2013", "1/1/3000", ErrorMessage="Please provide an enrollment date after 1/1/2013")]
    [DisplayFormat(ApplyFormatInEditMode=true, DataFormatString="{0:d}")]
    public DateTime EnrollmentDate { get; set; }

    public virtual ICollection Enrollments { get; set; }
}

RangeAttribute は、 プロパティの検証規則を適用するために含まれています。 このチュートリアルでは、Contoso University が 2013 年 1 月 1 日に設立されたため、以前の登録日が無効であると想定します。

[パッケージ管理] ウィンドウで、 add-migration AddEnrollmentDate コマンドを実行して移行を追加します。 移行コードによって、新しい Datetime 列が Student テーブルに追加されていることに注意してください。 RangeAttribute で指定した値と一致するには、次の強調表示されたコードに示すように、新しい列の既定値を追加します。

namespace ContosoUniversity.Migrations
{
    using System;
    using System.Data.Entity.Migrations;
    
    public partial class AddEnrollmentDate : DbMigration
    {
        public override void Up()
        {
            AddColumn("dbo.Students", "EnrollmentDate", c => 
              c.DateTime(nullable: false, defaultValue: new DateTime(2013, 1, 1)));
        }
        
        public override void Down()
        {
            DropColumn("dbo.Students", "EnrollmentDate");
        }
    }
}

変更を移行ファイルに保存します。

データを再度シードする必要はありません。 そのため、 Migrations フォルダーで Configuration.cs を開き、 Seed メソッドでコードを削除またはコメントアウトします。 ファイルを保存して閉じます。

次に、コマンド update-database を実行します。 列がデータベースに存在し、既存のすべてのレコードに EnrollmentDate の既定値があることに注意してください。

登録日の動的コントロールを追加する

次に、登録日を表示および編集するためのコントロールを追加します。 この時点で、値はテキスト ボックスを使用して編集されます。 チュートリアルの後半で、テキスト ボックスを JQuery Datepicker ウィジェットに変更します。

まず、 AddStudent.aspx ファイルを変更する必要はありません。 DynamicEntity コントロールは、新しいプロパティを自動的にレンダリングします。

Students.aspx を開き、次の強調表示されたコードを追加します。

<asp:GridView runat="server" ID="studentsGrid"
        ItemType="ContosoUniversity.Models.Student" DataKeyNames="StudentID"
        SelectMethod="studentsGrid_GetData"
        UpdateMethod="studentsGrid_UpdateItem" DeleteMethod="studentsGrid_DeleteItem"
        AllowSorting="true" AllowPaging="true" PageSize="4"
        AutoGenerateEditButton="true" AutoGenerateDeleteButton="true"   
        AutoGenerateColumns="false">
  <Columns>
    <asp:DynamicField DataField="StudentID" />
    <asp:DynamicField DataField="LastName" />
    <asp:DynamicField DataField="FirstName" />
    <asp:DynamicField DataField="Year" />
    <asp:DynamicField DataField="EnrollmentDate" />
    <asp:TemplateField HeaderText="Total Credits">
      <ItemTemplate>
        <asp:Label Text="<%# Item.Enrollments.Sum(en => en.Course.Credits) %>" 
            runat="server" />
      </ItemTemplate>
    </asp:TemplateField>        
  </Columns>
</asp:GridView>

アプリケーションを実行し、日付を入力して登録日の値を設定できることに注意してください。 新しい学生を追加する場合:

または、既存の値を編集します。

日付の入力は機能しますが、提供したいカスタマー エクスペリエンスではない可能性があります。 次のセクションでは、カレンダーを使用して日付を選択できるようにします。

JQuery UI を操作するための NuGet パッケージのインストール

Juice UI NuGet パッケージを使用すると、JQuery UI ウィジェットを Web アプリケーションに簡単に統合できます。 このパッケージを使用するには、NuGet を使用してインストールします。

インストールする Juice UI のバージョンが、アプリケーションの JQuery のバージョンと競合する可能性があります。 このチュートリアルに進む前に、アプリケーションを実行してみてください。 JavaScript エラーが発生した場合は、JQuery のバージョンを調整する必要があります。 予想されるバージョンの JQuery を Scripts フォルダー (このチュートリアルの執筆時点でバージョン 1.8.2) に追加するか、Site.master で JQuery ファイルへのパスを指定します。

<asp:ScriptReference Name="jquery" Path="~/Scripts/jquery-1.10.2.js" />
<asp:ScriptReference Path="~/Scripts/jquery-ui-1.9.2.js" />

DatePicker ウィジェットを含むように DateTime テンプレートをカスタマイズする

datetime 値を編集するために、動的データ テンプレートに Datepicker ウィジェットを追加します。 ウィジェットをテンプレートに追加すると、新しい学生を追加するためのフォームと学生を編集するためのグリッド ビューの両方で自動的にレンダリングされます。 DateTime_Edit.ascx を開き、次の強調表示されたコードを追加します。

<%@ Control Language="C#" CodeBehind="DateTime_Edit.ascx.cs" Inherits="ContosoUniversityModelBinding.DateTime_EditField" %>

<juice:Datepicker runat="server" ID="t1" TargetControlID="TextBox1"/>
<asp:TextBox ID="TextBox1" runat="server" CssClass="DDTextBox" Text='<%# FieldValueEditString %>' Columns="20"></asp:TextBox>

<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" CssClass="DDControl DDValidator" ControlToValidate="TextBox1" Display="Static" Enabled="false" />
<asp:RegularExpressionValidator runat="server" ID="RegularExpressionValidator1" CssClass="DDControl DDValidator" ControlToValidate="TextBox1" Display="Static" Enabled="false" />
<asp:DynamicValidator runat="server" ID="DynamicValidator1" CssClass="DDControl DDValidator" ControlToValidate="TextBox1" Display="Static" />
<asp:CustomValidator runat="server" ID="DateValidator" CssClass="DDControl DDValidator" ControlToValidate="TextBox1" Display="Static" EnableClientScript="false" Enabled="false" OnServerValidate="DateValidator_ServerValidate" />

分離コード ファイルでは、DatePicker の最小日付と最大日付を設定します。 これらの値を設定すると、ユーザーが無効な日付に移動できなくなります。 DateTime プロパティが指定されている場合は、 RangeAttribute から最小値と最大値を取得します。 DateTime_Edit.ascx.cs を開き、次の強調表示されたコードを Page_Load メソッドに追加します。

protected void Page_Load(object sender, EventArgs e) {
    TextBox1.ToolTip = Column.Description;
            
    SetUpValidator(RequiredFieldValidator1);
    SetUpValidator(RegularExpressionValidator1);
    SetUpValidator(DynamicValidator1);
    SetUpCustomValidator(DateValidator);

    RangeAttribute ra = (RangeAttribute)Column.Attributes[typeof(RangeAttribute)];
    if (ra != null)
    {
        t1.MinDate = ra.Minimum.ToString();
        t1.MaxDate = ra.Maximum.ToString();
    }
}

Web アプリケーションを実行し、AddStudent ページに移動します。 フィールドの値を指定し、[登録日] のテキスト ボックスをクリックすると予定表が表示されます。

日付を選び、[ 挿入] をクリックします。 RangeAttribute は、サーバーに検証を適用します。 Datepicker で minDate プロパティを設定すると、クライアントにも検証が適用されます。 予定表では、ユーザーは minDate の値より前の日付に移動できません。

グリッド ビューでレコードを編集すると、予定表も表示されます。

まとめ

このチュートリアルでは、JQuery ウィジェットをモデル バインドを使用する Web フォームに組み込む方法について説明しました。

次の チュートリアルでは、データを選択するときにクエリ文字列値を使用します。

前へ次へ