Mengintegrasikan Datepicker UI JQuery dengan pengikatan model dan formulir web

oleh Tom FitzMacken

Seri tutorial ini menunjukkan aspek dasar penggunaan pengikatan model dengan proyek ASP.NET Web Forms. Pengikatan model membuat interaksi data lebih lurus ke depan daripada berurusan dengan objek sumber data (seperti ObjectDataSource atau SqlDataSource). Seri ini dimulai dengan materi pengantar dan beralih ke konsep yang lebih canggih dalam tutorial selanjutnya.

Tutorial ini menunjukkan cara menambahkan widget Datepicker JQuery UI ke Formulir Web, dan menggunakan pengikatan model untuk memperbarui database dengan nilai yang dipilih.

Tutorial ini dibangun pada proyek yang dibuat di bagian pertama dan kedua dari seri.

Anda dapat mengunduh proyek lengkap di C# atau VB. Kode yang dapat diunduh berfungsi dengan Visual Studio 2012 atau Visual Studio 2013. Ini menggunakan templat Visual Studio 2012, yang sedikit berbeda dari templat Visual Studio 2013 yang ditunjukkan dalam tutorial ini.

Apa yang akan Anda bangun

Dialam tutorial ini, Anda akan:

1. Menambahkan properti ke model Anda untuk merekam tanggal pendaftaran siswa
2. Mengaktifkan pengguna untuk memilih tanggal pendaftaran menggunakan widget Datepicker UI JQuery
3. Menerapkan aturan validasi untuk tanggal pendaftaran

Widget Datepicker UI JQuery memungkinkan pengguna untuk dengan mudah memilih tanggal dari kalender yang muncul saat pengguna berinteraksi dengan bidang . Menggunakan widget ini bisa lebih nyaman bagi pengguna daripada mengetik tanggal secara manual. Mengintegrasikan widget Datepicker ke dalam halaman yang menggunakan pengikatan model untuk operasi data hanya memerlukan sejumlah kecil pekerjaan tambahan.

Menambahkan properti baru ke model

Pertama, Anda akan menambahkan properti Datetime ke model Siswa Anda dan memigrasikan perubahan tersebut ke database. Buka UniversityModels.cs, dan tambahkan kode yang disorot ke model Siswa.

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 disertakan untuk menerapkan aturan validasi untuk properti . Untuk tutorial ini, kami akan berasumsi bahwa Contoso University didirikan pada 1 Januari 2013 dan oleh karena itu tanggal pendaftaran sebelumnya tidak valid.

Di jendela Manajemen Paket, tambahkan migrasi dengan menjalankan perintah add-migration AddEnrollmentDate. Perhatikan bahwa kode migrasi menambahkan kolom Datetime baru ke tabel Siswa. Untuk mencocokkan nilai yang Anda tentukan di RangeAttribute, tambahkan nilai default untuk kolom baru, seperti yang diperlihatkan dalam kode yang disorot di bawah ini.

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");
        }
    }
}

Simpan perubahan Anda ke file migrasi.

Anda tidak perlu menyemai data lagi. Oleh karena itu, buka Configuration.cs di folder Migrasi dan hapus atau komentari kode dalam metode Seed . Simpan dan tutup file.

Sekarang, jalankan perintah update-database. Perhatikan bahwa kolom sekarang ada di database dan semua rekaman yang ada memiliki nilai default untuk EnrollmentDate.

Menambahkan kontrol dinamis untuk tanggal pendaftaran

Sekarang Anda akan menambahkan kontrol untuk menampilkan dan mengedit tanggal pendaftaran. Pada titik ini, nilai diedit melalui kotak teks. Nanti dalam tutorial, Anda akan mengubah kotak teks ke widget Datepicker JQuery.

Pertama, penting untuk dicatat bahwa Anda tidak perlu membuat perubahan apa pun pada file AddStudent.aspx . Kontrol DynamicEntity akan secara otomatis merender properti baru.

Buka Students.aspx, dan tambahkan kode yang disorot berikut.

<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>

Jalankan aplikasi dan perhatikan bahwa Anda dapat mengatur nilai tanggal pendaftaran dengan mengetik tanggal. Saat menambahkan siswa baru:

Atau, mengedit nilai yang sudah ada:

Mengetik tanggal berfungsi, tetapi mungkin bukan pengalaman pelanggan yang ingin Anda berikan. Di bagian berikutnya, Anda akan mengaktifkan pemilihan tanggal melalui kalender.

Instal paket NuGet untuk bekerja dengan JQuery UI

Paket Juice UI NuGet memungkinkan integrasi widget antarmuka pengguna JQuery yang mudah ke dalam aplikasi web Anda. Untuk menggunakan paket ini, instal melalui NuGet.

Versi UI Juice yang Anda instal mungkin bertentangan dengan versi JQuery di aplikasi Anda. Sebelum melanjutkan tutorial ini, coba jalankan aplikasi Anda. Jika Anda mengalami kesalahan JavaScript, Anda perlu mendamaikan versi JQuery. Anda dapat menambahkan versi JQuery yang diharapkan ke folder Skrip Anda (versi 1.8.2 pada saat menulis tutorial ini), atau di Site.master tentukan jalur ke file JQuery.

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

Menyesuaikan templat DateTime untuk menyertakan widget Datepicker

Anda akan menambahkan widget Datepicker ke templat data dinamis untuk mengedit nilai tanggalwaktu. Dengan menambahkan widget ke templat, widget secara otomatis dirender dalam formulir untuk menambahkan siswa baru dan dalam tampilan kisi untuk mengedit siswa. Buka DateTime_Edit.ascx, dan tambahkan kode yang disorot berikut.

<%@ 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" />

Dalam file code-behind, Anda akan mengatur tanggal minimum dan maksimum untuk DatePicker. Dengan mengatur nilai-nilai ini, Anda akan mencegah pengguna menavigasi ke tanggal yang tidak valid. Anda akan mengambil nilai minimum dan maksimum dari RangeAttribute pada properti DateTime, jika disediakan. Buka DateTime_Edit.ascx.cs, dan tambahkan kode yang disorot berikut ke metode 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();
    }
}

Jalankan aplikasi web dan navigasikan ke halaman AddStudent. Berikan nilai untuk bidang dan perhatikan bahwa saat Anda mengklik kotak teks untuk Tanggal Pendaftaran, kalender ditampilkan.

Pilih tanggal, dan klik Sisipkan. RangeAttribute memberlakukan validasi pada server. Dengan mengatur properti minDate pada Datepicker, Anda juga menerapkan validasi pada klien. Kalender tidak mengizinkan pengguna menavigasi ke tanggal sebelum nilai minDate.

Saat Anda mengedit rekaman dalam tampilan kisi, kalender juga ditampilkan.

Kesimpulan

Dalam tutorial ini, Anda mempelajari cara memasukkan widget JQuery ke dalam formulir web yang menggunakan pengikatan model.

Dalam tutorial berikutnya, Anda akan menggunakan nilai string kueri saat memilih data.

SebelumnyaBerikutnya