Na obsah stránky

NForms pro ASP.NET

Aleš Roubíček | | # permalink

Do vydání kompletního frameworku Nette je ještě asi daleko, ale to nevadí. My na ASP.NET bychom z něj stejně žádný užitek neměli. Tedy vlastně, proč by ne?

Vždyť Nette je protkáno spoustou skvělých nápadů. A když jde o skvělé nápady proč je nezhmotnit že? :) Ukradl jsem Davidovo mentální bohatství a jal se implementovat NForms v C#. Jako inspirace mi sloužila skvělá přednáška o Nette frameworku. Zatím jsem ve fázi (po dvou dnech koukání na přednášku a přerušovaného psaní), kdy se formuláře hezky generují. To je tak čtvrtina úspěšné cesty, doufám.

Nahlížíme pod pokličku

Základem je něco, jako NHtml, třída HtmlElement, která se stará o generování kódu. Syntaxe částečně vychází z NHtml, ale vzhledem k rozdílnosti jazyků, jsem některé věci musel řešit odlišně. V podstatě jsem zde narážel na limity C# jako staticky typovaného jazyka.

var input = new HtmlElement(
  "input",
  new { Name = "name", Id = "nameInput", Type = InputType.Text },
  HtmlElement.SelfClosing
);

V ukázce je vytvoření elementu input včetně některých atributů. Atributy se předávají pomocí vlastností anonymní třídy. Vygenerovaný kód vypadá následovně:

<input name="name" id="nameInput" type="Text" />

Další vlastnosti lze nastavovat přes indexer následujícím způsobem:

input["MaxLength"] = 25;

Dále pak má metody pro přidávání potomků, nastavování textu nebo HTML, přidávání/odebírání CSS třídy a samotné renderování.

Na tomto základě pak vyrůstá formulářová nadstavba. Snažil jsem se co nejvíce přiblížit API PHPčkovému vzoru, ale práce je v tomto směru velice těžká. Zlatej Microsoft a OpenXML ;) Vzorem je pár zachycených řádků na přednášce (David pekelně rychle mačká PgDown/PgUp) a vlastní fantazie ohledně zbytku.

No prozatím jsem se dostal do následujícího stavu. Následná akce řadiče:

[ControllerAction]
public void Index() {
  var genres = new ListItem[] {
    new ListItem { Text = "muž", Value = 1 },
    new ListItem { Text = "žena", Value = 2 }
  };

  Form form = new Form();
  form.AddText("name", "Jméno:", 20, 50);
  form.AddText("email", "E-mail", 20, 255);
  form.AddHidden("skryte").SetValue("nějaká hodnota - skrytá");
  form.AddRadio("pohlavi", "Pohlaví:", genres);
  form.AddButton("submit", "Odeslat");
  Form = form;
  RenderView("Index");
}

ve spojení se šablonou v pohledu:

<form method="post" action="">
<div style="display:none"><%=Form["skryte"].Control %></div>
<fieldset>
  <legend>Osobní údaje</legend>
<table>
<tr>
  <td><%=Form["name"].Label %></td>
  <td><%=Form["name"].Control %></td>
</tr>
<tr>
  <td><%=Form["email"].Label %></td>
  <td><%=Form["email"].Control %></td>
</tr>
<tr>
  <td><%=Form["pohlavi"].Label %></td>
  <td><%=Form["pohlavi"].Control %></td>
</tr>
<tr>
  <td></td>
  <td><%=Form["submit"].Control %></td>
</tr>
</table>
</fieldset>
</form>

Vygeneruje následující kód:

<form method="post" action="">
<div style="display:none">
<input name="skryte" type="Hidden" value="nějaká hodnota - skrytá" />
</div>
<fieldset>
  <legend>Osobní údaje</legend>
<table>
<tr>
  <td><label for="name">Jméno:</label></td>
  <td><input name="name" id="name" type="Text" size="20" maxlength="50" /></td>
</tr>
<tr>
  <td><label for="email">E-mail</label></td>
  <td><input name="email" id="email" type="Text" size="20" maxlength="255" /></td>
</tr>
<tr>
  <td><label>Pohlaví:</label></td>
  <td>
    <input name="pohlavi" id="pohlavi0" type="Radio" value="1" />
    <label for="pohlavi0">muž</label><br />
    <input name="pohlavi" id="pohlavi1" type="Radio" value="2" />
    <label for="pohlavi1">žena</label><br />
  </td>
</tr>
<tr>
  <td></td>
  <td><input name="submit" type="Button" value="Odeslat" /></td>
</tr>
</table>
</fieldset>
</form>

A to je zatím vše. A proč to vlastně dělám a nepokračuju v seriálu o Gryphoonu? Inu, vlastně pokračuju, pokračuju…

Tagy: , ,

Našli jste v článku chybu? Máte námět na reportáž? Založte mi ticket.

Reakce v síti

Líbilo se

  • Načítají se data…

Přeposláno dál

  • Načítají se data…

Komentáře

Okomentováno