A kontrol a létrehozása után mind mindig most is a Render függvényen belül kapja meg végleges kódját. A HtmlTextWriter osztály példányát az output nevű paraméterként kapjuk meg, így nekünk csak felhasználni kell.
protected override void Render(HtmlTextWriter output)
{
Elsőként egy címet szeretnénk megadni H1 HTML kódok között. Elsőként tegyünk egy nyitó H1 jelet a generálandó HTML kódba. Ehhez a WriteFullBeginTag függvény hívásra van szükségünk, melynek paraméterként megadjuk a H1 kódot. Majd a kívánt szöveget a Write függvénnyel beírhatjuk. Ezek után zárnunk kell a H1 kódot, melyhez a WriteEndTag függvény használható. Végül tegyünk egy sortörést a HTML kódba, mely ugyan nem kerül értelmezésre a web lapon, de a HTML kód így olvashatóbbá válik.
output.WriteFullBeginTag("h1");
output.Write("Software Online");
output.WriteEndTag("h1");
output.WriteLine();
Fenti sorok eredményeképpen az alábbi HTML kód kerül majd a web lapunkra:
Következzen most egy vízszintes elválasztó vonal, mely legyen piros színű. Ehhez a HR kódot kell a web lapra beillesztenünk, melynél stílusként megadható a piros szín. Mielőtt a HR kódot beszúrnánk, először az AddStyleAttribute függvény hívásával fel kell vennünk a szükséges stílusokat. Több stílust is megadhatunk, ha e függvényt egymás után többször meghívjuk. Első paraméterében a HtmlTextWriterStyle felsorolt típus elemei közül kell kiválasztanunk, hogy mely stílust szeretnénk használni, majd másodikként jöhet annak értéke. A megadott stílusok összegyűjtésre kerülnek, majd a RenderBeginTag függvény hívásakor a beszúrandó HTML objektumhoz hozzárendelődnek. Újabb objektum megadása esetén újra meg kell adnunk a számunkra szükséges stílusokat az AddStyleAttribute függvénnyel.
A RenderBeginTag függvény paramétereként a HtmlTextWriterTag felsorolt típusból kell kiválasztanunk, hogy melyik HTML objektum kerüljön beszúrásra. Most a HR elemet választjuk és mivel mást nem akarunk, így rögtön le is zárhatjuk a RenderEndTag függvénnyel.
output.AddStyleAttribute(HtmlTextWriterStyle.Color, "red");
output.RenderBeginTag(HtmlTextWriterTag.Hr);
output.RenderEndTag();
output.WriteLine();
Fenti sorok eredményeképpen az alábbi HTML kód kerül majd a web lapunkra:
<hr style="color:red;" />
Most következzen egy táblázat beszúrása, melynél az oszlopok és sorok számát a MaxCols és MaxRows property-ken keresztül adhatjuk meg. Kezdjük először is a TABLE kód beszúrásával, melyhez néhány stílust ismét csak megadunk az AddStyleAttribute függvényen keresztül.
output.AddStyleAttribute(HtmlTextWriterStyle.FontWeight, "bold");
output.AddStyleAttribute(HtmlTextWriterStyle.FontFamily, "verdana");
output.AddStyleAttribute(HtmlTextWriterStyle.FontSize, "10pt");
Ezek után a RenderBeginTag-el elhelyezzük a TABLE kódot, majd új sort kezdünk.
output.RenderBeginTag(HtmlTextWriterTag.Table);
output.WriteLine();
A HtmlTextWriter osztály Indent property-jén keresztül megadhatjuk, hogy a generálandó sorok mennyire legyenek vízszintesen eltolva jobbra. Ezt a szöveg behúzást használva olvashatóbbá tehetjük a generált HTML kódot.
Mivel több sor és ezen belül több oszlop is lehet, így a TR és TD kódokat ismételgetnünk kell. Ezért egy ciklust indítunk, mely annyiszor fut, ahány sort kértünk a táblázathoz.
for (int i=0; i<maxRows; i++)
{
Beillesztünk egy TR kezdő kódot, majd új sorban folytatjuk.
output.WriteFullBeginTag("tr");
output.WriteLine();
Ismét növeljük a behúzás mértékét, majd egy újabb ciklussal végigmegyünk az összes oszlopon.
output.Indent++;
for (int j=0; j<maxCols; j++)
{
Itt egy TD kód kerül elhelyezésre, melynél egy attribútumot adunk meg. Ez annyiban különbözik a stílus megadásától, hogy most a WriteAttribute függvényt kell használnunk, melynek első paramétere az attribútum neve lesz, míg a második annak értéke. Végül zárjuk a megnyitott TD parancsot egy > jel beszúrásával.
output.WriteBeginTag("td");
output.WriteAttribute("bgcolor", "#F0F0F0");
output.Write(HtmlTextWriter.TagRightChar);
Most a táblázat egy cellájában vagyunk, melybe tetszőleges szöveget írhatunk.
output.Write("[" + i.ToString("00") + "-" + j.ToString("00") + "]" );
Ezt követően zárnunk kell a cellát, vagyis a TD objektumot.
output.WriteEndTag("td");
output.WriteLine();
}
A cellák generálása után zárhatjuk a sort is a TR lezárásával.
output.Indent--;
output.WriteEndTag("tr");
output.WriteLine();
}
output.Indent--;
Végül már csak a TABLE objektum zárására van szükség és HTML táblázatunk el is készült.
output.RenderEndTag();
output.WriteLine();
}
Fenti sorok eredményeképpen az alábbi HTML kód kerül majd a web lapunkra. Az eredményen jól megfigyelhető az Indent property hatása az egyes sorok behúzására.
<table style="font-weight:bold;font-family:verdana;font-size:10pt;">
<tr>
<td bgcolor="#F0F0F0">[00-00]</td>
<td bgcolor="#F0F0F0">[00-01]</td>
<td bgcolor="#F0F0F0">[00-02]</td>
<td bgcolor="#F0F0F0">[00-03]</td>
</tr>
<tr>
<td bgcolor="#F0F0F0">[01-00]</td>
<td bgcolor="#F0F0F0">[01-01]</td>
<td bgcolor="#F0F0F0">[01-02]</td>
<td bgcolor="#F0F0F0">[01-03]</td>
</tr>
</table>