Alternatives to model binding for data submission

Question

I have an ASP.NET MVC2 application that contains a partial view that allows the user to set a variety of properties on a collection of objects. These are currently done using HTML input controls such as the textbox and dropdown list. I am using using out-of-the-box model binding to submit the user-entered values to the server via a form post.

For aesthetic reasons I need to replace all of my dropdown lists with hand-rolled alternatives that will display an icon for each item in the list, and have various rollover effects.

So I am now reviewing my options for how the selected values from these items will be included in the form post. The obvious solution seems to be to use hidden HTML controls, and use jQuery to set the value selected in a custom dropdown into the corresponding control.

Can anyone suggest a simpler/cleaner alternative to model binding in this instance?

Answer 1

Your first option of using hidden input elements was the first thing that came to mind however since you're looking for alternatives, here's one:

You could store the selected values as an array or JSON object in your Javascript and then use this object and post it back to your controller method for deserializing at the other end.

You'll probably have to manually map the posted values to their coresponding model property if you're using the default binder.

If I think up some more ideas I'll be sure to add them.

Answer 2

Aren't there css and javascript techniques to replace preserve existing form elements and simply adding your custom UI effects on top?

http://labs.engageinteractive.co.uk/itoggle/

I think the easiest solution is to layer unobtrusive javascript over your page which interact with live form elements behind the scenes. Then your not ripping out or re-writing huge and keystone pieces of MVC.