MVC with jQuery/Ajax + xVal

Tuesday, July 7, 2009


This is my first MVC (Model View Controller) site that I've been experimenting with. It uses a lot of jQuery/Ajax to accomplish it's many tasks.
I did my best to simulate what a new Facebook post looks like.
Fill out all the fields, select a date from the calendar and click "Add Run"
You'll see it add a new run to the "jog log" just like a Facebook post would do.

It's also got some snazy client side form validation (so the user doesn't have to wait for the server to tell them that they've not filled out something correctly)
It uses xVal to write the validation rules on the server side (in C#). Then at run time the xVal framework spits out the rules in minified javascript.

You'll still need to have server side validation for security purposes, but you can still validate against the original rules you wrote in C# so you only have to write the rules once.

Here are the order of events to give you an idea of how it works.
  • Fill out all fields correclty
  • Click "Add Run"
  • javascript wraps values into an object and posts them to the server
  • server validates the objects values
  • if not valid, it throws an error which is then handled my javascript and makes a pop-up box that says "fill out all fields correclty"
  • if successfully added to the database, it runs a javascript success function that calls some javascript animating functions that slide the div down and fade in the new record.
All actions rely upon one another. So it won't add a record visually to the html before it has added it to the database...the same goes for the delete function.

The functionality is cross-browser although I did not take the time to necessarily make it cross-browser as far as css goes.

Either way it's a successfull example of how the jQuery and xVal plays with MVC.

1 comments:

Technologicguy said...

This was well put together. I had to write a facebook lite program for my web programming class so I know how much work this requires. Nice work Kyle!

Post a Comment