jQuery UI Helpers / Selectable

Simple Selectable

You can create a selectable widget with the BeginSelectable method.

You should call the BeginSelectable method in a using statement. This is required to emit all the necessary HTML tags into the response.

The following example creates a simple selectable.

@using (Html.JQueryUI().BeginSelectable())
{
    <p>Item 1</p>
    <p>Item 2</p>
    <p>Item 3</p>
}

You can select the items below by clicking on them. You can also use a dragging box (lasso) to select multiple elements or Ctrl+click to select multiple, non-contiguous elements. Selecting an element adds the CSS class ui-selected to it. You can define the appearance of these elements in your CSS file.

Item 1

Item 2

Item 3

Configuration

Like the other widgets the selectable also has a fluent configuration API. To use it, create the selectable with the Begin method which takes a Selectable as its argument. The following example demonstrates this.

@using (Html.JQueryUI().Begin(new Selectable().Filter(".selectable")))
{
    <p>Item 1</p>
    <p>Item 2</p>
    <p class="selectable">Item 3</p>
    <p class="selectable">Item 4</p>
    <p class="selectable">Item 5</p>
    <p>Item 6</p>
}

This creates the selectable below.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

HTML Helpers

Fluent Configuration API