How to build an order processing form in ASP.NET MVC and jQuery/JavaScript

Question

I need help with building page where information is entered on a form at the top of the page and then added to a grid below the form when the user clicks the "Add" button. The form will have drop-down boxes so the colums in the grid representing the selection should show the text of the drop-down and not the index/id. Once all data has been entered (multiple rows in other words) the data is submitted to the server for processing.

Ideally all editing and validation of data should happen on the client, i.e. with JavaScript/jQuery and submitted all at once to the server.

Second price would be AJAX calls to the server to add/edit/remove line items on the relevant button clicks/grid selections. I would also then need a way to maintain the data on the server for the particular session.

I am using ASP.NET MVC 1.0. and am a noob with JavaScript/jQuery. I have used the Telerik MVC grid in other sections of the site so it would be cool it I can stick with it - but not essential :-)

Thank you very much!

Answer 1

If possible, consider using a more standard MVC approach in version 1 with less client-side automation. I'd recommend starting with ajax controller actions that add each line and handle the validation per the built-in MVC features.

Then revise it using xVal for client side validation.

Then start looking into maintaining the state on the client as items are added.

Then as a final stage, start working on your client side grid using the xVal and client state stuff you've already worked out in previous versions. There are a number of JQuery grids that are quite capable.

Staging it out lets you learn a little as you go, and allows you to produce a working solution sooner in case you have a ship-date to meet.

There are also some goodies coming in MVC 2.0 that might help, and the third party market is is finally starting to get some actual traction with MVC components... that'll probably wait until after MVC 2.0 ships to really kick up though.

Answer 2

Gerhard,

He is a site to get you started witht the concepts of using jquery for sending/recieving data using postbacks.

http://encosia.com/

Answer 3

For an Ajax approach you could use something in line with these guys.

The use the build-in Ajax helpers. Such as the actionlink:

<%= Ajax.ActionLink("LinkText", "ActionName", "ControllerName", 
new { id = Model.ID }, 
new AjaxOptions() { UpdateTargetId = "DIV_ID" })%>

They call an method (accepting ajax calls only if needed) which returns a partial page containing for instance the create/edit form. This page can have an

using( Ajax.BeginForm("ActionName", new { id = Model.ID }, new AjaxOptions() { 
UpdateTargetId = "DIVToUpdateOnYourMainPage" }) )

something like that would work in an Ajax way, effectively loading a new partialpage in a DIV on your mainpage everytime you click one of the ajax links, which are generated in the controller, so you can do various (DB) actions here.

Just an idea.