Question

Background

I have a payment page where the user can select from a list of existing payment methods, or specify a new one. The dropdown presents options such as:

1. Visa – ******1234 (Saved)
2. Mastercard – ******9876 (Saved)
3. [New Credit Card …]
4. [New Electronic Check …]

Using jQuery, I toggle hidden DIVs that contain either an informational table (in the case of options 1 or 2 for saved payment methods) or a form (in the case of the [new] options).

I am using a strongly typed class as my view model which contains (among simple types) a CreditCard class and a Check class. Each of these classes uses data annotation validators, as they are used in other parts of the site.

Problem

The problem comes in when the user submits the form. I would like to use model binding to handle the mapping of POST values, but I need the binding and/or validation to fire depending on which option the user selected. For example, if the user selects option 1 or 2 from the list above, I don’t want the model validation (or maybe even the binding itself) to fire for the CreditCard or Check objects.

I have researched the possibilities of creating a custom model binder using IModelBinder as well as extending the DefaultModelBinder and just overriding some of the methods. However, I am unsure as to which method is better, and, if extending DefaultModelBinder, which would be the appropriate method to override.

The logic would be fairly simple:

• If the user selected one of the existing payment methods, no validation on the CreditCard or Check are required.
• If the user selected one of the options to create a new payment method, then only the selected method (CreditCard or Check) needs to be bound and validated

It feels as if extending the DefaultModelBinder is the way to go, as I would like most of the heavy lifting to be done by the framework without the need to create a custom binder from scratch. However, when looking at the available methods to override, it’s not clear which is the best one(s):

1. BindProperty – The problem here is that I basically need to look at one of the properties to determine what other properties should be bound. I don’t think I can control the order in which the incoming properties are bound, and I wouldn’t want to rely on the order they are set in the HTML form.
2. OnModelUpdated – By this point, it’s too late. The binding validation from the data annotations has been triggered and the ModelState has been updated. I would have to loop through the ModelState and remove the errors that are not relevant.
3. OnPropertyValidating – At first I thought this is where I should look, but even returning TRUE for all properties (as a test) causes the ModelState to contain binding errors.

I have come across this scenario in other aspects of the application and decided to split up functionality into separate controller/actions to simplify the process. However, I would like to have a better understanding of how to approach more complex UI problems, particularly related to the MVC model binding features.

Any help on this subject would be greatly appreciated.

All the possible values are stored in a dropdown list. Using jQuery, I toggle the form (for a new payment method) and the display (for an existing method)

Answer 1

I have decided to try to circumvent model binding altogether and use FormCollection, IValueProvider, and TryUpdateModel inside my controller action.