Formify - Forms Made Fast

• Download solution - 1.1 MB

Introduction

Formify is a small HTML extension for MVC-based web applications which, like the name suggests, generates forms from a given model. Its main purpose was to get rid of the same repetitive code that fills web pages with a quick and clean function meant to take care of that for developers. Implementation is easy and customization is even more so: every HTML element created has a class and is made from pure browser settings and styles.

So far, the only requirements are the JQuery Validation scripts, which can be found in any Visual Studio solution on first creation.

Formify also supports multiple classes inside a model, allowing the user to input information for those, too.

Using the Code

The function 'makeForm' takes three arguments:

• Model (or any custom class)
• Controller Name
• Controller Action

In a cshtml page, the code would look like this:

@Html.makeForm(Model,"Home","Index")

What comes out is a basic HTML form with different input types based on the type of variable found in the model. While the majority use a text box (class: 'formify-textbox'), some use more complex types:

• DateTime: Uses an input element with type date formatted accordingly (class: 'formify-date')
• bool: Uses a checkbox (class: 'formify-checkbox')
• bool?: Uses a dropdown list to allow selecting NULL values (class: 'formify-dropdown')
• SelectList: Uses a dropdown list and looks for a variable in the model with a prefix '_Id' to its name for item selection (e.g: Cities and Cities_Id) (class: 'formify-dropdown')

This gets repeated until the code can't find more custom classes in the model.

By default, a line break is generated when a new custom object/class begins; this can be easily removed by looking for its class 'formify-hr'.

The structure of the created elements follows the typical div subdivision structure found in many popular websites:

1. A big div container (class: 'formify-div-container')
2. A 'right' div container for labels (class: 'formify-div-right')
3. A 'left' div container for inputs (class: 'formify-div-left')

Validation is supported using the appropriate data annotations and by using the JQuery Validation script library (examples inside the solution).

History

• 1.0 - Main release