Optimalizace HTML v ASP.NET Web Forms

Častou výčitkou, která se na ASP.NET Web Forms snáší, je ošklivé HTML, které generují. Výčitka je to zhusta neoprávněná, protože i Web Forms umí generovat pěkné sémantické HTML, které lze snadno stylovat přes CSS. Je ale třeba správně chápat možnosti, které nám ASP.NET nabízí. V rámci tohoto článku se podíváme, jak na generování moderního HTML v ASP.NET Web Forms.

Serverové ovládací prvky v ASP.NET lze rozdělit v zásadě do čtyř skupin, podle toho, jaké je jejich určení a jaký generují výsledný HTML kód.

Nevizuální prvky: Negenerují samy o sobě HTML kód žádný a slouží jenom k propojení ostatních pvků v rámci Web Forms infrastruktury. Typickým zástupcem jsou prvky jako SqlDataSource, QueryStringParameter a podobně. Tyto prvky nás z hlediska výsledného kódu nijak nezajímají a jako takové je tedy můžeme pominout. Do této skupiny patří také prvky MultiView a View (ty jenom řídí zobrazování vnořených prvků a samy nic nekreslí) nebo Literal a Localize (ty jenom zobrazí, co jim dáme, beze změny).
Jednoduché prvky: Zpravidla představují serverovou reprezentaci jednoho HTML elementu. Typickými zástupci jsou např. Label, TextBox, Button a podobné prvky. HTML markup jednoduchých prvků je zpravidla také jednoduchý a nepředstavuje problém. S komplexními prvky hraničí třeba RadioButtonList nebo CheckBoxList. Ty už dodávají kreativity více, ale i s nimi si lze poradit.
Komplexní prvky: Generují komplexní HTML kód, který je v nich "zadrátovaný" a sice je možné jej ovlivnit, ale rozhodně ne snadno. Právě jimi generovaný markup je to, co HTML puristy pobuřuje nejčastěji. Typickými zástupci této skupiny jsou prvky jako Calendar, GridView, DetailsView, TreeView a Menu.
Šablonovací prvky: Ve své podstatě nemají žádný vlastní HTML markup (ListView a Repeater) a jenom skládají dohromady kousky HTML zadané uživatelem. Záleží tedy na tom, jaké HTML uživatel zadá do šablon. Některé prvky (jako FormView nebo Login) jednak obsahují výchozí šablony (které bývají dost hrozné) a jednak generují trochu vlastního HTML "okolo" – to ale můžeme snadno vypnout.

Základním principem .NET Frameworku je "něco za něco". Zpravidla máte na výběr z několika možností, jak nějaký úkol splnit. Některé jsou jednoduché a bezpracné (GridView), ale za jejich použití zaplatíte méně elegantním kódem a menší kontrolou nad ním. Jiné (ListView) vám sice dávají lepší kontrolu nad kódem, ale jsou na pochopení a použití náročnější a navíc se v ASP.NET objevily až později, např. ve verze 3.5 nebo 4.0.

Jak na jednoduché prvky

Jednoduché prvky mají zpravidla jednoduchý a neurážející markup. Obvykle odpovídají jednomu nebo několika málo HTML elementům. Jednoduchá převodní tabulka mezi Web Forms a HTML by mohla vypadat takto:

Web Forms	HTML
``	``; pokud je definována vlastnost AssociatedControlId, pak ``.
``	Podle vlastnosti `TextMode` buď ``, `` nebo ``.</td> </tr> <tr> <td>`<asp:RadioButton>`</td> <td>`<input type="radio">`; pokud je definována vlastnost `Text`, tak také `<label>`.</td> </tr> <tr> <td>`<asp:CheckBox>`</td> <td>`<input type="checkbox">`; pokud je definována vlastnost `Text`, tak také `<label>`.</td> </tr> <tr> <td>`<asp:Button>`</td> <td>`<input type="submit">`</td> </tr> <tr> <td>`<asp:LinkButton>`</td> <td>`<a href="…">…</a>`</td> </tr> <tr> <td>`<asp:ImageButton>`</td> <td>`<input type="image">`</td> </tr> <tr> <td>`<asp:Image>`</td> <td>`<img src="…">`</td> </tr> <tr> <td>`<asp:HyperLink>`</td> <td>`<a href="…">…</a>`</td> </tr> <tr> <td>`<asp:DropDownList>`</td> <td>`<select size="1">`</td> </tr> <tr> <td>`<asp:ListView>`</td> <td>`<select size="n">`</td> </tr> <tr> <td>`<asp:*Validator>`</td> <td>`<span>` + validační JavaScript</td> </tr> <tr> <td>`<asp:ValidationSummary>`</td> <td>Záleží na nastavení, ale obvykle `<ul>` a `<li>`.</td> </tr> </tbody></table> <p>Výše uvedené prvky nepředstavují obvykle z hlediska HTML markupu žádný problém. Generovaný HTML kód je jednoduchý, validní a přehledný. Jediná "ošklivost" jsou dlouhá a automaticky generovaná ID, která budou pojednána dále samostatně.</p> <p>Do rodiny jednoduchých prvků v zásadě patří ještě <code>CheckBoxList</code> a <code>RadioButtonList</code>. Zatímco výše zmíněné prvky <code>CheckBox</code> a <code>RadioButton</code> reprezentují jeden konkrétní ovládací prvek, tak tyto představují celou jejich kolekci. Pomocí vlastnosti <code>RepeatLayout</code> pak lze určit, jak mají být jednotlivé prvky poskládány. Výchozí hodnota – <code>Table</code> – je sice "blbuvzdorná", ale z hlediska HTML markupu nejproblematičtější. V závislosti na požadovaném vyznění je zpravidla lepší zvolit <code>Flow</code>, <code>OrderedList</code> nebo <code>UnorderedList</code>.</p> <h2 id="co-s-komplexnimi-prvky">Co s komplexními prvky</h2> <p>Komplexní prvky jsou ty, které generují rozličné divoké HTML. Platíme tím za pohodlí, které nám přinášejí. V obecné rovině je podle mého názoru dobré je nepoužívat vůbec a nahradit je jinými technikami.</p> <p>Místo <code>GridView</code> lze použít <code>ListView</code> s patřičnými šablonami. Prvek <code>DetailsView</code> lze nahradit podle okolností buď opět prvkem <code>ListView</code> a nebo <code>FormView</code>. Nenahraditelné (resp. obtížně nahraditelné) jsou tyto prvky jenom ve scénářích typu ASP.NET Dynamic Data. Tam musíme při dynamickém generování UI krásné HTML oželet a nebo použít adaptéry, o nichž bude řeč později.</p> <p>Prvek <code>Calendar</code> je dle mého soudu lepší nepoužívat vůbec a nahradit jej nějakými vyskakovacími řešeními na bází JavaScriptu – např. z jQuery UI nebo Ajax Control Toolkitu.</p> <p>Pro prvky <code>TreeView</code> a <code>Menu</code> platí v zásadě totéž. Existují pro ně civilizující adaptéry, ale obecně bych se bez nich raději obešel.</p> <h2 id="sablonovaci-prvky">Šablonovací prvky</h2> <p>Do této kategorie patří především prvky <code>Repeater</code> (ten je v ASP.NET odjakživa) a <code>ListView</code> (od verze 3.5). Tyhle prvky nedělají nic jiného, než že skládají zadaná markup za sebe (<code>Repeater</code>) a nebo do sebe (<code>ListView</code>). <code>Repeater</code> umí data jenom jednoduše zobrazovat, <code>ListView</code> je plnohodnotná komponenta, která zvládá editaci, řazení, stránkování atd. Tyto prvky samy žádný markup negenerují a výsledný kód je tedy plně v rukách programátora.</p> <p>Dále pak sem patří komponenty odvozené od prvku <code>Wizard</code>. Nejčastěji tedy prvky týkající se membershippingu: <code>Login</code>, <code>ChangePassword</code>… A konečně prvek <code>FormView</code>. Tyhle komponenty mohou fungovat v zásadě ve dvou režimech: buďto se použije nějaký jejich výchozí vzhled, nebo můžete definovat vlastní šablony. Ty vestavěné bývají dost hrozné. Další problém s touto rodinkou prvků spočívá v tom, že i když si definujete vlastní šablonu, tak vám okolo ní prvky vytvoří obálku v podobě ošklivé tabulky. Tomu se dá zabránit opět pomocí adaptérů a nebo, od verze 4.0, přidáním atributu <code>RenderOuterTable="false"</code>.</p> <h2 id="control-adapters">Control Adapters</h2> <p>Control adaptéry jsou technologie původně vymyšlená pro adaptivní rendering, tedy možnost měnit HTML kód podle toho, z jakého prohlížeče a zařízení uživatel přistupuje. Lze vytvořit vlastní třídu, která se pak postará o renderování, místo toho prvku samotného. Jedná se o jediný způsob, jak změnit HTML kód, který generují. Jejich smysl nicméně postupně mizí, se změnami, které přináší ASP.NET 4.0.</p> <p>Pokud se jim chcete věnovat, doporučuji nastudovat si fungování <a href="http://cssfriendly.codeplex.com/">CSS Friendly Control Adapters</a>. To je hotová sada adaptérů, původně od Microsoftu, nyní open source. Slouží k "učesání" výstupu běžných ASP.NET prvků.</p> <h2 id="zaverem">Závěrem</h2> <p>Ačkoliv je získání kontroly nad výsledným HTML kódem v případě ASP.NET Web Forms poněkud méně přímočaré, než např. v případě ASP.NET MVC, je možné. I pomocí ASP.NET Web Forms lze vytvářet stránky, které mají čistý a semanticky strukturovaný markup. Hodně tomu pomohla verze 4.0, kde se obejdeme i bez "hardcore" variant, jako jsou control adaptéry. V předchozích verzích byl přístup pravda poněkud komplikovanější.</p> </section> <section class="issues"> <header> <i class="fab fa-github"></i> Je v článku něco špatně? Chcete něco doplnit?</header> <p>Komentáře zde nenajdete, ale pokud je v článku chyba nebo k němu chcete něco věcného doplnit, můžete na GitHubu <a href="https://github.com/ridercz/Blog/issues/new?title=Optimalizace+HTML+v+ASP.NET+Web+Forms&body=https://www.altair.blog/2010/10/optimalizace-html-v-asp-net-web-forms">otevřít nový issue</a> nebo <a href="https://github.com/ridercz/Blog/edit/master/source/2010/10/optimalizace-html-v-asp-net-web-forms.md">navrhnout změnu v textu</a> a poslat mi pull request.</p> <p>Tamtéž také najdete <a href="https://github.com/ridercz/Blog/commits/master/source/2010/10/optimalizace-html-v-asp-net-web-forms.md">historii všech verzí článku</a>, pokud v něm byly provedeny nějaké změny či úpravy.</p> </section> <section class="sharing"> <span>Pošli to dál:</span> <ul> <li> <a href="https://twitter.com/intent/tweet?text=https://www.altair.blog/2010/10/optimalizace-html-v-asp-net-web-forms"> <i class="fab fa-x-twitter"></i> </a> </li> <li> <a href="https://www.facebook.com/sharer.php?u=https://www.altair.blog/2010/10/optimalizace-html-v-asp-net-web-forms"> <i class="fab fa-facebook-f"></i> </a> </li> </ul> </section> </main> <footer> <ul class="logos"> <li> <img src="/content/images/logo_onwhite.svg" alt="altair.blog" style="height:38px;" /> </li> </ul> <ul class="text"> <li> Copyright © <a href="https://www.rider.cz/">Michal Altair Valášek</a>, 2003-2024</li> <li> Powered by <a href="https://www.xml4web.com/">XML4web</a> on <a href="https://www.github.com/">GitHub Pages</a></li> <li> <i class="fal fa-rss"></i> RSS: <a href="/feed.rss">všechno</a> \| <a href="/feed-internal.rss">místní</a> \| <a href="/feed-external.rss">odkazy</a></li> </ul> </footer> </body> </html>

Web Forms

HTML

``; pokud je definována vlastnost AssociatedControlId, pak ``.

Podle vlastnosti `TextMode` buď ``, `` nebo `

`.</td>     </tr>      <tr>       <td>`<asp:RadioButton>`</td>        <td>`<input type="radio">`; pokud je definována vlastnost `Text`, tak také `<label>`.</td>     </tr>      <tr>       <td>`<asp:CheckBox>`</td>        <td>`<input type="checkbox">`; pokud je definována vlastnost `Text`, tak také `<label>`.</td>     </tr>      <tr>       <td>`<asp:Button>`</td>        <td>`<input type="submit">`</td>     </tr>      <tr>       <td>`<asp:LinkButton>`</td>        <td>`<a href="…">…</a>`</td>     </tr>      <tr>       <td>`<asp:ImageButton>`</td>        <td>`<input type="image">`</td>     </tr>      <tr>       <td>`<asp:Image>`</td>        <td>`<img src="…">`</td>     </tr>      <tr>       <td>`<asp:HyperLink>`</td>        <td>`<a href="…">…</a>`</td>     </tr>      <tr>       <td>`<asp:DropDownList>`</td>        <td>`<select size="1">`</td>     </tr>      <tr>       <td>`<asp:ListView>`</td>        <td>`<select size="n">`</td>     </tr>      <tr>       <td>`<asp:*Validator>`</td>        <td>`<span>` + validační JavaScript</td>     </tr>      <tr>       <td>`<asp:ValidationSummary>`</td>        <td>Záleží na nastavení, ale obvykle `<ul>` a `<li>`.</td>     </tr>   </tbody></table>  
<p>Výše uvedené prvky nepředstavují obvykle z hlediska HTML markupu žádný problém. Generovaný HTML kód je jednoduchý, validní a přehledný. Jediná "ošklivost" jsou dlouhá a automaticky generovaná ID, která budou pojednána dále samostatně.</p>
<p>Do rodiny jednoduchých prvků v zásadě patří ještě <code>CheckBoxList</code> a <code>RadioButtonList</code>. Zatímco výše zmíněné prvky <code>CheckBox</code> a <code>RadioButton</code> reprezentují jeden konkrétní ovládací prvek, tak tyto představují celou jejich kolekci. Pomocí vlastnosti <code>RepeatLayout</code> pak lze určit, jak mají být jednotlivé prvky poskládány. Výchozí hodnota – <code>Table</code> – je sice "blbuvzdorná", ale z hlediska HTML markupu nejproblematičtější. V závislosti na požadovaném vyznění je zpravidla lepší zvolit <code>Flow</code>, <code>OrderedList</code> nebo <code>UnorderedList</code>.</p>
<h2 id="co-s-komplexnimi-prvky">Co s komplexními prvky</h2>
<p>Komplexní prvky jsou ty, které generují rozličné divoké HTML. Platíme tím za pohodlí, které nám přinášejí. V obecné rovině je podle mého názoru dobré je nepoužívat vůbec a nahradit je jinými technikami.</p>
<p>Místo <code>GridView</code> lze použít <code>ListView</code> s patřičnými šablonami. Prvek <code>DetailsView</code> lze nahradit podle okolností buď opět prvkem <code>ListView</code> a nebo <code>FormView</code>. Nenahraditelné (resp. obtížně nahraditelné) jsou tyto prvky jenom ve scénářích typu ASP.NET Dynamic Data. Tam musíme při dynamickém generování UI krásné HTML oželet a nebo použít adaptéry, o nichž bude řeč později.</p>
<p>Prvek <code>Calendar</code> je dle mého soudu lepší nepoužívat vůbec a nahradit jej nějakými vyskakovacími řešeními na bází JavaScriptu – např. z jQuery UI nebo Ajax Control Toolkitu.</p>
<p>Pro prvky <code>TreeView</code> a <code>Menu</code> platí v zásadě totéž. Existují pro ně civilizující adaptéry, ale obecně bych se bez nich raději obešel.</p>
<h2 id="sablonovaci-prvky">Šablonovací prvky</h2>
<p>Do této kategorie patří především prvky <code>Repeater</code> (ten je v ASP.NET odjakživa) a <code>ListView</code> (od verze 3.5). Tyhle prvky nedělají nic jiného, než že skládají zadaná markup za sebe (<code>Repeater</code>) a nebo do sebe (<code>ListView</code>). <code>Repeater</code> umí data jenom jednoduše zobrazovat, <code>ListView</code> je plnohodnotná komponenta, která zvládá editaci, řazení, stránkování atd. Tyto prvky samy žádný markup negenerují a výsledný kód je tedy plně v rukách programátora.</p>
<p>Dále pak sem patří komponenty odvozené od prvku <code>Wizard</code>. Nejčastěji tedy prvky týkající se membershippingu: <code>Login</code>, <code>ChangePassword</code>… A konečně prvek <code>FormView</code>. Tyhle komponenty mohou fungovat v zásadě ve dvou režimech: buďto se použije nějaký jejich výchozí vzhled, nebo můžete definovat vlastní šablony. Ty vestavěné bývají dost hrozné. Další problém s touto rodinkou prvků spočívá v tom, že i když si definujete vlastní šablonu, tak vám okolo ní prvky vytvoří obálku v podobě ošklivé tabulky. Tomu se dá zabránit opět pomocí adaptérů a nebo, od verze 4.0, přidáním atributu <code>RenderOuterTable="false"</code>.</p>
<h2 id="control-adapters">Control Adapters</h2>
<p>Control adaptéry jsou technologie původně vymyšlená pro adaptivní rendering, tedy možnost měnit HTML kód podle toho, z jakého prohlížeče a zařízení uživatel přistupuje. Lze vytvořit vlastní třídu, která se pak postará o renderování, místo toho prvku samotného. Jedná se o jediný způsob, jak změnit HTML kód, který generují. Jejich smysl nicméně postupně mizí, se změnami, které přináší ASP.NET 4.0.</p>
<p>Pokud se jim chcete věnovat, doporučuji nastudovat si fungování <a href="http://cssfriendly.codeplex.com/">CSS Friendly Control Adapters</a>. To je hotová sada adaptérů, původně od Microsoftu, nyní open source. Slouží k "učesání" výstupu běžných ASP.NET prvků.</p>
<h2 id="zaverem">Závěrem</h2>
<p>Ačkoliv je získání kontroly nad výsledným HTML kódem v případě ASP.NET Web Forms poněkud méně přímočaré, než např. v případě ASP.NET MVC, je možné. I pomocí ASP.NET Web Forms lze vytvářet stránky, které mají čistý a semanticky strukturovaný markup. Hodně tomu pomohla verze 4.0, kde se obejdeme i bez "hardcore" variant, jako jsou control adaptéry. V předchozích verzích byl přístup pravda poněkud komplikovanější.</p>

</section>
      <section class="issues">
        <header>
          <i class="fab fa-github"></i> Je v článku něco špatně? Chcete něco doplnit?</header>
        <p>Komentáře zde nenajdete, ale pokud je v článku chyba nebo k němu chcete něco věcného doplnit, můžete na GitHubu <a href="https://github.com/ridercz/Blog/issues/new?title=Optimalizace+HTML+v+ASP.NET+Web+Forms&body=https://www.altair.blog/2010/10/optimalizace-html-v-asp-net-web-forms">otevřít nový issue</a> nebo <a href="https://github.com/ridercz/Blog/edit/master/source/2010/10/optimalizace-html-v-asp-net-web-forms.md">navrhnout změnu v textu</a> a poslat mi pull request.</p>
        <p>Tamtéž také najdete <a href="https://github.com/ridercz/Blog/commits/master/source/2010/10/optimalizace-html-v-asp-net-web-forms.md">historii všech verzí článku</a>, pokud v něm byly provedeny nějaké změny či úpravy.</p>
      </section>
      <section class="sharing">
        <span>Pošli to dál:</span>
        <ul>
          <li>
            <a href="https://twitter.com/intent/tweet?text=https://www.altair.blog/2010/10/optimalizace-html-v-asp-net-web-forms">
              <i class="fab fa-x-twitter"></i>
            </a>
          </li>
          <li>
            <a href="https://www.facebook.com/sharer.php?u=https://www.altair.blog/2010/10/optimalizace-html-v-asp-net-web-forms">
              <i class="fab fa-facebook-f"></i>
            </a>
          </li>
        </ul>
      </section>
    </main>
    <footer>
      <ul class="logos">
        <li>
          <img src="/content/images/logo_onwhite.svg" alt="altair.blog" style="height:38px;" />
        </li>
      </ul>
      <ul class="text">
        <li>
          Copyright © <a href="https://www.rider.cz/">Michal Altair Valášek</a>, 2003-2024</li>
        <li>
          Powered by <a href="https://www.xml4web.com/">XML4web</a> on <a href="https://www.github.com/">GitHub Pages</a></li>
        <li>
          <i class="fal fa-rss"></i> RSS: <a href="/feed.rss">všechno</a> | <a href="/feed-internal.rss">místní</a> | <a href="/feed-external.rss">odkazy</a></li>
      </ul>
    </footer>
  </body>
</html>