Ideas for implementing the following input form in ASP.NET MVC 2

Question

I have a very simple data entry form for implementation. It looks like this:

Obviously, I modeled the actual requirements, but the essence is similar.

• When you enter a name and click history, a pop-up should appear indicating the URL "/ student / viewhistory / {name}"
• Name and age are required
• The subform (in the layout) with Class (a drop-down list containing numbers 1 → 10) and Subject (containing, say, A → D) form a unique pair of values ​​for which an evaluation is required. Thus, the choice of class and subject, entering the grade and clicking on the “Add” button should “add” this entry for the student. Then the user should be able to click the "Save" button (to save the record in the database) or add additional pairs to it (class, subject, grade).

Any ideas how to implement this correctly? (I came from the DWH area ... so stateless thoughts are a little foreign to me.) Any help is appreciated.

My guess is that using jQuery smartly will give a simple solution.

Regards, Karan

Answer 1

OK, in this case I will show you how I did this in several ways: First, I put the div inside the jquery with empty fields as follows:

$("#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 be added to the class list when it clicks something with id #add.

Next, I will catch the form before submitting and give each object (Student.Classes in this case) an index starting with 0. Example:

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

If you use a ModelBinder that supports child entities, this should end on the server with a list of classes in Student. Of course, you can use firebug to see exactly what is being sent to the server.

Hope this gives some direction.

Answer 2

This may be a little redundant, but you are likely to benefit from learning the basics of applications and scaffolding. I would start here at http://sharparchitecture.net/ . When you have a basic application, you can use jquery along with plugins, for example

• jquery forms

• Jquery validation

to process the form before submitting. There are several plugins in the popup window.

How to send an arbitrary number of entities (for example, the student classes in your example) is really a matter of your specific server-side implementation. This can be done quite elegantly with the s # arp architecture, but requires pre-configuration of the form before submitting.

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