patterns to use when building complex web UI

Question

I need to implement a wizardy, dynamic UI that uses complex validation of the style:

• If A = 1, show controls B, C, D. B is required, C is not, and D is not required must be less than 30 if it is populated.

• If A = 2, show controls B, D, E. B is not required, D is required but has no limits, and E is not required.

• If B is not null, show controls B, D, E. B is not required, D is required but has no limits, and E is not required.

Historically, I have made my presentation layer as "dumb" as possible in that it is only responsible for capturing user input and binding it to the appropriate domain model. The domain model, in turn, contains the logic needed to validate it's state and that of any child objects, and then communicates any invalid state to the presentation layer via notifications. As such, this requirement for a highly "intelligent" UI represents a departure for me.

I think I have no choice but to construct 2 very similar class hierarchies:

1. one that will capture presentation business rules (i.e. what fields are visible) and control what renders in the View
2. one that will capture domain business rules (when field A = X, then field B should be not null and in the range of n to m) to disallow objects with an invalid state from being persisted

Sill I have far more questions than answers on my strategy moving forward. Is there a set of design patterns I can draw on to build such a dynamic UI? I do have the option of using ASP.NET MVC or WebForms, so whichever approach will produce cleaner, testable code is preferred.

Answer 1

I'd certainly be using MVC and I'd also keep the logic in the business layer.

You could wire it up using jQuery ajax postbacks which would then check in with the business layer and get told what to display.

Once the choice has been made, you can then return a partial view and replace the contents of a div with the returned html.

I know this sounds like an ugly solution but i think with this level of interactivity with the code behind you have little choice. If you do a submit each time then that looks ugly.

the other benefit is that you don't just need to return a partialview. you could return a json object which describes the new rules for your controls such as length etc.

you then use jquery to monitor the input and enforce the new rules.

also try to think RESTfully if at all possible.