Tagger

Tagger is a fluid Html tag builder that supports Html creation in a compile safe and testable way.

Installation available on NuGet http://nuget.org/packages/Tagger/

Basic usages

var div = new Div()
            .Class("input-wrap")
            .Add(new Label()
                    .For("email")
                    .Text("Email Address:")
            )
            .Add(new Input()
                    .Id("email")
                    .Name("email")
                    .Class("required")
                    .AddClass("email")
            );

Call div.GetHtml() or div.ToString() to get the html output

<div class="input-wrap">
    <label for="email">Email Address:</label>
    <input type="textbox" id="email" name="email"></input>
</div>

Adding multiple tags using parameters

var div = new Div()
            .Add(
                new Span().Text("Option 1"),
                new Span().Text("Option 2"),
                new Span().Text("Option 3")
            );
<div>
    <span>Option 1</span>
    <span>Option 2</span>
    <span>Option 3</span>
</div>

Surrounding tags

var button = new Button(ButtonType.Button)
                .SurroundWith(new Form());

<form>
    <button type="button"></button>
</form>

Void tags

var tag = new HtmlTag("hr").SelfClose();

<hr />

Form elements

Some form elements have special usage

Select lists

var tag = new Select()
            .Add(
                new Option().Text("Option 1").Value("1"),
                new Option().Text("Option 2").Value("2"),
                new Option().Text("Option 3").Value("3")
            );
<select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

Select lists using KeyValuePair<string, string>

var options = new Dictionary<string, string>();
options.Add("1", "Option 1");
options.Add("2", "Option 2");
options.Add("3", "Option 3");

var tag = new Select().Add(options);

<select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

Tables

Tables follow the same basic usage, but have a couple helper methods for quick table creation.

Simple tables that only contain string text can be created like this:

var table = new Table()
    .Add(new TableRow(new TableCell("Apples"), new TableCell("Oranges")));

Shortcut method that does the same thing as the above statement:

var table = new Table()
    .AddRow("Apples", "Oranges", "Bananas");

More complex tables with headers and footers

var table = new Table()
    .Add(new TableHeader()
             .Add(new TableRow(new TableHeaderCell("Id"), new TableHeaderCell("Name"))
             )
    ).Add(new TableBody()
              .Add(new TableRow(new TableCell("1234"), new TableCell("Apples"))
              )
    ).Add(new TableFooter()
              .Add(new TableRow(new TableCell("Id"), new TableCell("Name"))
              )
    );