 |
The Answer To Life, The Universe and Everything Written on October 21, 2009, by Mehmetali Shaqiri. |
One quiet morning, while going through the motions of my daily routine – drinking coffee with my fellow programmers, I got a call from a client who said:
So I drank my coffee and started brainstorming on how I could accomplish this task the best way I could, always keeping in mind that I would have to finish it during the day. The task was peace of cake, I could do it in two hours, but the challenge was on UI. How to make it more dynamic (allowing users to enter multiple previous job positions, multiple phone numbers, multiple addresses etc.) and give users a greater experience on using the app. I wanted to accomplish this with no postbacks at all.
So in this case, the answer to life, the universe, and everything for me it was jQuery.
You’ve probably heard about jQuery, The Write Less, Do More JavaScript Framework. For those who didn’t have the chance to get their hands into jQuery, let me summarize it for you:
- It’s a lightweight JavaScript framework (less than 20 KB)
- Access DOM element using CSS selectors.
- Needless to check for null objects
- Uses chains of actions
- MVC JavaScript Architecture
- Simple and very clean … the SPARTAN WAY
- CSS 3.0 compliant
- Cross-Browser
- Extensible (support for plugins)
- And a great community support
And without further ado, let’s do that voodoo that we do do so well.
Below you have a screenshot of the above scenario.
- jQuery Life Saviour
As you can see, the job position and company name are added based on user desire and are appended dynamically to the DOM. Initially I’ve defined only the FamilyName and the FirstName of the applicant. Then I’ve defined the container workContainer in which after the DOM is ready, are initialized the first controls
<fieldset> <legend>Your Information</legend> <table border="0"> <tbody> <tr> <td align="right" valign="top">Family Name:</td> <td align="left" valign="top"></td> </tr> <tr> <td align="right" valign="top">First Name:</td> <td align="left" valign="top"></td> </tr> <tr> <td align="right" valign="top"> ...</td> <td align="left" valign="top">...</td> </tr> <tr> <td align="right" valign="top">Work Experience?</td> <td align="left" valign="top"></td> </tr> </tbody> </table> <input type="submit" value="Apply For this Job" /> </fieldset>
The classes defined in this project are Applicant and WorkExperience.
namespace jQueryLifeSaviour.Entities { public class WorkExperience { public string Position { get; set; } public string Company { get; set; } } }
namespace jQueryLifeSaviour.Entities { public class Applicant { public string FamilyName { get; set; } public string FirstName { get; set; } public List<WorkExperience> Experience { get; set; } } }
And here is the action which occurs after you click on Apply for this job button.
/// Get user input posted by view. /// Accepts only POST HTTP Methods, /// although in this case the GET would be just fine since we are not dealing with sensitive data ///The collection of posted form elements /// The current view (in this case Result) [AcceptVerbs(HttpVerbs.Post)] public ActionResult Result(FormCollection form) { //create a new intance of Applicant class Applicant obj = new Applicant { FamilyName = form["FamilyName"], FirstName = form["FirstName"], Experience = new List<WorkExperience>() }; //hold all input fields regarding company info string[] companies = form.GetValues("company"); //hold all input fields regarding job position string[] positions = form.GetValues("position"); //iterate through posted work experience and fill the WorkExperience list for (int i = 0; i < positions.Length; i++) { obj.Experience.Add(new WorkExperience { Position = (positions[i]), Company = companies[i] }); } ViewData["Applicant"] = obj; return View(); }
I’ve been using jQuery for a while and it made me realize that life is so much easier when using jQuery. With jQuery, JavaScript is no more “the necessary evil”, it’s even fun to code with.
You can download the full project here. This demo is developed on ASP.NET MVC 1.0 Framework, so you must install it in prior, otherwise you want be able to open it.
Tags: C#, jQuery, MVC. If you would like to leave a comment, click here: 3 Comments. or stay up to date with this post via RSS
Leave a Comment
If you would like to make a comment, please fill out the form below.
I have started using JQuery about 6 months ago, building Insurance web-based application on the company I’m currently working… At the very beginning I was like “It would be better to get back to use plain javascript, same as I did before…” because I didn’t have much time to learn JQuery and to accomplish the project for the given deadline, but after 2 days I just realized that We could even finish the project much faster if we use JQuery, and it came out true… Few of the reasons are already mentioned in this post
…
Nice entry Mehmetali…
When I first started using jQuery I was amazed by how great it handles DOM manipulation and especially because of the separation of functionality (the “behavior layer”) from a Web page’s structure/content and presentation => Unobtrusive JavaScript. It is very elegant and fast, really fast.
I was really surprised that no one made a presentation about jQuery in the Software Freedom Kosova Conference.
Thnx for the comments Hajan.
I definitely agree with your thoughts.
Regarding Software Freedom Kosova Conference, I’m not very surprised coz (as I remember) it wasn’t mentioned even in DevReach (as per the schedule) this year in Sofia, Bulgaria.
Anyway, It’s still quite new library and will have its time in the near future, let it be your motive to prepare some good JQuery lecture for some of the upcomming conferences and Tech. events near here and earn some good points by speaking about JQuery..
Greets…