How to implement different data entry modes using jQuery with ASP.net

Question

I am researching about the right approach on how to implement data entry forms that change according to the data entry mode. Here's the situation:

1. Consider a parent-child form where you have a list of employees and a section to display employee details.

2. Clicking on an employee number from the list will cause the employee details to appear on the right-hand side of the screen using an HTML table.

3. The employee details will first appear as a read-only form. For example, the Country of Birth field would be displayed as 'SPAN' rather than a SELECT element.

4. When the user clicks the Edit button than the Country of Birth field is changed to a SELECT element containing a list of countries to choose from.

It is the behaviour of the ASP.NET FormView with ItemTemplate, EditItemTemplate and InsertItemTemplate that I would like to implement using jQuery.

In essence the data entry mode would be toggled by clicking buttons. I thought I would approach this requirement by using CSS rules for fields which would contain different DOM elements according to the data entry mode. As I mentioned earlier, if the mode is read-only show a SPAN otherwise show a dropdown element or textarea. Using jQuery I could toggle() between the different classes according to the data entry mode. Of course this would require two different types of elements for the same field.

Is this the best approach? I'm keen to hear from the experts. Thank you.

Answer 1

You have two choices.

1. Use standard asp.net forms. This has been well documented and typically does not include two controls as you describe. Instead of a read-only control and an edit control, the server side will render the page using the same user control or server control but in an edit mode instead of read only. This way is often used when there are security requirements or for some other reason you don't want the client deciding which items are editable. (NB some people will get grumpy and talk about how you can do security with AJAX, but this is still true. If you want security and server side validation or processing this is easier).

2. Use jQuery / AJAX (and/or MVC). In this model the client decides everything about how the interface works and then sends information to a web service. In this case you might (as you describe) have two controls which you show and hide. Typically this is more work than it is worth and you can just enable and disable if a control is editable. It depends (of course) on the interface elements type.

You might say "Ok, fine -- but which should I use?"

It depends.

If you know one of the technologies you should use the one you know.

If you don't know them then I would say forms is easier for a simple project like this. (Lots of people will argue with this, it is just my opinion.)

However, MVC with AJAX is considered the better stack right now because it allows for very complicated UI interactions. More complicated than you are describing. It can also give a better user experience since the UI can be more responsive.

---

The state of the data entry would be important in the application. I would like the ability to go 'If fvwMyForm.DefaultMode = FormViewMode.ReadOnly' then ... as is done in ASP.net.

This does not make sense. Unless you are using forms there won't be any variables on the server (or in the StateBag) which correspond to the state of editing. If you want this then you have to use forms and not jQuery to change your state. You will need a server round trip to change this variable.