Creating A Custom MVC Web Helper

Creating a custom MVC Web Helper and globalization

In this write-up, I will explain how to create a custom HTML Web Helper and how to use globalization. We will have a combo box binding its options from an Enum, which will have the texts loaded according to the user's language preferences.

Why would I need to create a custom web helper?

HTML helper is a method that returns an HTML string. Then, this string is rendered in the View. MVC provides many built-in HTML helper methods and it also provides the facility to create your own HTML helper methods. Once you create your helper method, you can reuse it many times.

Creating a custom web helper gives you the flexibility to create your own personalized component, which could help regarding code quality, performance, and organization. It is easy to use and for further code maintenance.

Why would I need to use globalization?

Globalization is the process of designing the application in such a way that it can be used by users from across the globe (multiple cultures).

So, you may display texts in different languages, according to the user language preferences or select one to display as default if none of his or her preferences match with the available languages.

Steps to reproduce,

Create a folder for the HTML Helper.
Create a new static class which will contain the HTML helper code.

public static class WebHelperSampleClass
{
private static readonly SelectListItem[] SingleEmptyItem = new[] { new SelectListItem { Text = "", Value = "" } };
/// <summary>
/// HTML helper to be used to load the enums with its translations
/// </summary>
/// <param name="firstLineCombo">the data to appear in the first line of the combo</param>
/// <returns>A combo with the translations of the enums</returns>
public static MvcHtmlString DisplayEnum<TModel, TEnum>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TEnum>> expression, string firstLineCombo)
{
var metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
var enumType = GetNonNullableModelType(metadata);
IEnumerable<TEnum> values = Enum.GetValues(enumType).Cast<TEnum>();
IEnumerable<SelectListItem> items = new[] { new SelectListItem
{
Text = firstLineCombo,
Value = "0",
Selected = true
}
}.Concat(
from value in values
select new SelectListItem
{
Text = GetEnumDescription(value),
Value = value.ToString(),
Selected = false
});
return htmlHelper.DropDownListFor(expression, items);
}
/// <summary>
/// Gets the type of the enum
/// </summary>
/// <param name="modelMetadata">the model</param>
/// <returns>return the type of enum</returns>
private static Type GetNonNullableModelType(ModelMetadata modelMetadata)
{
var realModelType = modelMetadata.ModelType;
var underlyingType = Nullable.GetUnderlyingType(realModelType);
if (underlyingType != null)
{
realModelType = underlyingType;
}
return realModelType;
}
/// <summary>
/// Gets the description of each enum
/// </summary>
/// <returns>the description translated of the respective enum</returns>
private static string GetEnumDescription<TEnum>(TEnum value)
{
var fieldInfo = value.GetType().GetField(value.ToString());
var attributes = fieldInfo.GetCustomAttributes(typeof(DisplayAttribute), false);
var resourceValueName = ((System.ComponentModel.DataAnnotations.DisplayAttribute)(attributes[0])).Description;
return Resources.ResourceManager.GetString(resourceValueName);
}
}

Reference the created class in the View and call the custom web HTML Helper.

@using WebHelpers.WebHelperSampleClass;
@using Globalization_CustomWebHelper.Resource;
@using Globalization_CustomWebHelper.Models;
@model SampleModel
@Resources.ComboSelect
<br />
@Html.DisplayEnum(m => m.SampleComboWithEnums, Resources.HeardAboutUsLabel)

Steps to configure the Globalization files

Create a folder for the resource files.
Create a resource file, which will be the default one and set its access modifier to Public.
Create another one for each additional language in the same folder, always following the same pattern: [Name].[Language Abbreviation].resx. Example: Resources.en.resx (english)
Include the following code in the web.config so it checks the user language and select the value from the correct Resource file:

<globalization enableClientBasedCulture="true" culture="auto" uiCulture="auto" />

Use the resource's name defined in the resource files.

Enum

public enum WebHelperSampleEnum
{
[Display(ResourceType = typeof(Resources), Description = "ComboAdvert")]
Advert = 1, [Display(ResourceType = typeof(Resources), Description = "ComboWordOfMouth")]
WordOfMouth = 2, [Display(ResourceType = typeof(Resources), Description = "ComboOther")]
Other = 3
}

Calling from anywhere is easy [file name].[Setting name]. Example: Resources.Sitename

Project on GitHub