carbonrobot / tagger

Fluid Html Tag Builder in C#

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"))
              )
    );

tagger's Issues

Support templating with UL, OL

Should be able to create a template and render with data

Support templating with tables

Should be able to define a template and then render using a dictionary

Add support for html tables

Initial thoughts on fluid interface

var table = new Table()
   .AddHeader(
        new HeaderRow(
            new HeaderCol().Text("Col 1"),
            new HeaderCol().Text("Col 2")
        ),
    )
   .AddBody();

<table>
    <thead>
        <tr><th></th><th></th></tr>
    </thead>
    <tbody>
        <tr><td></td><td></td></tr>
    </tbody>
</table>

Support for rendering Open or Clase tags only

MVC's TagBuilder support the TagRenderMode in the ToString() so one can render only the opening or closing part of the HTML. This would be handy for the fluent version to. Or maybe even more generic: can I get a TagBuilder as result of fluent API? Like ToTagBuilder().

This is needed to implement a disposable HTML-Helper one can use with a using statement. Like the Html.BeginForm for example.