Esencia Development | Archive

MVC – Validating Additional Required Inputs

Posted September 26th, 2010 in Uncategorized by cody

In MVC, common validation can be done with a trivial amount of code using attributes on your model views, but once you step outside of the simple required, length, and type validations things can get complicated in a hurry.

Our client needed a view that required the user to provide additonal input if a question was answered as yes. Providing this functionality required more than a simple [Required] attribute on the display model.

There are multiple ways this can be done; this post will provide a quick tutorial on how we went about implementing a solution.

We had already chosen to use the JQuery validation library provided by the MVC2 template. The function __MVC_EnableClientValidation(validationContext) in the MicrosoftMvcJQueryValidation.js file must be modified to add hidden elements to the “ignore” list:

var options = {
        errorClass: "input-validation-error",
        //validClass: "",
        errorElement: "span",
        errorPlacement: function (error, element) {
            var messageSpan = fieldToMessageMappings[element.attr("name")];
            $(messageSpan).empty();
            $(messageSpan).removeClass("field-validation-valid");
            $(messageSpan).addClass("field-validation-error");
            //error.removeClass("input-validation-error");
            error.addClass("field-validation-error");
            error.attr("_for_validation_message", messageSpan);
            error.appendTo(messageSpan);
        },
        messages: errorMessagesObj,
        rules: rulesObj,
        invalidHandler: function () { theForm.trigger('invalidHandler'); },
        ignore: ":not(:visible)",
        success: function (label) {
            var messageSpan = $(label.attr("_for_validation_message"));
            $(messageSpan).empty();
            $(messageSpan).addClass("field-validation-valid");
            $(messageSpan).removeClass("field-validation-error");
        }
    };

The next step is to create your question/additional input model:

[Required()]
[Display(Name = "Do you like MVC2 better than WebForms?")]
[YesNoControl(new string[2] { "Date", "Why" }, "DoesLikeMvcBetter")]
public bool DoesLikeMvcBetter{ get; set; }
[Required(ErrorMessage = "Date is required.")]
public DateTime Date { get; set; }
[Required(ErrorMessage = "A reason is required.")]
public string Why { get; set; }

The YesNoControl attribute will be discussed later in this post. The model needs at least two properties, the question control as a boolean and at least one other control that will be validated, but can display any additional number of controls. In this example, there are two additional controls, one for the date the questions is answered and a reason.

<div>
    <%= Html.LabelFor(m => m.IsMVCBetterThanWebForms)%>
    <span style="display:block;">
        <%= Html.RadioButton("IsMVCBetterThanWebForms", "true", Model != null ? Model.IsMVCBetterThanWebForms : false, new { @onclick = "$('#IsMVCBetterThanWebForms_span').show()" })%><label for="Yes" style="width:20px;display:inline">Yes</label><br />
        <span id="IsMVCBetterThanWebForms_span" style="display: <%= Model != null && Model.IsMVCBetterThanWebForms ? "normal" : "none" %>; width:800px; position:relative; left:25px">
            Date:<%= Html.EditorFor(m => m.Date) %><%= Html.ValidationMessageFor(m => m.Date)%>
            and Why: <%= Html.EditorFor(m => m.Why) %><%= Html.ValidationMessageFor(m => m.Why)%>
        </span>
    </span>
    <%= Html.RadioButton("IsMVCBetterThanWebForms", "false", Model != null ? !Model.IsMVCBetterThanWebForms : false, new { @onclick = "$('#IsMVCBetterThanWebForms_span').hide()" })%><label for="No" style="width:20px;display:inline-block;">No</label><br />
    <%= Html.ValidationMessageFor(m => m.IsMVCBetterThanWebForms)%>
</div>

Then in your view you add markup that displays a radio button for the yes/no answer. This markup adds the radio button that the user must select yes or no. If the user selects yes, then the follow-up questions are display and require input before the form will post successfully.

So now we have a question control.

If the user doesn’t enter a value, the error is caught client-side and the form will not post.

If the user selects “Yes”, additional inputs are displayed.

And must be answered before proceeding as well.

This takes care of the client side validation, but since the server validates the model during binding, ModelState.IsValid will return false if the user answered “No” since Date and Why are empty. This could be handled manually in the controller code, but the route we chose was to let model binding handle it.

The next step is to create an attribute to use to decorate the model view:

[AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = true)]
   public sealed class YesNoControlAttribute : Attribute
   {
       private static string defaultTemplateName;
       public static string DefaultTemplateName
       {
           get
           {
               if (string.IsNullOrEmpty(defaultTemplateName))
               {
                   defaultTemplateName = "YesNoControl";
               }

               return defaultTemplateName;
           }
           set
           {
               defaultTemplateName = value;
           }
       }
       public string TemplateName { get; private set; }
       public string[] HiddenControls { get; private set; }
       public IDictionary<string, object> HtmlAttributes { get; private set; }
       public string ControlName { get; set; }

       public YesNoControlAttribute(object hiddenControls, string controlName)
           : this(DefaultTemplateName, hiddenControls, controlName, null)
       {
       }

       public YesNoControlAttribute(object hiddenControls, string controlName, object htmlAttributes)
           : this(DefaultTemplateName, hiddenControls, controlName, htmlAttributes)
       {
       }

       public YesNoControlAttribute(string templateName, object hiddenControls, string controlName, object htmlAttributes)
       {
           if (string.IsNullOrEmpty(templateName))
           {
               throw new ArgumentException("Template name cannot be empty.");
           }

           if (string.IsNullOrEmpty(controlName))
           {
               throw new ArgumentException("Control field cannot be empty.");
           }

           if (((string[])hiddenControls).Count() < 1)
           {
               throw new ArgumentException("Hidden Controls must contain at least one control name.");
           }

           TemplateName = templateName;
           ControlName = controlName;
           HiddenControls = (string[])hiddenControls;
           HtmlAttributes = new RouteValueDictionary(htmlAttributes);
       }

   }

This class inherits from the attribute and allows you to decorate a property and add the name of the controls that will be displayed and validated as a required field if the use answers as yes.

Then create a custom model binder to handle the binding of your question model. If you are not familiar with custom model binding there are many sources that have covered that topic.

public class QuestionDataModelBinder : IModelBinder
    {
        public new BindResult BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
        {
            var b = new BindResult(base.BindModel(controllerContext, bindingContext), null);
            var pdm = b.Value as AllMyQuestionsModel;

            if(pdm == null) return b;

            var props = pdm.GetType().GetProperties();

            // this checks if any of the properties have a custom attribute of "YesNoControlAttribute"
            // if it does, it checks to see if it's false, and removes the errors of the controls specified
            foreach (string ctlName in (from propertyInfo in props
                                        let isYes = propertyInfo.GetCustomAttributes(typeof (YesNoControlAttribute), false).Any()
                                        where isYes
                                        let res = bindingContext.ValueProvider.GetValue(propertyInfo.Name)
                                        where res != null && bool.FalseString.Equals(res.AttemptedValue, StringComparison.CurrentCultureIgnoreCase)
                                        select propertyInfo).SelectMany(propertyInfo => Enumerable.SelectMany<string[], string>((from attrib in propertyInfo.GetCustomAttributes(typeof (YesNoControlAttribute), false)
                                                                                                                                 select ((YesNoControlAttribute) attrib).HiddenControls), ctls => ctls)))
            {
                RemoveErrors(bindingContext, ctlName);
            }
            return b;
        }
    }

This class checks to see if any properties on the model it’s binding have a “YesNoControl” attribute. If the attempted value is false, it removes the model state errors that are on any of the controls specified in the attribute.

WPF WTF – Data Binding Happens When, Now?

Posted September 24th, 2010 in Uncategorized by Matt

Data binding in WPF still seems to be a bit of a black art. In a recent project, I ran into an issue where data binding was happening considerably later than expected.

Here’s the scenario: we are presenting the user with a modal dialog where they can, among other things, choose a specific font for use in a specific area of the application from a restricted list of specified fonts. The modal dialog shouldn’t be concerned with retrieving the font list because, in our particular MVP Pattern, that’s not its job.

We’re storing the font information in a very simple class.

[Serializable]
public class FontInformation
{
    public string FontName { get; set; }
    public int FontSize { get; set; }
}

“But Matt! FontFamily is available in System.Drawing….” Yes, Carl, I know. (Apologies if your name is not Carl.) We’re planning on serializing this information for later storage in user preferences, and we’d like to avoid building in unnecessary dependencies where possible.

Here’s our first stab at the properties in the modal dialog, and how it’s implemented in the XAML.

        protected internal IEnumerable<FontInformation> AvailableFonts
        {
            get
            {
                return lstFont.DataContext as IEnumerable<FontInformation>;
            }
            set
            {
                lstFont.DataContext = value;
            }
        }

        public FontInformation SelectedFont
        {
            get
            {
                return lstFont.SelectedItem as FontInformation;
            }
            set
            {
                lstFont.SelectedItem = value;
            }
        }

<ComboBox Name="lstFont" ItemsSource="{Binding}">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <!--display the font name, written in the selected font, size, and style.-->
            <TextBlock Text="{Binding Path=FontName}" FontFamily="{Binding Path=FontName}"
            FontSize="{Binding Path=FontSize}"/>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

The combo box draws its list of available fonts from the property setter and displays each font drawn in its own…uh…font. This implementation allows the calling code to be completely agnostic of how the View is displaying allowed fonts and setting the selected font. Here’s where the problem reared its head, in the calling code that readies the modal dialog.

MessageOptionsForm msgOptionsForm = new MessageOptionsForm();
msgOptionsForm.AvailableFonts = this.OptionsController.AvailableMessageFonts;
msgOptionsForm.SelectedFont = this.FlipbookOptions.MessageFontInformation;

I naively thought that, after setting DataContext on the combo box, that the child items would be available for selection. However, when we try to set the SelectedFont property before the control loads, data binding has not occurred yet, and the setter for SelectedFont does a whole bunch of nothing. (Hey, at least it doesn’t blow up.)

Now you have two options.

Track the SelectedFont with a private FontInformation instance and set it when the window loads. This creates a point of confusion for the programmer who follows me since setting the value of that private instance will do, again, a whole bunch of nothing.
Get crafty.

Here’s the modified implementation.

        public FontInformation SelectedFont
        {
            get
            {
                return lstFont.SelectedItem as FontInformation;
            }
            set
            {
                if (lstFont.IsLoaded)
                {
                    lstFont.SelectedItem = value;
                }
                else
                {
                    //setter might get triggered before options have finished loading.
                    lstFont.Loaded += delegate { lstFont.SelectedItem = value; };
                }
            }
        }

The IsLoaded property tells us whether a framework element has been loaded for presentation (and thus is available for data binding). Here we are attaching an anonymous delegate to the Loaded event to select the correct option.

This implementation solves another potential problem with the first stab: if the calling code sets SelectedFont before setting AvailableFonts, nothing will happen. This is bad, and it violates the general principle that you should allow properties to be set in any order.

MVC – Validating Additional Required Inputs

WPF WTF – Data Binding Happens When, Now?

Recent Posts

Tag Cloud

Archives