Použití automaticky otevíraných kalendářů Datepicker uživatelského rozhraní HTML5 a jQuery s ASP.NET MVC – část 2
V tomto kurzu se naučíte základy práce se šablonami editoru, šablonami zobrazení a místním kalendářem jQuery UI datepicker ve webové aplikaci ASP.NET MVC.
Přidání automatické šablony DateTime
V první části tohoto kurzu jste viděli, jak přidat atributy do modelu a explicitně určit formátování a jak můžete explicitně zadat šablonu, která se použije k vykreslení modelu. Například DisplayFormat atribut v následujícím kódu explicitně určuje formátování vlastnosti ReleaseDate .
[DisplayFormat(DataFormatString = "{0:d}")]
public DateTime ReleaseDate { get; set; }
V následujícím příkladu atribut DataType pomocí výčtu Date určuje, že šablona data má být použita k vykreslení modelu. Pokud v projektu není žádná šablona data, použije se předdefinovaná šablona data.
[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }
However, ASP. MVC může provádět porovnávání typů pomocí konvence-over-configuration, a to vyhledáním šablony, která odpovídá názvu typu. To vám umožní vytvořit šablonu, která automaticky formátuje data bez použití atributů nebo kódu vůbec. V této části kurzu vytvoříte šablonu, která se automaticky použije u vlastností modelu typu DateTime. Nebudete muset používat atribut ani jinou konfiguraci, abyste určili, že se má šablona použít k vykreslení všech vlastností modelu typu DateTime.
Naučíte se také, jak přizpůsobit zobrazení jednotlivých vlastností nebo dokonce jednotlivých polí.
Nejprve odebereme existující informace o formátování a zobrazíme v aplikaci úplná data.
Otevřete soubor Movie.cs a zakomentujte DataType atribut vlastnosti ReleaseDate :
// [DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }
Stiskněte klávesy CTRL+F5 a spusťte aplikaci.
Všimněte si, že ReleaseDate vlastnost teď zobrazuje datum a čas, protože to je výchozí, když nejsou k dispozici žádné informace o formátování.
Přidání stylů CSS pro testování nových šablon
Než vytvoříte šablonu pro formátování kalendářních dat, přidáte několik pravidel stylu CSS, která můžete použít na nové šablony. Ty vám pomůžou ověřit, že vykreslená stránka používá novou šablonu.
Otevřete soubor Content\Site.css a do dolní části souboru přidejte následující pravidla CSS:
/* Styles to test new editor and display templates.
----------------------------------------------------------*/
.loud-1 {
font-weight: bold;
color: Red;
}
.loud-2 {
font-size: 2.0em;
color:Green;
}
.loud-3 {
font-style: italic;
color: yellow;
background-color: blue;
}
Přidání šablon zobrazení DateTime
Teď můžete vytvořit novou šablonu. Ve složce Views\Movies vytvořte složku DisplayTemplates .
Ve složce Views\Shared vytvořte složku DisplayTemplates a složku EditorTemplates .
Šablony zobrazení ve složce Views\Shared\DisplayTemplates budou používat všechny kontrolery. Šablony zobrazení ve složce Views\Movie\DisplayTemplates bude používat pouze Movie kontroler. (Pokud se v obou složkách zobrazí šablona se stejným názvem, má šablona ve složce Views\Movie\DisplayTemplates přednost před zobrazeními vrácenými Movie kontrolerem.)
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\DisplayTemplates.
Klikněte na Přidat a potom na Zobrazit. Zobrazí se dialogové okno Přidat zobrazení .
Do pole Název zobrazení zadejte DateTime. (Tento název musíte použít, aby se shodovaly s názvem typu.)
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í se silnými typy .
Klikněte na Přidat. Šablona DateTime.cshtml je vytvořena v Views\Shared\DisplayTemplates.
Následující obrázek ukazuje složku Views v Průzkumník řešení po DateTime vytvoření šablon zobrazení a editoru.
Otevřete soubor Views\Shared\DisplayTemplates\DateTime.cshtml a přidejte následující kód, který pomocí metody String.Format formátuje vlastnost jako datum bez času. (Formát {0:d} určuje krátký formát data.)
@String.Format("{0:d}", Model.Date)
Opakováním tohoto kroku vytvořte DateTime šablonu ve složce Views\Movie\DisplayTemplates . V souboru Views\Movie\DisplayTemplates\DateTime.cshtml použijte následující kód.
<span class="loud-1">
@String.Format("{0:d}", Model.Date)
</span>
Třída loud-1 CSS způsobí, že se datum zobrazí tučně červeně. Přidali loud-1 jste třídu CSS jenom jako dočasnou míru, abyste snadno viděli, kdy se tato konkrétní šablona používá.
To, co jste udělali, jsou vytvořené a přizpůsobené šablony, které ASP.NET budou používat k zobrazení kalendářních dat. Obecnější šablona (ve složce Views\Shared\DisplayTemplates ) zobrazí jednoduché krátké datum. Šablona, která je speciálně pro Movie kontroler (ve složce Views\Movies\DisplayTemplates ), zobrazí krátké datum, které je také naformátované jako tučný červený text.
Stiskněte klávesy CTRL+F5 a spusťte aplikaci. Prohlížeč vykreslí zobrazení Index pro aplikaci.
Vlastnost ReleaseDate teď zobrazuje datum tučným červeným písmem bez času. To vám pomůže ověřit, že DateTime je pomocník šablony ve složce Views\Movies\DisplayTemplates vybrán přes pomocnou rutinu DateTime šablony ve sdílené složce (Views\Shared\DisplayTemplates).
Teď přejmenujte soubor Views\Movies\DisplayTemplates\DateTime.cshtml na Views\Movies\DisplayTemplates\LoudDateTime.cshtml.
Stiskněte klávesy CTRL+F5 a spusťte aplikaci.
Tentokrát vlastnost ReleaseDate zobrazí datum bez času a bez tučného červeného písma. To ukazuje, že šablona s názvem datového typu (v tomto případě DateTime) se automaticky používá k zobrazení všech vlastností modelu tohoto typu. Po přejmenování souboru DateTime.cshtml na LoudDateTime.cshtml ASP.NET již nenašli šablonu ve složce Views\Movies\DisplayTemplates , takže použil šablonu DateTime.cshtml ze složky *Views\Movies\Shared*.
(Při porovnávání šablony se nerozlišují velká a velká písmena, takže jste mohli vytvořit název souboru šablony s libovolnými písmeny. Například DATETIME.cshtml, datetime.cshtml a DaTeTiMe.cshtml by se shodovaly s typem DateTime .)
Kontrola: V tomto okamžiku ReleaseDate se pole zobrazuje pomocí šablony Views\Movies\DisplayTemplates\DateTime.cshtml , která zobrazuje data ve formátu krátkého data, ale jinak nepřidá žádný zvláštní formát.
Použití UIHint k zadání šablony zobrazení
Pokud má vaše webová aplikace mnoho DateTime polí a ve výchozím nastavení chcete zobrazit všechna nebo většinu z nich ve formátu pouze s datem, je vhodné použít šablonu DateTime.cshtml . Ale co když máte několik dat, ve kterých chcete zobrazit celé datum a čas? Žádný problém. Můžete vytvořit další šablonu a pomocí atributu UIHint zadat formátování pro úplné datum a čas. Tuto šablonu pak můžete použít selektivně. Můžete použít atribut UIHint na úrovni modelu nebo můžete zadat šablonu v zobrazení. V této části se dozvíte, jak pomocí atributu UIHint selektivně změnit formátování některých instancí polí s datem a časem.
Otevřete soubor Views\Movies\DisplayTemplates\LoudDateTime.cshtml a nahraďte existující kód následujícím kódem:
<span class="loud-2">
@Model.ToString()
</span>
To způsobí, že se zobrazí úplné datum a čas a přidá třídu CSS, která text zeleně a z velkého textu.
Otevřete soubor Movie.cs a přidejte do ReleaseDate vlastnosti atribut UIHint, jak je znázorněno v následujícím příkladu:
[UIHint("LoudDateTime")]
public DateTime ReleaseDate { get; set; }
To říká ASP.NET MVC, že když zobrazí ReleaseDate vlastnost (konkrétně a ne jen jakýkoli DateTime objekt), měl by použít šablonu LoudDateTime.cshtml .
Stiskněte klávesy CTRL+F5 a spusťte aplikaci.
Všimněte si, že vlastnost ReleaseDate teď zobrazuje datum a čas velkým zeleným písmem.
Vraťte se k atributu UIHint v souboru Movie.cs a zakomentujte ho, aby se nepoužila šablona LoudDateTime.cshtml . Spusťte aplikaci znovu. Datum vydání se nezobrazuje velké a zelené. Tím ověříte, že se v zobrazeních Index a Podrobnosti používá šablona Views\Shared\DisplayTemplates\DateTime.cshtml .
Jak už bylo zmíněno dříve, můžete také použít šablonu v zobrazení, které umožňuje použít šablonu na jednotlivé instance některých dat. Otevřete zobrazení Views\Movies\Details.cshtml . Přidejte "LoudDateTime" jako druhý parametr volání Html.DisplayFor pole ReleaseDate . Dokončený kód vypadá takto:
<div class="display-label">ReleaseDate</div>
<div class="display-field">
@Html.DisplayFor(model => model.ReleaseDate,"LoudDateTime")
</div>
To určuje, že LoudDateTime šablona se má použít k zobrazení vlastnosti modelu bez ohledu na to, jaké atributy jsou na model použity.
Stiskněte klávesy CTRL+F5 a spusťte aplikaci.
Ověřte, že stránka indexu filmu používá šablonu Views\Shared\DisplayTemplates\DateTime.cshtml (tučně červeně) a stránka Movie\Details používá šablonu Views\Movies\DisplayTemplates\LoudDateTime.cshtml (velká a zelená).
V další části vytvoříte šablonu pro komplexní typ.