Posted by: Cirilo Meggiolaro | 04/17/2009

Tip of the day #185 – ASP.NET MVC – Html helpers

During this week we have seen some features of ASP.NET MVC. If you haven’t read yet it is a good time for it:

You may have noticed that some of the posts show forms with regular controls such as textboxes, dropdownlists and buttons and so on. Different from regular ASP.NET applications, those controls are added to the Views by using some extension methods available under the System.Web.Mvc.Html namespace that will render html controls.

Basically those extension methods return a string with the html to be rendered. Let’s check an example:

TextBox

Extension method: <%= Html.TextBox(“name”) %>

Html output: <input id=”name” name=”name” type=”text” value=”” />

CheckBox

Extension method: <%= Html.CheckBox(“active”) %>

Html output: <input id=”active” name=”active” type=”checkbox” value=”false” />

The following extension methods are available:

Input and selection controls:

  • string CheckBox(this HtmlHelper htmlHelper, string name);
  • string CheckBox(this HtmlHelper htmlHelper, string name, bool isChecked);
  • string CheckBox(this HtmlHelper htmlHelper, string name, IDictionary<string, object> htmlAttributes);
  • string CheckBox(this HtmlHelper htmlHelper, string name, object htmlAttributes);
  • string CheckBox(this HtmlHelper htmlHelper, string name, bool isChecked, IDictionary<string, object> htmlAttributes);
  • string CheckBox(this HtmlHelper htmlHelper, string name, bool isChecked, object htmlAttributes);
  • string DropDownList(this HtmlHelper htmlHelper, string name);
  • string DropDownList(this HtmlHelper htmlHelper, string name, IEnumerable<SelectListItem> selectList);
  • string DropDownList(this HtmlHelper htmlHelper, string name, string optionLabel);
  • string DropDownList(this HtmlHelper htmlHelper, string name, IEnumerable<SelectListItem> selectList, IDictionary<string, object> htmlAttributes);
  • string DropDownList(this HtmlHelper htmlHelper, string name, IEnumerable<SelectListItem> selectList, object htmlAttributes);
  • string DropDownList(this HtmlHelper htmlHelper, string name, IEnumerable<SelectListItem> selectList, string optionLabel);
  • string DropDownList(this HtmlHelper htmlHelper, string name, IEnumerable<SelectListItem> selectList, string optionLabel, IDictionary<string, object> htmlAttributes);
  • string DropDownList(this HtmlHelper htmlHelper, string name, IEnumerable<SelectListItem> selectList, string optionLabel, object htmlAttributes);
  • string Hidden(this HtmlHelper htmlHelper, string name);
  • string Hidden(this HtmlHelper htmlHelper, string name, object value);
  • string Hidden(this HtmlHelper htmlHelper, string name, object value, IDictionary<string, object> htmlAttributes);
  • string Hidden(this HtmlHelper htmlHelper, string name, object value, object htmlAttributes);
  • string ListBox(this HtmlHelper htmlHelper, string name);
  • string ListBox(this HtmlHelper htmlHelper, string name, IEnumerable<SelectListItem> selectList);
  • string ListBox(this HtmlHelper htmlHelper, string name, IEnumerable<SelectListItem> selectList, IDictionary<string, object> htmlAttributes);
  • string ListBox(this HtmlHelper htmlHelper, string name, IEnumerable<SelectListItem> selectList, object htmlAttributes);
  • string Password(this HtmlHelper htmlHelper, string name);
  • string Password(this HtmlHelper htmlHelper, string name, object value);
  • string Password(this HtmlHelper htmlHelper, string name, object value, IDictionary<string, object> htmlAttributes);
  • string Password(this HtmlHelper htmlHelper, string name, object value, object htmlAttributes);
  • string RadioButton(this HtmlHelper htmlHelper, string name, object value);
  • string RadioButton(this HtmlHelper htmlHelper, string name, object value, bool isChecked);
  • string RadioButton(this HtmlHelper htmlHelper, string name, object value, IDictionary<string, object> htmlAttributes);
  • string RadioButton(this HtmlHelper htmlHelper, string name, object value, object htmlAttributes);
  • string RadioButton(this HtmlHelper htmlHelper, string name, object value, bool isChecked, IDictionary<string, object> htmlAttributes);
  • string RadioButton(this HtmlHelper htmlHelper, string name, object value, bool isChecked, object htmlAttributes);
  • string TextArea(this HtmlHelper htmlHelper, string name);
  • string TextArea(this HtmlHelper htmlHelper, string name, IDictionary<string, object> htmlAttributes);
  • string TextArea(this HtmlHelper htmlHelper, string name, object htmlAttributes);
  • string TextArea(this HtmlHelper htmlHelper, string name, string value);
  • string TextArea(this HtmlHelper htmlHelper, string name, string value, IDictionary<string, object> htmlAttributes);
  • string TextArea(this HtmlHelper htmlHelper, string name, string value, object htmlAttributes);
  • string TextArea(this HtmlHelper htmlHelper, string name, string value, int rows, int columns, IDictionary<string, object> htmlAttributes);
  • string TextArea(this HtmlHelper htmlHelper, string name, string value, int rows, int columns, object htmlAttributes);
  • string TextBox(this HtmlHelper htmlHelper, string name);
  • string TextBox(this HtmlHelper htmlHelper, string name, object value);
  • string TextBox(this HtmlHelper htmlHelper, string name, object value, IDictionary<string, object> htmlAttributes);
  • string TextBox(this HtmlHelper htmlHelper, string name, object value, object htmlAttributes);

Validation:

  • string ValidationMessage(this HtmlHelper htmlHelper, string modelName);
  • string ValidationMessage(this HtmlHelper htmlHelper, string modelName, IDictionary<string, object> htmlAttributes);
  • string ValidationMessage(this HtmlHelper htmlHelper, string modelName, object htmlAttributes);
  • string ValidationMessage(this HtmlHelper htmlHelper, string modelName, string validationMessage);
  • string ValidationMessage(this HtmlHelper htmlHelper, string modelName, string validationMessage, IDictionary<string, object> htmlAttributes);
  • string ValidationMessage(this HtmlHelper htmlHelper, string modelName, string validationMessage, object htmlAttributes);
  • string ValidationSummary(this HtmlHelper htmlHelper, string message);
  • string ValidationSummary(this HtmlHelper htmlHelper, string message, IDictionary<string, object> htmlAttributes);
  • string ValidationSummary(this HtmlHelper htmlHelper, string message, object htmlAttributes);

Links:

  • string ActionLink(this HtmlHelper htmlHelper, string linkText, string actionName);
  • string ActionLink(this HtmlHelper htmlHelper, string linkText, string actionName, object routeValues);
  • string ActionLink(this HtmlHelper htmlHelper, string linkText, string actionName, RouteValueDictionary routeValues);
  • string ActionLink(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName);
  • string ActionLink(this HtmlHelper htmlHelper, string linkText, string actionName, object routeValues, object htmlAttributes);
  • string ActionLink(this HtmlHelper htmlHelper, string linkText, string actionName, RouteValueDictionary routeValues, IDictionary<string, object> htmlAttributes);
  • string ActionLink(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName, object routeValues, object htmlAttributes);
  • string ActionLink(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName, RouteValueDictionary routeValues, IDictionary<string, object> htmlAttributes);
  • string ActionLink(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName, string protocol, string hostName, string fragment, object routeValues, object htmlAttributes);
  • string ActionLink(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName, string protocol, string hostName, string fragment, RouteValueDictionary routeValues, IDictionary<string, object> htmlAttributes);
  • string RouteLink(this HtmlHelper htmlHelper, string linkText, object routeValues);
  • string RouteLink(this HtmlHelper htmlHelper, string linkText, RouteValueDictionary routeValues);
  • string RouteLink(this HtmlHelper htmlHelper, string linkText, object routeValues, object htmlAttributes);
  • string RouteLink(this HtmlHelper htmlHelper, string linkText, RouteValueDictionary routeValues, IDictionary<string, object> htmlAttributes);
  • string RouteLink(this HtmlHelper htmlHelper, string linkText, string routeName, object routeValues);
  • string RouteLink(this HtmlHelper htmlHelper, string linkText, string routeName, RouteValueDictionary routeValues);
  • string RouteLink(this HtmlHelper htmlHelper, string linkText, string routeName, object routeValues, object htmlAttributes);
  • string RouteLink(this HtmlHelper htmlHelper, string linkText, string routeName, RouteValueDictionary routeValues, IDictionary<string, object> htmlAttributes);
  • string RouteLink(this HtmlHelper htmlHelper, string linkText, string routeName, string protocol, string hostName, string fragment, object routeValues, object htmlAttributes);
  • string RouteLink(this HtmlHelper htmlHelper, string linkText, string routeName, string protocol, string hostName, string fragment, RouteValueDictionary routeValues, IDictionary<string, object> htmlAttributes);

Render Partial: Used to render partial views (ascx controls)

  • void RenderPartial(this HtmlHelper htmlHelper, string partialViewName);
  • void RenderPartial(this HtmlHelper htmlHelper, string partialViewName, object model);
  • void RenderPartial(this HtmlHelper htmlHelper, string partialViewName, ViewDataDictionary viewData);
  • void RenderPartial(this HtmlHelper htmlHelper, string partialViewName, object model, ViewDataDictionary viewData);

Forms:

  • MvcForm BeginForm(this HtmlHelper htmlHelper);
  • MvcForm BeginForm(this HtmlHelper htmlHelper, object routeValues);
  • MvcForm BeginForm(this HtmlHelper htmlHelper, RouteValueDictionary routeValues);
  • MvcForm BeginForm(this HtmlHelper htmlHelper, string actionName, string controllerName);
  • MvcForm BeginForm(this HtmlHelper htmlHelper, string actionName, string controllerName, FormMethod method);
  • MvcForm BeginForm(this HtmlHelper htmlHelper, string actionName, string controllerName, object routeValues);
  • MvcForm BeginForm(this HtmlHelper htmlHelper, string actionName, string controllerName, RouteValueDictionary routeValues);
  • MvcForm BeginForm(this HtmlHelper htmlHelper, string actionName, string controllerName, FormMethod method, IDictionary<string, object> htmlAttributes);
  • MvcForm BeginForm(this HtmlHelper htmlHelper, string actionName, string controllerName, FormMethod method, object htmlAttributes);
  • MvcForm BeginForm(this HtmlHelper htmlHelper, string actionName, string controllerName, object routeValues, FormMethod method);
  • MvcForm BeginForm(this HtmlHelper htmlHelper, string actionName, string controllerName, RouteValueDictionary routeValues, FormMethod method);
  • MvcForm BeginForm(this HtmlHelper htmlHelper, string actionName, string controllerName, object routeValues, FormMethod method, object htmlAttributes);
  • MvcForm BeginForm(this HtmlHelper htmlHelper, string actionName, string controllerName, RouteValueDictionary routeValues, FormMethod method, IDictionary<string, object> htmlAttributes);
  • MvcForm BeginRouteForm(this HtmlHelper htmlHelper, object routeValues);
  • MvcForm BeginRouteForm(this HtmlHelper htmlHelper, RouteValueDictionary routeValues);
  • MvcForm BeginRouteForm(this HtmlHelper htmlHelper, string routeName);
  • MvcForm BeginRouteForm(this HtmlHelper htmlHelper, string routeName, FormMethod method);
  • MvcForm BeginRouteForm(this HtmlHelper htmlHelper, string routeName, object routeValues);
  • MvcForm BeginRouteForm(this HtmlHelper htmlHelper, string routeName, RouteValueDictionary routeValues);
  • MvcForm BeginRouteForm(this HtmlHelper htmlHelper, string routeName, FormMethod method, IDictionary<string, object> htmlAttributes);
  • MvcForm BeginRouteForm(this HtmlHelper htmlHelper, string routeName, FormMethod method, object htmlAttributes);
  • MvcForm BeginRouteForm(this HtmlHelper htmlHelper, string routeName, object routeValues, FormMethod method);
  • MvcForm BeginRouteForm(this HtmlHelper htmlHelper, string routeName, RouteValueDictionary routeValues, FormMethod method);
  • MvcForm BeginRouteForm(this HtmlHelper htmlHelper, string routeName, object routeValues, FormMethod method, object htmlAttributes);
  • MvcForm BeginRouteForm(this HtmlHelper htmlHelper, string routeName, RouteValueDictionary routeValues, FormMethod method, IDictionary<string, object> htmlAttributes);
  • void EndForm(this HtmlHelper htmlHelper);

Putting all together

After checking all extension methods available let’s take a look at a real Log On form. This is the default form available when you create a new ASP.NET MVC Web application:

<%= Html.ValidationSummary(“Login was unsuccessful. Please correct the errors and try again.”) %>

<% using (Html.BeginForm()) { %>
     <div>
        <fieldset>
            <legend>
Account Information</legend>
            <p>
                <label for=”username”>
Username:</label>
                <%= Html.TextBox(“username”) %>
                <%= Html.ValidationMessage(“username”) %>
            </p>
            <p>
                <label for=”password”>
Password:</label>
                <%= Html.Password(“password”) %>
                <%= Html.ValidationMessage(“password”) %>
            </p>
            <p>
                <%= Html.CheckBox(“rememberMe”) %> <label class=”inline”                 for=”rememberMe”>Remember me?</label>
            </p>
            <p>
                <input type=”submit” value=”Log On” />
            </p>
        </fieldset>
    </div>

<% } %>

Let’s check each helper used on the form:

  • ValidationSummary: Displays a list of inconsistencies if some happen;
  • BeginForm: Writes an opening form tag to the form. When defined with the using keyword, a closing tag will be added automatically. Otherwise you will have to explicitly define the closing tag;
  • TextBox: Adds a html text input;
  • Password: Adds a html password input;
  • CheckBox: Adds a html checkbox control;
  • ValidationMessage: Defines a span that displays a text if something goes wrong. Don’t think that it gives you the same feature than the RequiredFieldValidator from regular ASP.NET applications. It must be used only for displaying purposes;

The button is added as a regular submit control.

Creating your own html helper

Based on the fact that most part of the html helpers return a string with html markup to be rendered you may create your own html helper class. On the following code snippet we are going to create a simple submit button that becomes disabled when you click on it to avoid multiple clicks when posting the View:

public static class HelpersExtensions
{
    public static string InputButton(this HtmlHelper htmlHelper, string text)
    {
        return @”<input type=””submit”” value=””” + text + @”””                   onclick=””this.disabled=true;document.forms[0].submit();”” />”;
    }
}

From your form you may use it by simply using the following code snippet:

<%= Html.InputButton(“Click me!”) %>

For more information about extension methods, check the Tip #71.

You’ve seen that is pretty easy to create and use your own HtmlHelper control and I am pretty sure that some developers have already started creating controls for ASP.NET MVC.

Enjoy it!


Responses

  1. Cirilo, Nice tip on disabling double clicks in MVC. I was trying something more complicated (below), but yours is cleaner.
    Thanks.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: