Integrace funkce Datepicker uživatelského rozhraní JQuery s vazbou modelu a webovými formuláři
, autor: Tom FitzMacken
Tato série kurzů ukazuje základní aspekty použití vazby modelu s projektem ASP.NET Web Forms. Díky vazbě modelu je interakce dat jednodušší než práce s objekty zdroje dat (například ObjectDataSource nebo SqlDataSource). Tato série začíná úvodním materiálem a v dalších kurzech se přesune k pokročilejším konceptům.
V tomto kurzu se dozvíte, jak přidat widget Datepicker uživatelského rozhraní JQuery do webového formuláře a jak pomocí vazby modelu aktualizovat databázi vybranou hodnotou.
Tento kurz vychází z projektu vytvořeného v první a druhé části série.
Celý projekt si můžete stáhnout v jazyce C# nebo VB. Kód ke stažení funguje se sadou Visual Studio 2012 nebo Visual Studio 2013. Používá šablonu sady Visual Studio 2012, která se mírně liší od šablony Visual Studio 2013 uvedené v tomto kurzu.
Co vytvoříte
V tomto kurzu provedete následující:
- Přidání vlastnosti do modelu pro záznam data registrace studenta
- Povolte uživateli vybrat datum registrace pomocí widgetu Datepicker uživatelského rozhraní JQuery.
- Vynucení ověřovacích pravidel pro datum registrace
Widget Datepicker uživatelského rozhraní JQuery umožňuje uživatelům snadno vybrat datum z kalendáře, které se objeví, když uživatel s polem pracuje. Použití tohoto widgetu může být pro uživatele pohodlnější než ruční zadávání data. Integrace widgetu Datepicker do stránky, která používá vazbu modelu pro operace s daty, vyžaduje jen malé množství další práce.
Přidání nové vlastnosti do modelu
Nejprve do modelu Student přidáte vlastnost Datetime a migrujete ji do databáze. Otevřete Soubor UniversityModels.cs a přidejte zvýrazněný kód do modelu 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 je zahrnut pro vynucení ověřovacích pravidel pro vlastnost. V tomto kurzu budeme předpokládat, že univerzita Contoso byla založena 1. ledna 2013, a proto dřívější data registrace nejsou platná.
V okně Správa balíčků přidejte migraci spuštěním příkazu add-migration AddEnrollmentDate. Všimněte si, že migrační kód přidá nový sloupec Datetime do tabulky Student. Pokud chcete shodovat s hodnotou, kterou jste zadali v atributu RangeAttribute, přidejte výchozí hodnotu pro nový sloupec, jak je znázorněno ve zvýrazněných kódech níže.
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");
}
}
}
Uložte změnu do souboru migrace.
Data nemusíte znovu vysét. Proto otevřete Configuration.cs ve složce Migrations a odeberte nebo zakomentujte kód v metodě Seed . Uložte soubor a zavřete ho.
Teď spusťte příkaz update-database. Všimněte si, že sloupec teď v databázi existuje a všechny existující záznamy mají výchozí hodnotu EnrollmentDate.
Přidání dynamických ovládacích prvků pro datum registrace
Teď přidáte ovládací prvky pro zobrazení a úpravu data registrace. V tomto okamžiku se hodnota upraví prostřednictvím textového pole. Později v tomto kurzu změníte textové pole na widget JQuery Datepicker.
Nejprve je důležité si uvědomit, že v souboru AddStudent.aspx nemusíte provádět žádné změny. Ovládací prvek DynamicEntity automaticky vykresluje novou vlastnost.
Otevřete Soubor Students.aspx a přidejte následující zvýrazněný kód.
<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>
Spusťte aplikaci a všimněte si, že zadáním data můžete nastavit hodnotu data registrace. Při přidávání nového studenta:
Nebo můžete upravit existující hodnotu:
Zadání data funguje, ale nemusí to být prostředí pro zákazníky, které chcete poskytnout. V další části povolíte výběr data prostřednictvím kalendáře.
Instalace balíčku NuGet pro práci s uživatelským rozhraním JQuery
Balíček NuGet pro Juice UI umožňuje snadnou integraci widgetů uživatelského rozhraní JQuery do webové aplikace. Pokud chcete tento balíček použít, nainstalujte ho prostřednictvím NuGetu.
Verze rozhraní Juice UI, kterou nainstalujete, může být v konfliktu s verzí JQuery ve vaší aplikaci. Než budete pokračovat v tomto kurzu, zkuste aplikaci spustit. Pokud narazíte na chybu JavaScriptu, musíte odsouhlasit verzi JQuery. Můžete buď přidat očekávanou verzi JQuery do složky Scripts (verze 1.8.2 v době psaní tohoto kurzu), nebo v souboru Site.master zadat cestu k souboru JQuery.
<asp:ScriptReference Name="jquery" Path="~/Scripts/jquery-1.10.2.js" />
<asp:ScriptReference Path="~/Scripts/jquery-ui-1.9.2.js" />
Přizpůsobení šablony DateTime tak, aby zahrnovala widget Datepicker
Do šablony dynamických dat přidáte widget Datepicker pro úpravu hodnoty datetime. Po přidání widgetu do šablony se automaticky vykreslí jak ve formuláři pro přidání nového studenta, tak v zobrazení mřížky pro úpravy studentů. Otevřete DateTime_Edit.ascx a přidejte následující zvýrazněný kód.
<%@ 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" />
V souboru s kódem na pozadí nastavíte minimální a maximální datum pro DatePicker. Nastavením těchto hodnot zabráníte uživatelům v přechodu na neplatná data. Pokud je k dispozici, načtete minimální a maximální hodnoty z RangeAttribute ve vlastnosti DateTime. Otevřete DateTime_Edit.ascx.cs a do metody Page_Load přidejte následující zvýrazněný kód.
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();
}
}
Spusťte webovou aplikaci a přejděte na stránku PřidatStudent. Zadejte hodnoty polí a všimněte si, že když kliknete na textové pole Datum registrace, zobrazí se kalendář.
Vyberte datum a klikněte na Vložit. RangeAttribute vynucuje ověření na serveru. Nastavením vlastnosti minDate na datepickeru použijete ověření také u klienta. Kalendář neumožňuje uživateli přejít na datum předcházející hodnotě minDate.
Při úpravě záznamu v zobrazení mřížky se zobrazí také kalendář.
Závěr
V tomto kurzu jste zjistili, jak začlenit widget JQuery do webového formuláře, který používá vazbu modelu.
V dalším kurzu použijete při výběru dat hodnotu řetězce dotazu.