jQuery UI Helpers / Buttons

Button

The simplest Button helper method takes a single parameter, the button label, and generates a submit type input element.

@Html.JQueryUI().Button("Save")

The generated HTML.

<input data-jqui-type="button" type="submit" value="Save" />

This is the button:



There is an overload that allows more customization.

@Html.JQueryUI().Button("Click me!", ButtonElement.Button, ButtonType.Button, null)

This generates the following HTML.

<button data-jqui-type="button" type="button" value="Click me!">Click me!</button>

Here is the button.

Buttonset

You can use the buttonset to turn a group of radio buttons or checkboxes into buttons.

@using (Html.JQueryUI().BeginButtonSet(new { @class = "editor-field" }))
{        
    <label for="Bold">B</label><input type="checkbox" id="Bold" name="Bold" value="true" />        
    <label for="Italic">I</label><input type="checkbox" id="Italic" name="Italic" value="true" />        
    <label for="Underline">U</label><input type="checkbox" id="Underline" name="Underline" value="true"  />        
}
@using (Html.JQueryUI().BeginButtonSet(new { @class = "editor-field" }))
{
    <label for="AlignLeft">Left</label><input type="radio" id="AlignLeft" name="Align" value="Left" />
    <label for="AlignCenter">Center</label><input type="radio" id="AlignCenter" name="Align" value="Center" />        
    <label for="AlignRight">Right</label><input type="radio" id="AlignRight" name="Align" value="Right" />
}

This is the result.

Action Button

The ActionButton creates a button from an <a> element.

@Html.JQueryUI().ActionButton("Download", "Index", "Download", new {area = ""}, null)

This generates the following HTML.

<a data-jqui-type="button" href="/Download">Download</a>

Here is the button.

Download

Icons

Buttons can have icons, but this works only if the button is a button element, because input elements do not support content.

@(Html.JQueryUI()
    .Button("Save", ButtonElement.Button, ButtonType.Submit, null)
    .Icons("ui-icon-disk "))

The button with an icon:

HTML Helpers

Fluent Configuration API