Fork me on GitHub

FormFactory

The ASP.NET MVC html form builder

View project on GitHub

Reflection form generation

Because you shouldn't have to update your html when you update your object model

Convention based rendering

Specify custom templates for rendering different object types.

Twitter bootstrap support

Styled for bootstrap (by default)

Embeddable

FormFactory.RazorEngine can be used in non ASP projects like console apps, services or WebAPI projects.

What is it?

FormFactory renders complex object forms automatically. It refects over an object model or method signature, and builds an intermediate model representing the form and properties. These models are then rendered using customisable templates.

FormFactory can build complex nested forms with rich content pickers. By following a few simple code conventions, properties with multiple choices and suggested values can be written in a few lines of code.

How to use it

//In a cshtml file
Html.PropertiesFor(someObject).Render(Html);

Installation

Install the library 
Nuget install-package FormFactory.AspMvc
or for non ASP MVC projects
Nuget install-package FormFactory.RazorEngine
OR Install the content files (.cshtml, .js, .css) 
Nuget install-package FormFactory.Templates
Update your layouts to include 
<link href="/Content/FormFactory/FormFactory.css" rel="stylesheet" type="text/css"/>
<script src="/Scripts/FormFactory/FormFactory.js" type="text/javascript"></script>
 
Note: To use FormFactory without installing FormFactory.Templates you must install and configure the EmbeddedResourceVirtualPathProvider

Rendering objects

Auto Complete

AJAX suggestions using [SuggestionsUrl("...someurl...")]

In AutoCompleteExample.cs

Could not get source from https://raw.github.com/mcintyre321/FormFactory/master/FormFactory.Example/Models/Examples/AutoCompleteExample.cs

Choices

By creating a method called {property}_choices you can create select lists

In ChoicesExample.cs

Could not get source from https://raw.github.com/mcintyre321/FormFactory/master/FormFactory.Example/Models/Examples/ChoicesExample.cs

Date Time Pickers

In DateTimePickersExample.cs

Could not get source from https://raw.github.com/mcintyre321/FormFactory/master/FormFactory.Example/Models/Examples/DateTimePickersExample.cs

Editable Collections

Writable ICollections get rendered as re-orderable lists

In EditableCollectionsExample.cs

Could not get source from https://raw.github.com/mcintyre321/FormFactory/master/FormFactory.Example/Models/Examples/EditableCollectionsExample.cs

Enum

Enums are rendered as dropdowns

In EnumExample.cs

Could not get source from https://raw.github.com/mcintyre321/FormFactory/master/FormFactory.Example/Models/Examples/EnumExample.cs

List Rendering

settable IEnumerable<strings> with choices get rendered as multi-selects

In ListRenderingExample.cs

Could not get source from https://raw.github.com/mcintyre321/FormFactory/master/FormFactory.Example/Models/Examples/ListRenderingExample.cs

Nested Forms

Choices can be objects too, FormFactory works recursively so you can create complex nested forms

In NestedFormsExample.cs

Could not get source from https://raw.github.com/mcintyre321/FormFactory/master/FormFactory.Example/Models/Examples/NestedFormsExample.cs

Nested Forms 2

Twitter
Facebook

In NestedFormsExample2.cs

Could not get source from https://raw.github.com/mcintyre321/FormFactory/master/FormFactory.Example/Models/Examples/NestedFormsExample2.cs

Simple Properties

Readonly properties are rendered as readonly
Writable properties can use MVC validation attributes

In SimplePropertiesExample.cs

Could not get source from https://raw.github.com/mcintyre321/FormFactory/master/FormFactory.Example/Models/Examples/SimplePropertiesExample.cs

Form for MVC action:

Given this action... 

    [HttpPost] public virtual ActionResult SignIn(string email, [DataType(DataType.Password)] string password)
        { //... }

..writing this in the view... 

 
using (var form = Html.FormForAction((HomeController c, string p0, string p1) => c.SignIn(p0, p1)))
{
    form.Render(); //renders the form
} //.Dispose() closes the form

 

...will render this form:

Programatically created form

By default FF reflects against a view model to produce a `PropertyVm[]` array, but you can also create the properties programatically, e.g. you could load a form definition from a database
You can build any of the examples above. 

//Build a model up in your controller or view   
var formModel = new[]
{
    new PropertyVm(typeof(string), "username")
    {
        DisplayName = "Username",
        NotOptional = true,
    },
    new PropertyVm(typeof(string), "password")
    {
        DisplayName = "Password",
        NotOptional = true,
        GetCustomAttributes = () => new object[]{ new DataTypeAttribute(DataType.Password) }
    }
};
	    
...
//render it in your view

@formModel.Render(Html)

 

...will render this form: