HTML helpers

The Episerver shell framework contains the following HTML helper extension methods to create the built-in gadgets available on the dashboard.

• Html.AcceptButton()
• Html.AutoUpdate()
• Html.BeginGadgetForm()
• Html.CancelButton()
• Html.GetGadgetId()
• Html.SetGadgetFeedback()
• Html.ViewInputButton()
• Html.ViewLink()
• Html.ViewLinkButton(]
• Using labeled inputs for gadgets

Html.AcceptButton()

Renders a localized submit input button.

Example:

<% Html.BeginGadgetForm("accept"); %>
 <div class="epi-buttonContainer-simple">
   <input type="text" name="text" />
     <%= Html.AcceptButton() %>
 </div>
<% Html.EndForm(); %>

Html.AutoUpdate()

Refreshes a view periodically.

Example:

<%= Html.AutoUpdate(TimeSpan.FromSeconds(5)) %>

Html.BeginGadgetForm()

When you save data on the dashboard, use AJAX instead of posting and re-creating the whole dashboard. 

Example (this extension has gained some overloads after 6RC):

<% Html.BeginGadgetForm("accept"); %>
 <input type="text" name="text" />
 <input type="submit" />
            <% Html.EndForm(); %>

Html.CancelButton()

Renders an input button that calls the specified action to restore the view.

Example:

<div class="epi-buttonContainer-simple">
  <%= Html.CancelButton(null, new { action="someview"})%>
</div>

Html.GetGadgetId()

Gets the current gadget’s Id and returns it as a string.

Example:

<%= Html.GetGadgetId() %>

Html.SetGadgetFeedback()

Add text to the gadget title bar area with an extension method. The extension overload allows options for AJAX loader, fadeout and disappear after.

Example:

<%= Html.SetGadgetFeedback("feedback message"); %>

Appearance:

Html.ViewInputButton()

Creates an input button that loads the specified view in the gadget content area using AJAX.

Example (this extension has gained some overloads since 6RC):

<%= Html.ViewInputButton("View input button", "title", "someview", 
 string.Empty, null, new { test = 2, test2 = Guid.NewGuid() })%>

Appearance:

Html.ViewLink()

Creates an anchor that loads the specified view in the gadget content area using AJAX. This is useful in master-details scenarios.

Example (this extension has gained some overloads since 6RC):

<%= Html.ViewLink("View link", "title", "someview",
 string.Empty, null, new { test = 3, test2 = Guid.NewGuid() })%>

Appearance:

Html.ViewLinkButton()

Creates an anchor with the appearance of a button that loads the specified view in the gadget content area using AJAX.

Example (this extension has gained some overloads since 6RC):

<%= Html.ViewLinkButton("View link button", "title", "someview",
 string.Empty, null, new { test = 4, test2 = Guid.NewGuid() })%>

Appearance:

Using labeled inputs for gadgets

Because inputs used in gadgets can have multiple instances present at the same time, you cannot use static values for Ids. One of the important usages for an Id on inputs is to connect it with a label using the “for” attribute. The following HTML helpers assist with generating labels:

• LabeledCheckBox
• LabeledDropDownList
• LabeledPassword
• LabeledRadioButton
• LabeledTextArea
• LabeledTextBox

Example:

<%= Html.LabeledTextBox("inputName", "Label 1", "input value", new { @class = "epi-size15" }, null) %>

Generates an output like this:

<label for="id545">Label 1</label>
<input name="inputName" class="epi-size15" id="id545" type="text" value="input value" />

Last updated: Nov 25, 2015