Dnes pár poznámek a tipů, které jsem nasbíral při vývoji nové web aplikace v ASP.NET 4.5. Aplikace využívá technologie ASP.NET WebForms, HTML 5, jQuery, jQuery.UI, bootstrap a Bundling & minification(AspNet.Web.Optimization), o kterých bude řeč.
HTML 5
Pokud dnes založíme ve Visual Studiu nový webový projekt nebo pouze webovou stránku, je už předem předpokládáno, že stránka bude v HTML 5. To je mimo jiné dáno tímto nastavením doctype:
<!DOCTYPE html>
A co starší browsery? Internet Explorer do verze 9 (zejména IE 7 a IE 8, které se díky Windows XP ještě nějakou dobu používat budou) neznají HTML 5 elementy (jako header, section, article, time) a tak je ignorují. Problém je v tom, že neznámé elementy ale nemohou být stylovány. Zde přichází jako záchrana JavaScript workaround (od Sjoerd Visscher) známá jako HTML5Shiv, která elementy vytváří JavaScriptem. Do stránky můžeme HTML5Shiv přidat například tímto kódem:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Lepší je ale používat Modernizr. Jedná se o novější JavaScriptovou knihovnu, která v první řadě slouží pro detekci, zda je ta či ona funkce renderovacím enginem daného prohlížeče podporována. Při práci s HTML je totiž v dnešní době daleko lepší detekovat jednotlivé featury (Feature detection) než jednotlivé prohlížeče (jak se to dělalo dříve pomoci user agent). No a při zavedení knihovny Modernizr je zároveň zavedena i podpora založená na HTML5Shiv a některé další funkčnosti (Polyfill, YepNope.js).
Modernizr lze přidat do hlavičky master page následujícím kódem:
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
Webový ASP.NET projekt založený z některé výchozí šablony ve VS již má Modernizr obsažen (nebo lze přidat pomoci NuGet balíčku, PM> Install-Package Modernizr), proto můžeme HTML 5 používat.
Unobtrusive Validation
Od ASP.NET WebForms 4.5 je změněno výstupní renderování validátorů. Nazývá se Unobtrusive Validation a používá jQuery a HTML 5 atributy data-. V projektu je tedy nutné mít přidáno jQuery a to jako script definici s názvem jquery. Taková definice může vypadat takto:
string str = "1.10.1";
var definition = new ScriptResourceDefinition
{
Path = "~/Scripts/jquery-" + str + ".min.js",
DebugPath = "~/Scripts/jquery-" + str + ".js",
CdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-" + str + ".min.js",
CdnDebugPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-" + str + ".js",
CdnSupportsSecureConnection = true,
LoadSuccessExpression = "window.jQuery"
};
ScriptManager.ScriptResourceMapping.AddDefinition("jquery", definition);
V ASP.NET výchozí šabloně tuto definici nenajdete, tam je to zařízeno pomoci NuGet balíčku AspNet.ScriptManager.jQuery (PM> Install-Package AspNet.ScriptManager.jQuery), který tuto definici zaregistruje.
Pokud by v projektu jQuery nebylo, dostaneme chybu:
WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for ‘jquery’. Please add a ScriptResourceMapping named jquery (case-sensitive).
Pro úplnost uvedu, že je případně možné funkci Unobtrusive Validation vypnout (například pokud bychom jQuery do naší aplikace přidávat nechtěli). Můžeme to udělat pomoci kódu:
System.Web.UI.ValidationSettings.UnobtrusiveValidationMode = System.Web.UI.UnobtrusiveValidationMode.None;
nebo pomoci Web.config v sekci App Settings:
<appSettings>
<add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />
</appSettings>
Výchozí je hodnota System.Web.UI.UnobtrusiveValidationMode.WebForms (zapnuto). Více o Unobtrusive Validation je možné najít v článku Data Validation.
JavaScripty a Bundling & minification
Pokud chceme pracovat s JavaScripty v ASP.NET 4.5 aplikaci s využití Bundling & minification, nabízejí se nám tyto dva scénáře:
1) Pokud se jedná o scripty známých knihoven, tak existují již připravené zdroje jak plné debug verze tak I minifikované min verze. V takovém případě je nejlepší použít script definici a knihovnu zaregistrovat do komponenty ScriptManager. Příkladem může být výše popsaná definice pro knihovnu jQuery. ScriptManager zajistí natažení rozdílné verze pro debug a pro release (minifikovaná). Pokud dále zapneme vlastnost EnableCdn="true", budou scripty nataženy z veřejného CDN zdroje, navíc díky vylepšení v .NET 4.5 i s fallbackem na lokální scripty (výchozí hodnota vlastnosti EnableCdnFallback="true"), více zde.
2) Druhý scénář se týká custom scriptů, které do aplikace přidáváme. Zde není nutné udržovat soubor minifikované min verze (i když i to Visual Studio podporuje), a také většinou nemáme svojí CDN. Zde je tedy zbytečné vytvářet script definici, místo toho využijeme JavaScript Bundle. Bundle nám navíc spojí všechny scripty do jednoho souboru.
bundles.Add(new ScriptBundle("~/bundles/AppJs").Include(
"~/Scripts/App/*.js"));
Tento bundle pak použijeme například v master page následujícím způsobem:
<%: Scripts.Render("~/bundles/AppJs") %>
Důvod proč používám Scripts.Render a ne ScriptManager je ten, že Scripts.Render nám zajistí, že pro debug se použijí scripty přímo tak jak jsou v projektu a půjdou tak přes Visual Studio bez problémů ladit. Až v případě release se scripty automaticky minifikují a spojí do jednoho souboru (kdyžto při použití ScriptManageru, by se vytvořil jeden soubor bundlu i v případě debug).
CSS a Bundling
Závěrem ještě radu k vytváření bundlu pro CSS styly. Pro jejich definici můžeme využít Bundle.config, pro vložení bundlu do stránky používáme BundleReference:
<webopt:BundleReference runat="server" Path="~/Content/css" />
Protože v CSS stylech bývají odkazy na obrázky, kde cesta k nim je relativní, je nutné při volení názvu bundlu zachovat cestu podle css souborů v něm. Tedy například pro ~/Content/Site.css můžeme zvolit ~/Content/css ale pro ~/Content/Slozka/Site.css bychom museli zvolit například ~/Content/Slozka/css atd. (více zde). Zároveň se ale také nesmí jméno zvolené pro bundle shodovat s existující složkou (tj. nesmí existovat složka ~/Content/css resp. ~/Content/Slozka/css).