HTML submit button and AJAX-based message (ASP.NET MVC)

Question

I get design tips.

I am working on an application with another developer. I am from the world of Webforms, and he has done a lot with jQuery and AJAX. We are partnering with the new ASP.MVC 1.0 application.

He did some pretty interesting things that I just hugged, and used some third-party tools, etc. for datagrids etc.

but...

It rarely uses Submit buttons, while I use them most of the time. It uses a button, but then attaches Javascript to it, which invokes an MVC action that returns a JSON object. He then parses the object to update the datagrid. I'm not sure how it relates to server-side validation - I think it adds a message property to the JSON object. An example scenario is to “Save” a new record, which is then added to the gridview.

The user does not see postback as such, so it uses jQuery to disable the user interface during the action of the controller.

TBH, that looks pretty cool.

However, as I would do, it would use the Submit button for postback, let the ModelBinder populate the typed class of the model, parse it in my Action method, update the model (and apply any validation against the model), update it with a new record, and then send it back so that it appears in the view. Unlike it, I do not return a JSON object, I allow the binding of View (and datagrid) to the new model data.

Both solutions "work", but we obviously accept the application in different ways, so one of us must re-process our code ... and we don’t mind whose one should be executed.

What I would prefer is that we accept the "industry standard" for this. I am not sure if my background of WebForms affects the fact that its method simply “doesn’t feel good”, because “submit” is intended to send data to the server.

Any advice at all please thank you very much.

Answer 1

Both solutions are viable, although using submit buttons will make your application more accessible (i.e. JavaScript is not required to use it).

You can also do both - start from a page that has all the necessary logic using a postback, and “refresh” it with nice AJAX-y requests and animations. Thus, users with JavaScript will get noticeable shades, and the page will degrade correctly when a user without JavaScript visits the page, returning to the postback mechanism.

Answer 2

What you need to consider is how the application will work if javascript is not available. You should strive to ensure that the basic functions work without it. This is called progressive enhancement or unobtrusive javascript and is considered best practice.

http://en.wikipedia.org/wiki/Progressive_enhancement

The way you should do this is to use a form with a real submit button, and then capture this form to use ajax if the agent-agent supports it. This is usually pretty trivial using the jquery forms plugin. In your action method, you can check if the incoming request is an ajax request by checking the Request.IsAjaxRequest property. This is set by MVC automatically upon request with the X-Requested-With header set in XMLHttpRequest. Then you will return a full view or just some json based on this.

Here's a short screencast demonstrating this: http://www.youtube.com/watch?v=YQsFR1rkgMU&feature=player_embedded