Editing existing data is a task common to many .NET-driven applications. In the ZSpeed application, for example, Admissions representatives contact prospective leads via phone and often need to update their interests and contact information. Previously, a PostBack was necessary to switch from viewing information to editing information. I recently updated the lead detail screen to accommodate this "mode change" using jQuery and View- and Edit-specific CSS classes, making the process of switching between the two modes seamless and reducing the load on the server.

I was able to make this interface improvement by doing the following:

• Changing my ASP.NET code so that both the View and Edit controls are visible and populated when loading a lead's information (edit controls previously used Visible="false" when initially rendered)
• Applying an unstyled .View class to view controls
• Creating an .Edit class with { display: none; } styling and applying it to the textboxes, checkboxes, and other inputs used to make changes to the lead information
• Replacing the postback-triggering <asp:Button> with a standard HTML <input> (note that the Save button still posts back to update information but may later be changed to perform the update task behind the scenes using AJAX)
• Adding a ViewState-enabled <asp:HiddenField> field to persist the view/edit state of controls across PostBack (since other controls on the page do cause PostBack).
• Attaching a jQuery-based function to a) toggle the visibility of View and Edit controls based on the .View and .Edit classes, b) change the text label of the Edit button, and c) toggle the value within the <asp:HiddenField>