JQuery UI DatePicker model bağlama ve Web formlarıyla tümleştirme

Tom FitzMacken tarafından

Bu öğretici serisi, model bağlamayı bir ASP.NET Web Forms projesiyle kullanmanın temel yönlerini gösterir. Model bağlama veri kaynağı nesneleriyle (örneğin, ObjectDataSource veya SqlDataSource) çok daha basit hale getirir. Bu seri giriş malzemesiyle başlar ve sonraki öğreticilerde daha gelişmiş kavramlara gider.

Bu öğretici, JQuery UI DatePicker pencere öğesinin bir Web formuna nasıl ekleneceğini ve veritabanını seçili değerle güncellemek için model bağlamayı nasıl kullanacağınızı gösterir.

Bu öğreticide, serinin Birinci ve ikinci bölümlerinde oluşturulan projede derleme yapılır.

Tüm projeyi C# veya vb 'ye indirebilirsiniz. İndirilebilir kod, Visual Studio 2012 veya Visual Studio 2013 ile birlikte kullanılabilir. Bu öğreticide gösterilen Visual Studio 2013 şablonundan biraz farklı olan Visual Studio 2012 şablonunu kullanır.

Ne oluşturacağız?

Bu öğreticide şunları yapmanız gerekir:

  1. Öğrencinin kayıt tarihini kaydetmek için modelinize bir özellik ekleyin
  2. Kullanıcının JQuery Kullanıcı arabirimi DatePicker pencere öğesini kullanarak kayıt tarihini seçmesini sağlama
  3. Kayıt tarihi için doğrulama kurallarını zorla

JQuery kullanıcı ARABIRIMI DatePicker pencere öğesi, kullanıcıların alanla etkileşime geçtiğinde bir takvimden bir tarihi kolayca seçmesini sağlar. Bu pencere öğesinin kullanılması, kullanıcıların el ile tarih yazmakla daha kullanışlı olabilir. DatePicker pencere öğesini, veri işlemleri için model bağlama kullanan bir sayfayla tümleştirmek yalnızca az miktarda ek iş gerektirir.

Modele yeni bir özellik ekleyin

İlk olarak, öğrenci modelinize bir DateTime özelliği ekleyecek ve bu değişikliği veritabanına geçirecaksınız. UniversityModels.cs' yi açın ve vurgulanan kodu öğrenci modeline ekleyin.

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 , özelliği için doğrulama kurallarını zorlamak için eklenmiştir. Bu öğreticide, Contoso University 'in 1 Ocak 2013 ' de yer aldığı ve bu nedenle daha önceki kayıt tarihlerinin geçerli olmadığı varsayıyoruz.

Paket Yönetimi penceresinde, Add-Migration AddEnrollmentDatekomutunu çalıştırarak bir geçiş ekleyin. Geçiş kodunun yeni tarih saat sütununu öğrenci tablosuna eklediğine dikkat edin. RangeAttribute içinde belirttiğiniz değeri eşleştirmek için, aşağıdaki vurgulanan kodda gösterildiği gibi yeni sütun için varsayılan bir değer ekleyin.

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

Değişiklerinizi geçiş dosyasına kaydedin.

Verileri yeniden temel almanız gerekmez. Bu nedenle, geçişler klasöründe Configuration.cs açın ve çekirdek yöntemindeki kodu kaldırın veya not edin. Dosyayı kaydedin ve kapatın.

Şimdi, Update-Databasekomutunu çalıştırın. Sütunun artık veritabanında var olduğunu ve var olan tüm kayıtların kayıt tarihi için varsayılan değere sahip olduğuna dikkat edin.

Kayıt tarihi için dinamik denetimler ekleme

Şimdi kayıt tarihini görüntüleme ve düzenlemeyle ilgili denetimler ekleyeceksiniz. Bu noktada, değer bir metin kutusuyla düzenlenir. Öğreticide daha sonra, metin kutusunu JQuery DatePicker pencere öğesi olarak değiştirirsiniz.

İlk olarak, Addstudent. aspx dosyasında herhangi bir değişiklik yapmanız gerekmediğini unutmayın. DynamicEntity denetimi, yeni özelliği otomatik olarak işler.

Öğrenciler. aspx' i açın ve aşağıdaki vurgulanmış kodu ekleyin.

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

Uygulamayı çalıştırın ve bir tarih yazarak kayıt tarihinin değerini ayarlayabildiğinize dikkat edin. Yeni öğrenci eklerken:

tarihi ayarla

Ya da varolan bir değeri düzenleyebilirsiniz:

tarihi Düzenle

Çalışma tarihi yazılması, ancak sağlamak istediğiniz müşteri deneyimi olmayabilir. Sonraki bölümde, bir takvim üzerinden tarih seçmeyi etkinleştirecektir.

JQuery Kullanıcı arabirimi ile çalışmak için NuGet paketini yükler

Bu Kullanıcı arabirimi NuGet paketi, jQuery kullanıcı arabirimi Pencere öğelerinin Web uygulamanıza kolay bir şekilde tümleştirilmesini sunar. Bu paketi kullanmak için NuGet aracılığıyla yükleyemezsiniz.

SBU Kullanıcı arabirimi Ekle

Yüklediğiniz bu kullanıcı arabirimi sürümü uygulamanızdaki JQuery sürümü ile çakışabilir. Bu öğreticiye devam etmeden önce, uygulamanızı çalıştırmayı deneyin. JavaScript hatasıyla karşılaşırsanız, JQuery sürümünü bağdaştırmanız gerekir. JQuery 'in beklenen sürümünü Scripts klasörünüze (Bu öğreticiyi yazma sırasında sürüm 1.8.2) veya sitesinde ekleyebilirsiniz. Master JQuery dosyasının yolunu belirtin.

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

DateTime şablonunu DatePicker pencere öğesini içerecek şekilde özelleştirme

DatePicker pencere öğesini dinamik veri şablonuna ekleyerek bir tarih saat değerini düzenleyebilirsiniz. Pencere öğesini şablona ekleyerek, otomatik olarak yeni öğrenci ekleme ve öğrencilerin düzenlenmesine yönelik kılavuz görünümünde otomatik olarak işlenir. Tarih/saat_açın. ascx' i düzenleyin ve aşağıdaki vurgulanmış kodu ekleyin.

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

Arka plan kod dosyasında, DatePicker için en düşük ve en büyük tarihleri ayarlayacaksınız. Bu değerleri ayarlayarak, kullanıcıların geçersiz tarihlere gitmesini önleyecaksınız. Tarih saat özelliğindeki en düşük ve en yüksek değerleri, varsa DateTime özelliğinde elde edersiniz. DateTime_Edit.ascx.csaçın ve sayfa_Load yöntemine aşağıdaki vurgulanmış kodu ekleyin.

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 uygulamasını çalıştırın ve Addöğrenci sayfasına gidin. Alanlar için değerler sağlayın ve kayıt tarihi için metin kutusuna tıkladığınızda takvimin görüntülendiğini unutmayın.

Tarih Seçici

Bir tarih seçin ve Ekle' ye tıklayın. RangeAttribute, sunucuda doğrulamayı zorlar. DatePicker üzerinde minDate özelliğini ayarlayarak, istemciye doğrulama de uygularsınız. Takvim, kullanıcının minDate değerinden önceki bir tarihe gitmasına izin vermez.

Kılavuz görünümünde bir kayıt düzenlediğinizde, takvim de görüntülenir.

GridView 'da DatePicker

Sonuç

Bu öğreticide, bir JQuery pencere öğesini model bağlama kullanan bir Web formuna nasıl ekleyeceğinizi öğrendiniz.

Sonraki öğreticide, veri seçerken bir sorgu dizesi değeri kullanacaksınız.