Handling "Multiple Forms" on the Same Page

QCubed only allows each front-end "web page" to only have a maximum of one Form class per page. Because of the many issues of managing and maintaining formstate across multiple Forms, QCubed simply does not allow for the ability to have multiple Forms per page.

However, as the development of a QCubed application matures, developers may find themselves wishing for this ability:

  • As QForms are initially developed for simple, single-step tasks (e.g. "Post a Comment", "Edit a Project's Name", etc.), developers may want to be able to combine these simpler QForms together onto a single, larger, more cohesive Form, utilizing AJAX to provide for a more "Single-Page Web Application" type of architecture.
  • Moreover, developers may end up with a library of these Forms that they would want to reuse in multiple locations, thus allowing for a much better, more modularized codebase.

Fortunately, the Panel control was specifically designed to provide this kind of "Multiple Form" functionality. In the example below, we create a couple of custom Panels to help with the viewing and editing of a Project and its team members. The comments in each of these custom controls explain how a custom Panel provides similar functionality to an independent, stand-alone Form, but also details the small differences in how the certain events need to be coded.

Next, to illustrate this point further we create a PersonEditPanel, which is based on the code generated PersonEditFormBase class.

Finally, we use a few QAjaxActions and QAjaxControlActions to tie them all together into a single-page web application.

View/Edit Example: Projects and Memberships

Please Select a Project: