Click here to Skip to main content
14,303,639 members

Formify - Forms Made Fast

Rate this:
5.00 (6 votes)
Please Sign up or sign in to vote.
5.00 (6 votes)
27 Dec 2018CPOL
Generate forms from MVC models in one simple line of code

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

No Biography provided

Comments and Discussions

 
QuestionAdd sample model and screenshot of rendered form. Pin
Matt Slay28-Dec-18 16:17
memberMatt Slay28-Dec-18 16:17 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Tip/Trick
Posted 27 Dec 2018

Stats

5.2K views
195 downloads
9 bookmarked