Tipy pro ASP.NET 4.5 aplikace a Bundling & minification

Jan Holan       1. 8. 2013       ASP.NET/IIS, HTTP/HTML       7488 zobrazení

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).

 

hodnocení článku

0       Hodnotit mohou jen registrované uživatelé.

 

Nový příspěvek

 

                       
Nadpis:
Antispam: Komu se občas házejí perly?
Příspěvek bude publikován pod identitou   anonym.

Nyní zakládáte pod článkem nové diskusní vlákno.
Pokud chcete reagovat na jiný příspěvek, klikněte na tlačítko "Odpovědět" u některého diskusního příspěvku.

Nyní odpovídáte na příspěvek pod článkem. Nebo chcete raději založit nové vlákno?

 

  • Administrátoři si vyhrazují právo komentáře upravovat či mazat bez udání důvodu.
    Mazány budou zejména komentáře obsahující vulgarity nebo porušující pravidla publikování.
  • Pokud nejste zaregistrováni, Vaše IP adresa bude zveřejněna. Pokud s tímto nesouhlasíte, příspěvek neodesílejte.

přihlásit pomocí externího účtu

přihlásit pomocí jména a hesla

Uživatel:  
Heslo:  

zapomenuté heslo

 

založit nový uživatelský účet

zaregistrujte se

 
zavřít

Nahlásit spam

Opravdu chcete tento příspěvek nahlásit pro porušování pravidel fóra?

Nahlásit Zrušit

Chyba

zavřít

feedback