Použití překryvných kalendářů Datepicker uživatelského rozhraní HTML5 a jQuery s ASP.NET MVC – část 4

Článek
06/16/2023

V tomto kurzu se naučíte základy práce se šablonami editoru, šablonami zobrazení a místním kalendářem datepicker uživatelského rozhraní jQuery ve webové aplikaci ASP.NET MVC.

Přidání šablony pro úpravy kalendářních dat

V této části vytvoříte šablonu pro úpravy kalendářních dat, která se použije, když ASP.NET MVC zobrazí uživatelské rozhraní pro úpravy vlastností modelu, které jsou označené výčtem date atributu DataType . Šablona vykreslí pouze datum; čas se nezobrazí. V šabloně použijete místní kalendář Datepicker uživatelského rozhraní jQuery , který vám umožní upravit data.

Začněte tím, že otevřete soubor Movie.cs a přidáte do vlastnosti atribut DataType s výčtem ReleaseDatedate, jak je znázorněno v následujícím kódu:

[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }

Tento kód způsobí, že ReleaseDate pole se zobrazí bez času v šablonách zobrazení i v šablonách pro úpravy. Pokud vaše aplikace obsahuje šablonu date.cshtml ve složce Views\Shared\EditorTemplates nebo ve složce Views\Movies\EditorTemplates , použije se tato šablona k vykreslení jakékoli DateTime vlastnosti při úpravách. V opačném případě předdefinovaný systém šablon ASP.NET zobrazí vlastnost jako datum.

Stiskněte klávesy CTRL+F5 a spusťte aplikaci. Vyberte odkaz pro úpravy a ověřte, že se ve vstupním poli pro datum vydání zobrazuje jenom datum.

V Průzkumník řešení rozbalte složku Zobrazení, rozbalte složku Sdílené a potom klikněte pravým tlačítkem na složku Views\Shared\EditorTemplates.

Klikněte na Přidat a pak klikněte na Zobrazení. Zobrazí se dialogové okno Přidat zobrazení .

Do pole Název zobrazení zadejte "Datum".

Zaškrtněte políčko Vytvořit jako částečné zobrazení . Ujistěte se, že nejsou zaškrtnutá políčka Použít rozložení nebo stránku předlohy a Vytvořit zobrazení silného typu .

Klikněte na Přidat. Vytvoří se šablona Views\Shared\EditorTemplates\Date.cshtml .

Do šablony Views\Shared\EditorTemplates\Date.cshtml přidejte následující kód.

@model DateTime
Using Date Template
@Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()),
  new { @class = "datefield", type = "date"  })

První řádek deklaruje model jako DateTime typ. I když nemusíte deklarovat typ modelu v šablonách pro úpravy a zobrazení, je to osvědčený postup, abyste získali kontrolu modelu předávaného do zobrazení v době kompilace. (Další výhodou je, že pak získáte IntelliSense pro model v zobrazení v sadě Visual Studio.) Pokud typ modelu není deklarován, ASP.NET MVC ho považuje za dynamický typ a nedochází k žádné kontrole typů v době kompilace. Pokud deklarujete model jako DateTime typ, stane se silným typem.

Druhý řádek je jen literálový kód HTML, který před polem s datem zobrazí text "Using Date Template" (Using Date Template). Tento řádek dočasně použijete k ověření, že se tato šablona data používá.

Další řádek je pomocník Html.TextBox , který vykreslí input pole, které je textovým polem. Třetí parametr pomocné rutiny používá anonymní typ k nastavení třídy textového pole na datefield a typ na date. (Vzhledem k tomu, že class je v jazyce C# vyhrazený znak, musíte použít @ znak k řídicímu znaku class atributu v analyzátoru jazyka C#.)

Typ date je vstupní typ HTML5, který umožňuje prohlížečům s podporou HTML5 vykreslit ovládací prvek kalendáře HTML5. Později přidáte JavaScript pro připojení jQuery datepicker k elementu Html.TextBoxdatefield pomocí třídy .

Stiskněte klávesy CTRL+F5 a spusťte aplikaci. Můžete ověřit, že ReleaseDate vlastnost v zobrazení pro úpravy používá šablonu pro úpravy, protože šablona zobrazuje text "Using Date Template" těsně před textovým vstupním ReleaseDate polem, jak je znázorněno na tomto obrázku:

V prohlížeči zobrazte zdroj stránky. (Například klikněte pravým tlačítkem na stránku a vyberte Zobrazit zdroj.) Následující příklad ukazuje některé značky pro stránku, které ilustrují class atributy a type ve vykreslení HTML.

<input class="datefield" data-val="true" data-val-required="Date is required" 
      id="ReleaseDate" name="ReleaseDate" type="date" value="1/11/1989" />

Vraťte se k šabloně Views\Shared\EditorTemplates\Date.cshtml a odeberte značku Using Date Template (Using Date Template). Dokončená šablona teď vypadá takto:

@model DateTime
@Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()),
  new { @class = "datefield", type = "date" })

V této části přidáte automaticky otevíraný kalendář datepicker uživatelského rozhraní jQuery do šablony pro úpravy data. Knihovna uživatelského rozhraní jQuery poskytuje podporu pro animace, pokročilé efekty a přizpůsobitelné widgety. Je postavená na knihovně jQuery JavaScript. Automaticky otevíraný kalendář datepicker usnadňuje a přirozeně zadává data pomocí kalendáře místo zadávání řetězce. Automaticky otevíraný kalendář také omezuje uživatele na kalendářní data – běžný text pro datum by vám umožnil zadat něco jako 2/33/1999 ( 33. února 1999), ale místní kalendář datepicker uživatelského rozhraní jQuery to neumožňuje.

Nejprve musíte nainstalovat knihovny uživatelského rozhraní jQuery. K tomu použijete NuGet, což je správce balíčků, který je součástí sp1 verzí sady Visual Studio 2010 a Visual Web Developer.

Ve Visual Web Developeru vyberte v nabídce Nástrojesprávce balíčků NuGet a pak vyberte Spravovat balíčky NuGet.

Poznámka: Pokud se v nabídce Nástroje nezobrazuje příkaz Správce balíčků NuGet , musíte NuGet nainstalovat podle pokynů na stránce Instalace NuGetu na webu NuGet.

Pokud místo sady Visual Web Developer používáte Visual Studio, v nabídce Nástroje vyberte Správce balíčků NuGet a pak vyberte Přidat odkaz na balíček knihovny.

V dialogovém okně MVCMovie – Správa balíčků NuGet klikněte na levé straně na kartu Online a do vyhledávacího pole zadejte jQuery.UI. Vyberte j Query UI Widgets:Datepicker a pak vyberte tlačítko Nainstalovat .

NuGet přidá do projektu tyto ladicí a minifikované verze jádra uživatelského rozhraní jQuery a nástroj pro výběr data uživatelského rozhraní jQuery:

jquery.ui.core.js
jquery.ui.core.min.js
jquery.ui.datepicker.js
jquery.ui.datepicker.min.js

Poznámka: Ladicí verze (soubory bez přípony .min.js ) jsou užitečné pro ladění, ale v produkční lokalitě byste zahrnuli pouze minifikované verze.

Pokud chcete skutečně použít výběr data jQuery, musíte vytvořit skript jQuery, který připojí widget kalendáře k šabloně pro úpravy. V Průzkumník řešení klikněte pravým tlačítkem na složku Scripts (Skripty) a vyberte Add (Přidat), New Item (Nová položka) a potom JScript File (Soubor JScript). Pojmenujte soubor DatePickerReady.js.

Do souboruDatePickerReady.js přidejte následující kód:

$(function () {
    $(".datefield").datepicker(); 
});

Pokud jQuery neznáte, tady je stručný popis toho, k čemu slouží: první řádek je funkce "jQuery ready", která se volá, když se načtou všechny prvky DOM na stránce. Druhý řádek vybere všechny prvky DOM, které mají název datefieldtřídy , a pak pro každý z nich vyvolá datepicker funkci . (Nezapomeňte, že jste dříve v tomto kurzu přidali datefield třídu do šablony Views\Shared\EditorTemplates\Date.cshtml .)

Pak otevřete soubor Views\Shared\_Layout.cshtml . Musíte přidat odkazy na následující soubory, které jsou všechny potřebné, abyste mohli použít výběr data:

Content/themes/base/jquery.ui.core.css
Content/themes/base/jquery.ui.datepicker.css
Content/themes/base/jquery.ui.theme.css
jquery.ui.core.min.js
jquery.ui.datepicker.min.js
DatePickerReady.js

Následující příklad ukazuje skutečný kód, který byste měli přidat v dolní části elementu head v souboru Views\Shared\_Layout.cshtml .

<link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
        rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
        rel="stylesheet"  type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
        rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/DatePickerReady.js")" 
        type="text/javascript"></script>

Kompletní head část je zobrazená tady:

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" 
        rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" 
        type="text/javascript"></script>

    <link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
        rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
        rel="stylesheet"  type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
        rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/DatePickerReady.js")" 
        type="text/javascript"></script>
</head>

Pomocná metoda obsahu adresy URL převede cestu k prostředku na absolutní cestu. Pokud je aplikace spuštěná ve službě IIS, musíte použít @URL.Content ke správnému odkazu na tyto prostředky.

Stiskněte klávesy CTRL+F5 a spusťte aplikaci. Vyberte odkaz pro úpravy a pak umístěte kurzor do pole ReleaseDate . Zobrazí se místní kalendář uživatelského rozhraní jQuery.

Stejně jako většina ovládacích prvků jQuery umožňuje datepicker ho výrazně přizpůsobit. Informace najdete v tématu Vizuální přizpůsobení: Návrh motivu uživatelského rozhraní jQuery na webu uživatelského rozhraní jQuery .

Podpora html5 date input control

Vzhledem k tomu, že HTML5 podporuje více prohlížečů, budete chtít použít nativní vstup HTML5, například date element input, a nepoužívat kalendář uživatelského rozhraní jQuery. Do aplikace můžete přidat logiku, která automaticky použije ovládací prvky HTML5, pokud je prohlížeč podporuje. Chcete-li to provést, nahraďte obsah souboruDatePickerReady.js následujícím kódem:

if (!Modernizr.inputtypes.date) {
    $(function () {
        $(".datefield").datepicker();
    });
}

První řádek tohoto skriptu používá aplikaci Modernizr k ověření, zda je podporován vstup data HTML5. Pokud se nepodporuje, nástroj pro výběr data v uživatelském rozhraní jQuery se místo toho připojí. (Modernr je opensourcová javascriptová knihovna, která zjišťuje dostupnost nativních implementací HTML5 a CSS3. Modernizace je součástí všech nových projektů ASP.NET MVC, které vytvoříte.)

Po provedení této změny ji můžete otestovat v prohlížeči, který podporuje HTML5, například Opera 11. Spusťte aplikaci v prohlížeči kompatibilním s HTML5 a upravte záznam filmu. Ovládací prvek data HTML5 se používá místo automaticky otevíraného kalendáře uživatelského rozhraní jQuery:

Vzhledem k tomu, že nové verze prohlížečů implementují HTML5 přírůstkově, je prozatím dobrým přístupem přidat na web kód, který bude vyhovovat široké škále podpory HTML5. Níže je například zobrazen robustnější DatePickerReady.js skript, který umožňuje vašemu webu podporovat prohlížeče, které ovládací prvek data HTML5 podporují jenom částečně.

if (!Modernizr.inputtypes.date) {
    $(function () {
        $("input[type='date']")
                    .datepicker()
                    .get(0)
                    .setAttribute("type", "text");
    })
}

Tento skript vybere prvky HTML5 input typu date , které plně nepodporují ovládací prvek data HTML5. Pro tyto prvky připojí automaticky otevíraný kalendář uživatelského rozhraní jQuery a potom změní type atribut z date na text. Změnou atributu type z date na textse eliminuje částečná podpora data HTML5. Ještě robustnější skriptDatePickerReady.js najdete v JSFIDDLE.

Přidání dat s možnou hodnotou null do šablon

Pokud použijete některou z existujících šablon kalendářních dat a předáte datum s hodnotou null, zobrazí se chyba za běhu. Aby byly šablony kalendářních dat robustnější, změníte je tak, aby zpracovávaly hodnoty null. Pokud chcete podporovat kalendářní data s možnou hodnotou null, změňte kód v souboru Views\Shared\DisplayTemplates\DateTime.cshtml na následující:

@model Nullable<DateTime>
@(Model != null ? string.Format("{0:d}", Model) : string.Empty)

Kód vrátí prázdný řetězec, pokud má model hodnotu null.

Změňte kód v souboru Views\Shared\EditorTemplates\Date.cshtml na následující:

@model Nullable<DateTime>

 @{
    DateTime dt = DateTime.Now;
    if (Model != null)
    {
       dt  = (System.DateTime) Model;
   
    }
    @Html.TextBox("", String.Format("{0:d}", dt.ToShortDateString()), new { @class = "datefield", type = "date"  })
}

Pokud při spuštění tohoto kódu není hodnota null, použije se DateTime hodnota modelu. Pokud má model hodnotu null, použije se místo toho aktuální datum.

Wrapup

Tento kurz se zabývá základy ASP.NET pomocných rutin a ukazuje, jak používat automaticky otevíraný kalendář jQuery UI datepicker v aplikaci ASP.NET MVC. Další informace najdete v těchto zdrojích informací:

Informace o uživatelském rozhraní jQuery najdete v tématu uživatelské rozhraní jQuery.
Informace o tom, jak lokalizovat ovládací prvek datepicker, najdete v tématu UI/Datepicker/Localization.
Další informace o šablonách ASP.NET MVC najdete v sérii blogů Brada Wilsona o šablonách ASP.NET MVC 2. I když byla řada napsána pro ASP.NET MVC 2, materiál stále platí pro aktuální verzi ASP.NET MVC.

Předchozí

Sdílet prostřednictvím

Přidání šablony pro úpravy kalendářních dat

Podpora html5 date input control

Přidání dat s možnou hodnotou null do šablon

Wrapup

Váš názor

Další materiály

Sdílet prostřednictvím

Použití překryvných kalendářů Datepicker uživatelského rozhraní HTML5 a jQuery s ASP.NET MVC – část 4

Přidání šablony pro úpravy kalendářních dat

Přidání překryvého kalendáře Datepicker uživatelského rozhraní jQuery pomocí NuGetu

Podpora html5 date input control

Přidání dat s možnou hodnotou null do šablon

Wrapup

Váš názor

Další materiály