Ideas in implenting the following entry form in ASP.NET MVC 2

Question

Hi guys,

I have a very simple data entry form to implement. It looks like this:

Obviously I have mocked out the actual requirements but the essence is similar.

• Entering a name and clicking history should bring up a pop up pointing to the url '/student/viewhistory/{name}'
• Name and age are required fields
• The sub form (in the mockup) with Class (a drop down, containing the numbers 1 -> 10) and Subject (containing A -> D, say) form a unique pair of values for which a score is required. So, selecting the Class and Subject, entering a score and clicking on Add should 'add' this record for the student. Then the user should be able to click Save (to persist the entry to the database) or be able to add further (class, subject, score) pairs to the entry.

Any ideas how to smartly implement this? (I am coming from a DWH field... so thinking in a stateless manner is slightly foreign to me.) Any help is appreciated.

I would imagine a smart use of jQuery would give a easy solution.

Regards, Karan

Answer 1

This may be a bit overkill but you'd most probably benefit from learning about application foundations and scaffolding. I would start here http://sharparchitecture.net/ . Once you have the basic app set up you could use jquery along with the plugins like

• jquery forms

• jquery Validation

to handle the form up to the submit. There a quite a few plugins to help with popup window.

How to submit an arbitrary number of sub entities (like the classes of a student in your example) is really a question of your specific server side implementation. This can be done quite elegantly with s#arp architecture but requires some tweaking of the form before submit.

Welcome to the stateless world of web forms! and good luck, David

Answer 2

OK, in that case I'll show you how I've done this on several opportunities: First I place a div inside the jquery with empty fields like this:

$("#add").click(function() {
    $("#classes").append($(
    "<div>" 
    +"   <select name='Student.Classes[0].Class'>"
    +"     <option value='1'>Class 1</option>"
            ....
    +"  </select>"
    +"   <select name='Student.Classes[0].Subject'>"
    +"     <option value='1'>Subject 1</option>"
            ....
    +"  </select>"
    +"  <input name='Student.Classes[0].Score' value='0'/>"
    +"</div>"
    )
);});

This div will added to the list of classes when something with the id #add is clicked.

Next I catch the form before the submit and give each entity (Student.Classes in this case) an index starting from 0. Like this:

 $("form").submit(function () {
        $("div", "#classes").each(function (i) {
            $(":input, :hidden", this).each(function () {
                $(this).attr("name", $(this).attr("name").replace(/\[0\]/, "[" + i + "]"));
            });
        });
    });

If your are using a ModelBinder that supports sub entities this should end up on the server with a list of Classes within the Student. Of course you can use firebug to see exactly what is being posted to the server.

Hope this gives some direction.