ASP.NET MVC Forms with both AJAX and traditional POST support

Question

I have a form that I currently enumerate with some Javascript functionality and then post it with jQuery .ajax() to a MVC controller action. I have few questions on my options if I wanted to add traditional (no-javascript) support for posting this form.

1) The thing is I have some data that is not in fields but it is just text in divs. Since I'm currently posting with AJAX I can get the contents of these divs by their id's before posting and include them in post. I assume that this information will be missing from a traditional POST.

One idea is to make an <input> for these divs also but hide it on page. And then use those in POST.

2) If I decide to only use AJAX post, can I get rid of the form completely?

3) Given that I stay with AJAX post, what format do you suggest to use for posting values? JSON, comma-delimited (problematic for complex data), something else?

4) Do you normally support both ways? Because if I look at my forms right now, they use a ton of jQuery and jQuery UI functionality and these would be an overkill to implement without JavaScript. How likely is it that users won't have JS enabled and is it ok to just say "JS is required"?

For this concrete case, I'm building an inhouse, on-demand application that won't be web oriented (at least not yet) so I do have an option to say that JS is required.

ty

Answer 1

If you want to go the route of maintaining a workable site without javascript, then I'd suggest that you start by making a site the works without it, then use javascript to modify that interface to what you really want with javascript enabled. This would entail starting with all input contained in input elements, then replacing those elements using javascript with your div elements -- or, more realistically, removing the inputs and showing the pre-existing div elements.

I see no need to get rid of the form even when using AJAX, though technically there's no reason to have it. One thing I like to do, however, is to keep the form, then have my submit method pull the action from the form tag so that I don't need to encode it directly in the javascript. You might find that this makes it easier to share javascript between your various forms.

I always serialize to request parameters, just like the form would normally. The easiest way to do this is with the jQuery serialize method, but that will only work on the inputs. You could also construct a hash (key-value pairs in an object) and supply that as the data parameter for your AJAX. It will automatically serialize to request parameters. Using anything else will require that you deserialize using your own code rather than the model binding code in MVC.

For public-facing web apps I try to keep the interface working for both javascript-enabled and -disabled browsers. Non-javascript browsers sometimes don't get access to certain features, though. For internal apps, I'd be comfortable with requiring javascript since you (or someone in your company) has more control over it.

Answer 2

I would place the div text into hidden fields - otherwise it will not be picked up by a traditional POST.

I personally would not get rid of the form, as what happens if your JS is disabled/broken for some reason? Even if the user has JS enabled, if (for example) a JS file doesn't load your form will not be able to send the data by AJAX. Have the AJAX, but make sure you can fall-back to traditional form POST.