Question

I am trying to create a custom HTML Helper that encapsulates some presentation logic because I have to reuse this logic a few times on the same page and maybe in the future.

If the user’s address is in North America, then I want two text boxes to be displayed for the telephone number input, one for the area code and the other for the remainder of the number. If the address is outside of North America, then I want a single text box for the full number to be displayed.

The following code was working as intended for outputting the correct text boxes, however, as soon as I added the validation associated with each text box, I am now getting a NullReferenceException thrown from the ToString() call on the ValidationMessage Helper call (the ValidationMessage Helper is returning a null!!).

public static string TelephoneNumberInputListItem(this HtmlHelper helper,
                                         string country,
                                         string northAmericanAreaCodeFormName,
                                         string northAmericanAreaCode,
                                         string northAmericanRemainingNumberFormName,
                                         string northAmericanRemainingNumber,
                                         string internationalFullNumberFormName,
                                         string internationalFullNumber)
    {

        //set up the error message and styling
        object errorHtmlAttributes = new { @class = "fError" };
        string validationMessage = "*";

        object htmlAttributes;

        //start building our list item tag which includes our telephone number 
        //input and validation controls
        TagBuilder listItemBuilder = new TagBuilder("li");

        //determine based on the country specified if this should be a North 
        //American phone input form or an international one
        if (isNorthAmericanCountry(country))
        {
            //add the text input controls
            htmlAttributes = new { size = 3, maxlength = 3 };
            listItemBuilder.InnerHtml = helper.TextBox(northAmericanAreaCodeFormName, northAmericanAreaCode, htmlAttributes).ToString();

            htmlAttributes = new { size = 7, maxlength = 7 };
            listItemBuilder.InnerHtml += helper.TextBox(northAmericanRemainingNumberFormName, northAmericanRemainingNumber, htmlAttributes).ToString();

            //Add the Validation Message controls
            listItemBuilder.InnerHtml += helper.ValidationMessage(northAmericanAreaCodeFormName, validationMessage, errorHtmlAttributes).ToString();
            listItemBuilder.InnerHtml += helper.ValidationMessage(northAmericanRemainingNumberFormName, validationMessage, errorHtmlAttributes).ToString();
        }
        else
        {
            //add the text input control
            htmlAttributes = new { size = 15, maxlength = 15 };
            listItemBuilder.InnerHtml = helper.TextBox(internationalFullNumberFormName, internationalFullNumber, htmlAttributes).ToString();

            //Add the Validation Message control
            listItemBuilder.InnerHtml += helper.ValidationMessage(internationalFullNumberFormName, validationMessage, errorHtmlAttributes).ToString();
        }

        return listItemBuilder.ToString(TagRenderMode.Normal);
    }

Can you please help me add the validation so that these input text boxes are still part of the overall form validation happening in the calling View? I should mention that putting the TextBox and ValidationMessage Helper directly in the View works correctly.

There is a lot of buzz for using HTML Helpers (“if there’s an IF, use a helper” anyone?), but how are we supposed to use them if we can’t add validation controls to the input controls we use.

Thank you in advance for your help.

Answer 1

The ValidationMessage helper returns null if there is no error indicated in the corresponding Model State. See actual code below…

Since the ValidationMessage helper returns a string, there is no reason to call ToString() (which is what is causing the exception). Remove the ToString’s and your code should work as expected.

You can also remove your ToString calls from the TextBox helpers as well.

public static string ValidationMessage(this HtmlHelper htmlHelper, string modelName, string validationMessage, IDictionary<string, object> htmlAttributes) {
  if (modelName == null) {
    throw new ArgumentNullException("modelName");
  }

  if (!htmlHelper.ViewData.ModelState.ContainsKey(modelName)) {
    return null;
  }

  ModelState modelState = htmlHelper.ViewData.ModelState[modelName];
  ModelErrorCollection modelErrors = (modelState == null) ? null : modelState.Errors;
  ModelError modelError = ((modelErrors == null) || (modelErrors.Count == 0)) ? null : modelErrors[0];

  if (modelError == null) {
    return null;
  }

  TagBuilder builder = new TagBuilder("span");
  builder.MergeAttributes(htmlAttributes);
  builder.MergeAttribute("class", HtmlHelper.ValidationMessageCssClassName);
  builder.SetInnerText(String.IsNullOrEmpty(validationMessage) ? GetUserErrorMessageOrDefault(htmlHelper.ViewContext.HttpContext, modelError, modelState) : validationMessage);

  return builder.ToString(TagRenderMode.Normal);
}