/// <summary>
/// Creates a list of checkbox to allow the user to select multiple values. Values are posted to the server as 1,2,3 etc.
/// </summary>
/// <param name="name">The name to assign to the checkbox inputs</param>
/// <param name="items">The list of items for the list</param>
/// <param name="tabIndex">The tab index for the items</param>
/// <returns>
/// Span with the id of [name]Container that encompases the whole list.
/// A span item for each checkbox with the class checkboxContainer assigned. A [name]_chk_[i] for each checkbox input to be rendered.
/// A hidden input field for each checkbox item, when it is submitted to the server, it will be the list of values separated by commas
/// </returns>
public TagBuilder CheckboxList(string name, SelectItemList items, int tabIndex)
{
var parent = new TagBuilder("span").ID(name + "Container");
var i = 0;
foreach (var item in items.ToArray())
{
var checkboxId = name + "_chk_" + i;
var checkboxName = name + "_chk";
var hiddenId = name + i;
var hiddenName = name;
// Add item container
var checkboxContainer = parent.AddChild("span").AddClass("checkboxContainer");
// Add the radio input
checkboxContainer.AddChild("input").type("checkbox")
.Name(checkboxName)
.ID(checkboxId)
.value(item.Value)
.@checked(item.Selected)
.tabIndex(tabIndex, -1)
.onclick("jQuery('#" + hiddenId + "').val((this.checked ? $(this).val() : ''));");
// Add the hidden field that will hold the value (default the value if the item is selected)
checkboxContainer.AddChild("input").type("hidden")
.Name(hiddenName)
.ID(hiddenId)
.valueIf(item.Selected, item.Value);
// Add the radio label
checkboxContainer.AddChild("label").@for(name + i).AddClass("checkboxLabel").InnerText(item.Text);
// Make the id unique
i += 1;
}
return parent;
}
/// <summary>
/// Create a radio list
/// </summary>
/// <param name="name">Element Name</param>
/// <param name="items">Option list</param>
/// <param name="tabIndex">The tabIndex to assign to the radio item</param>
/// <returns>A TagBuilder class to continue to create the tag by adding attr classes etc.</returns>
public TagBuilder BoundRadioList(string name, SelectItem[] items, int tabIndex)
{
var parent = new TagBuilder("span").ID(name + "Container");
var i = 0;
foreach (var item in items)
{
// Add radioItem
var radioItem = parent.AddChild("span").AddClass("radioItem");
// Add the radio input
var radio = radioItem.AddChild("input").Name(name).type("radio").value(item.Value).ID(name + i).bindChecked(name);
// Set the tabIndex
if (tabIndex > -1) radio.tabIndex(tabIndex);
// Add the radio label
radioItem.AddChild("label").@for(name + i).AddClass("radioLabel").InnerText(item.Text);
// Make the id unique
i += 1;
}
return parent;
}
/// <summary>
/// Create a radio list
/// </summary>
/// <param name="name">Element Name</param>
/// <param name="items">Option list</param>
/// <param name="tabIndex">The tabIndex to assign to the radio item</param>
/// <param name="addCssClassToInput">Add a CSS class to every input created</param>
/// <param name="addCssClassToLabel">Add a css class to every label for every input</param>
/// <param name="addCssClassToRow">This will add a set of css classes to the the row contianing the the input and label</param>
/// <returns>A TagBuilder class to continue to create the tag by adding attr classes etc.</returns>
public TagBuilder RadioList(string name, SelectItemList items, int tabIndex, string addCssClassToInput, string addCssClassToLabel, string addCssClassToRow)
{
var parent = new TagBuilder("span").ID(name + "Container");
if (string.IsNullOrEmpty(addCssClassToInput)) addCssClassToInput = "";
if (string.IsNullOrEmpty(addCssClassToLabel)) addCssClassToLabel = "";
if (string.IsNullOrEmpty(addCssClassToRow)) addCssClassToRow = "";
var i = 0;
foreach (var item in items.ToArray())
{
// Add radioItem
var radioItem = parent.AddChild("span").AddClass("radioItem " + addCssClassToRow);
// Add the radio input
var radio = radioItem.AddChild("input").Name(name).type("radio").value(item.Value).ID(name + i).AddClass(addCssClassToInput);
// Mark as selected
if (item.Selected)
radio.@checked(true);
// Set the tabIndex
if (tabIndex > -1) radio.tabIndex(tabIndex);
// Add the radio label
radioItem.AddChild("label").@for(name + i).AddClass("radioLabel " + addCssClassToLabel).InnerText(item.Text);
// Make the id unique
i += 1;
}
return parent;
}
/// <summary>
/// Generates the label string (only when specified) to use for the element
/// </summary>
/// <returns></returns>
private string GetLabelString()
{
if (string.IsNullOrEmpty(_label)) return "";
var lbl = new TagBuilder("label");
if (string.IsNullOrEmpty(GetAttribute("id")) == false)
{
lbl.@for(GetAttribute("id"));
}
lbl.AddClass(string.IsNullOrEmpty(_labelclass) == false ? _labelclass : "fieldlabel");
if (string.IsNullOrEmpty(_labelWidth) == false)
{
lbl.width(_labelWidth);
}
if (_labelIsHtml)
{
lbl.InnerText(_label);
}
else
{
lbl.InnerHtml(_label);
}
return "\r\n" + lbl + "\r\n";
}
/// <summary>
/// Creates a checkbox input. It correctly deals with the issue related to the false value of a checkbox not being sent to the client
/// </summary>
/// <param name="name">The value to assign to the input as the name and id</param>
/// <param name="id">The ID to assign to the element</param>
/// <param name="value">The value of the checkbox</param>
/// <param name="cssclass">The CSS class to assign to the checkbox</param>
/// <param name="label">The label to include the checkbox</param>
/// <param name="labelCssClass">The CSS class to assign to the label</param>
/// <param name="tabIndex">The tabIndex if any to assign to the checkbox</param>
/// <returns>A string with the html for the checkbox</returns>
public string Checkbox(string name, string id, bool value, string cssclass, string label, string labelCssClass, int tabIndex)
{
var chkname = name + "_chk";
var chkid = id + "_chk";
var chk = new TagBuilder("input").Name(chkname).ID(chkid).type("checkbox");
var hdn = new TagBuilder("input").Name(name).ID(id).type("hidden");
// Figure out the value
if (value)
{
chk.@checked(true);
hdn.value("true");
}
else
{
chk.@checked(false);
hdn.value("false");
}
// Add the label
if (string.IsNullOrEmpty(label) == false)
{
if (!string.IsNullOrEmpty(labelCssClass))
chk.Label(label, labelCssClass);
else
chk.Label(label);
}
// Add the class if asked
if (string.IsNullOrEmpty(cssclass) == false)
{
chk.AddClass(cssclass);
}
if (tabIndex != 0)
{
chk.tabIndex(tabIndex);
}
// Wireup events
chk.onclick("jQuery('#" + id + "').val(this.checked);");
// Return the value
return chk.ToString() + hdn;
}
/// <summary>
/// Adds a child TagBuilder to the children tags collection and returns the newaly added child.
/// This is useful when calling render on the parent to make sure that it renders all of it's
/// children as well
/// </summary>
/// <param name="child">The TagBuilder object to add</param>
/// <returns>The added child. Use the Parent property to get back to parent builder</returns>
public TagBuilder AddChild(TagBuilder child)
{
child.Parent = this;
Children.Add(child);
return child;
}
/// <summary>
/// Creates a new TagBuilder by specifying the name of the tag you want to create i.e. h1
/// </summary>
/// <param name="tagName">The html tag name to use i.e. h1</param>
/// <param name="parent">Create a tag as an embeded child of another tag for hiarchical tag ouput</param>
public TagBuilder(string tagName, TagBuilder parent)
{
TagAttributes = new Dictionary<string, string>();
Children = new List<TagBuilder>();
TagName = tagName;
Parent = parent;
Mode = new RenderMode?();
}
/// <summary>
/// Create an image tag sorrounded by an anchor tag with a rollover effect.
/// </summary>
/// <param name="src">The source of the image to use as the default state</param>
/// <param name="hoversrc">The source of the image to use as the hover state</param>
/// <param name="url">The url to assign to the anchor tag</param>
/// <param name="alt">Assign this alt text to the image</param>
/// <param name="newWindow">Determine whether to open the link in a new window</param>
/// <returns>A TagBuilder class to continue to create the tag by adding attr classes etc.</returns>
public string ImageLinkHover(string src, string hoversrc, string url, string alt, bool newWindow)
{
var tb = new TagBuilder("a").href(url).inlineblock().InnerHtml(ImageHover(src, hoversrc).Alt(alt).ToString());
if (newWindow)
tb.Target_Blank();
return tb.ToString();
}
/// <summary>
/// Create an image tag sorrounded by an anchor tag.
/// </summary>
/// <param name="src">The source of the image to use</param>
/// <returns>A TagBuilder class to continue to create the tag by adding attr classes etc.</returns>
public TagBuilder ImageLink(string src)
{
var lnk = new TagBuilder("a").href("javascript:void(0);").AddClass("pointer");
lnk.AddChild("img").src(src).AddClass("pointer");
return lnk;
}
/// <summary>
/// Creates an anchor tag that surrounds two divs that can be floated together to form the sliding door technique.
/// </summary>
/// <param name="Title">This is the text that will appear inside the link</param>
/// <param name="leftCSSClass">This is the CSS class assigned to the left part of the sliding door technique</param>
/// <param name="rightCSSClass">This is the CSS class assigned to the right part of the sliding door technique</param>
public TagBuilder LinkWithSlidingDoor(string Title, string leftCSSClass, string rightCSSClass)
{
var tb = new TagBuilder("a").href("javascript:void(0);").AddClass("nouline");
tb.AddChild("div").text(Title).AddClass(leftCSSClass)
.Parent
.AddChild("div").AddClass(rightCSSClass);
return tb;
}
