JQuery UI DatePicker model bağlama ve Web formlarıyla tümleştirmeIntegrating JQuery UI Datepicker with model binding and web forms

Tom FitzMacken tarafındanby Tom FitzMacken

Bu öğretici serisi, model bağlamayı bir ASP.NET Web Forms projesiyle kullanmanın temel yönlerini gösterir.This tutorial series demonstrates basic aspects of using model binding with an ASP.NET Web Forms project. Model bağlama veri kaynağı nesneleriyle (örneğin, ObjectDataSource veya SqlDataSource) çok daha basit hale getirir.Model binding makes data interaction more straight-forward than dealing with data source objects (such as ObjectDataSource or SqlDataSource). Bu seri giriş malzemesiyle başlar ve sonraki öğreticilerde daha gelişmiş kavramlara gider.This series starts with introductory material and moves to more advanced concepts in later tutorials.

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.This tutorial shows how to add the JQuery UI Datepicker widget to a Web Form, and use model binding to update the database with the selected value.

Bu öğreticide, serinin Birinci ve ikinci bölümlerinde oluşturulan projede derleme yapılır.This tutorial builds on the project created in the first and second parts of the series.

Tüm projeyi C# veya vb 'ye indirebilirsiniz.You can download the complete project in C# or VB. İndirilebilir kod, Visual Studio 2012 veya Visual Studio 2013 ile birlikte kullanılabilir.The downloadable code works with either Visual Studio 2012 or Visual Studio 2013. Bu öğreticide gösterilen Visual Studio 2013 şablonundan biraz farklı olan Visual Studio 2012 şablonunu kullanır.It uses the Visual Studio 2012 template, which is slightly different than the Visual Studio 2013 template shown in this tutorial.

Ne oluşturacağız?What you'll build

Bu öğreticide şunları yapmanız gerekir:In this tutorial, you'll:

  1. Öğrencinin kayıt tarihini kaydetmek için modelinize bir özellik ekleyinAdd a property to your model to record the student's enrollment date
  2. Kullanıcının JQuery Kullanıcı arabirimi DatePicker pencere öğesini kullanarak kayıt tarihini seçmesini sağlamaEnable the user to select the enrollment date using the JQuery UI Datepicker widget
  3. Kayıt tarihi için doğrulama kurallarını zorlaEnforce validation rules for the enrollment date

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.The JQuery UI Datepicker widget enables users to easily select a date from a calendar that pops up when the user interacts with the field. Bu pencere öğesinin kullanılması, kullanıcıların el ile tarih yazmakla daha kullanışlı olabilir.Using this widget can be more convenient for users than manually typing a date. DatePicker pencere öğesini, veri işlemleri için model bağlama kullanan bir sayfayla tümleştirmek yalnızca az miktarda ek iş gerektirir.Integrating the Datepicker widget into a page that uses model binding for data operations requires only a small amount of additional work.

Modele yeni bir özellik ekleyinAdd a new property to the model

İlk olarak, öğrenci modelinize bir DateTime özelliği ekleyecek ve bu değişikliği veritabanına geçirecaksınız.First, you will add a Datetime property to your Student model and migrate that change to the database. UniversityModels.cs' yi açın ve vurgulanan kodu öğrenci modeline ekleyin.Open UniversityModels.cs, and add the highlighted code to the Student model.

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.The RangeAttribute is included to enforce validation rules for the property. Bu öğreticide, Contoso University 'in 1 Ocak 2013 ' de yer aldığı ve bu nedenle daha önceki kayıt tarihlerinin geçerli olmadığı varsayıyoruz.For this tutorial, we will assume that Contoso University was founded on January 1st, 2013 and therefore earlier enrollment dates are not valid.

Paket Yönetimi penceresinde, Add-Migration AddEnrollmentDatekomutunu çalıştırarak bir geçiş ekleyin.In the Package Management window, add a migration by running the command add-migration AddEnrollmentDate. Geçiş kodunun yeni tarih saat sütununu öğrenci tablosuna eklediğine dikkat edin.Notice that the migration code adds the new Datetime column to the Student table. 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.To match the value you specified in the RangeAttribute, add a default value for the new column, as shown in the highlighted code below.

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.Save your change to the migration file.

Verileri yeniden temel almanız gerekmez.You do not need to seed the data again. Bu nedenle, geçişler klasöründe Configuration.cs açın ve çekirdek yöntemindeki kodu kaldırın veya not edin.Therefore, open Configuration.cs in the Migrations folder and remove or comment out the code in the Seed method. Dosyayı kaydedin ve kapatın.Save and close the file.

Şimdi, Update-Databasekomutunu çalıştırın.Now, run the command update-database. 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.Notice that the column now exists in the database and all of the existing records have the default value for EnrollmentDate.

Kayıt tarihi için dinamik denetimler eklemeAdd dynamic controls for enrollment date

Şimdi kayıt tarihini görüntüleme ve düzenlemeyle ilgili denetimler ekleyeceksiniz.You will now add controls for displaying and editing the enrollment date. Bu noktada, değer bir metin kutusuyla düzenlenir.At this point, the value is edited through a text box. Öğreticide daha sonra, metin kutusunu JQuery DatePicker pencere öğesi olarak değiştirirsiniz.Later in the tutorial, you will change the text box to the JQuery Datepicker widget.

İlk olarak, Addstudent. aspx dosyasında herhangi bir değişiklik yapmanız gerekmediğini unutmayın.First, it is important to note that you do not need to make any change to the AddStudent.aspx file. DynamicEntity denetimi, yeni özelliği otomatik olarak işler.The DynamicEntity control will automatically render the new property.

Öğrenciler. aspx' i açın ve aşağıdaki vurgulanmış kodu ekleyin.Open Students.aspx, and add the following highlighted code.

<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.Run the application and notice that you can set the value of the enrollment date by typing a date. Yeni öğrenci eklerken:When adding a new student:

tarihi ayarla

Ya da varolan bir değeri düzenleyebilirsiniz:Or, editing an existing value:

tarihi Düzenle

Çalışma tarihi yazılması, ancak sağlamak istediğiniz müşteri deneyimi olmayabilir.Typing the date works, but it might not be the customer experience you wish to provide. Sonraki bölümde, bir takvim üzerinden tarih seçmeyi etkinleştirecektir.In the next section, you will enable selecting a date through a calendar.

JQuery Kullanıcı arabirimi ile çalışmak için NuGet paketini yüklerInstall NuGet package to work with JQuery UI

Bu Kullanıcı arabirimi NuGet paketi, jQuery kullanıcı arabirimi Pencere öğelerinin Web uygulamanıza kolay bir şekilde tümleştirilmesini sunar.The Juice UI NuGet package enables easy integration of the JQuery UI widgets into your web application. Bu paketi kullanmak için NuGet aracılığıyla yükleyemezsiniz.To use this package, install it through NuGet.

SBU Kullanıcı arabirimi Ekle

Yüklediğiniz bu kullanıcı arabirimi sürümü uygulamanızdaki JQuery sürümü ile çakışabilir.The version of Juice UI that you install may conflict with the version of JQuery in your application. Bu öğreticiye devam etmeden önce, uygulamanızı çalıştırmayı deneyin.Before proceeding with this tutorial, try running your application. JavaScript hatasıyla karşılaşırsanız, JQuery sürümünü bağdaştırmanız gerekir.If you encounter a JavaScript error, you need to reconcile the JQuery version. 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.You can either add the expected version of JQuery to your Scripts folder (version 1.8.2 at time of writing this tutorial), or in Site.master specify the path to the JQuery file.

<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ştirmeCustomize DateTime template to include Datepicker widget

DatePicker pencere öğesini dinamik veri şablonuna ekleyerek bir tarih saat değerini düzenleyebilirsiniz.You will add the Datepicker widget to the dynamic data template for editing a datetime value. 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.By adding the widget to the template, it is automatically rendered in both the form for adding a new student and in the grid view for editing students. Tarih/saat_açın. ascx' i düzenleyin ve aşağıdaki vurgulanmış kodu ekleyin.Open DateTime_Edit.ascx, and add the following highlighted code.

<%@ 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.In the code-behind file, you will set the minimum and maximum dates for the DatePicker. Bu değerleri ayarlayarak, kullanıcıların geçersiz tarihlere gitmesini önleyecaksınız.By setting these values, you will prevent users from navigating to invalid dates. Tarih saat özelliğindeki en düşük ve en yüksek değerleri, varsa DateTime özelliğinde elde edersiniz.You will retrieve the minimum and maximum values from the RangeAttribute on the DateTime property, if one is provided. DateTime_Edit.ascx.csaçın ve sayfa_Load yöntemine aşağıdaki vurgulanmış kodu ekleyin.Open DateTime_Edit.ascx.cs, and add the following highlighted code to the Page_Load method.

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.Run the web application and navigate to the AddStudent page. 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.Provide values for the fields and notice that when you click on the text box for Enrollment Date, the calendar is displayed.

Tarih Seçici

Bir tarih seçin ve Ekle' ye tıklayın.Pick a date, and click Insert. RangeAttribute, sunucuda doğrulamayı zorlar.The RangeAttribute enforces validation on the server. DatePicker üzerinde minDate özelliğini ayarlayarak, istemciye doğrulama de uygularsınız.By setting the minDate property on the Datepicker, you also apply validation on the client. Takvim, kullanıcının minDate değerinden önceki bir tarihe gitmasına izin vermez.The calendar does not let the user navigate to a date prior to the value of minDate.

Kılavuz görünümünde bir kayıt düzenlediğinizde, takvim de görüntülenir.When you edit a record in the grid view, the calendar is also displayed.

GridView 'da DatePicker

SonuçConclusion

Bu öğreticide, bir JQuery pencere öğesini model bağlama kullanan bir Web formuna nasıl ekleyeceğinizi öğrendiniz.In this tutorial, you learned how to incorporate a JQuery widget into a web form that uses model binding.

Sonraki öğreticide, veri seçerken bir sorgu dizesi değeri kullanacaksınız.In the next tutorial, you will use a query string value when selecting data.