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.Standalone 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
@FF.PropertiesFor(someObject).Render(Html);

Installation

1. Install the library

For ASP.NET MVC 5
install-package FormFactory
install-package FormFactory.AspMvc
install-package EmbeddedResourceVirtualPathProvider *
            
For ASP.NET MVC Core
install-package FormFactory
install-package FormFactory.AspNetCore
Then configure core to serve embedded files ( see startup.cs lines 36 and 60)
* You can install FormFactory.Templates if you don't want to use the EmbeddedResourceVirtualPathProvider

2. Add the assets to your page

<link href="/Content/FormFactory/FormFactory.css" rel="stylesheet" type="text/css"/>
<script src="/Scripts/FormFactory/FormFactory.js" type="text/javascript"></script>

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.AspMvc.Example/Models/Examples/AutoCompleteExample.cs

Choices

In ChoicesExample.cs

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

Date Time Pickers

In DateTimePickersExample.cs

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

Dynamically Hidden Properties

In DynamicallyHiddenPropertiesExample.cs

Could not get source from https://raw.github.com/mcintyre321/FormFactory/master/FormFactory.AspMvc.Example/Models/Examples/DynamicallyHiddenPropertiesExample.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.AspMvc.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.AspMvc.Example/Models/Examples/EnumExample.cs

Inhertitance

In InhertitanceExample.cs

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

List Rendering

In ListRenderingExample.cs

Could not get source from https://raw.github.com/mcintyre321/FormFactory/master/FormFactory.AspMvc.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.AspMvc.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.AspMvc.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.AspMvc.Example/Models/Examples/SimplePropertiesExample.cs

Form for MVC action:

Given this action... 

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

..writing this in the view... 

 
        var form = Html.FormForAction((HomeController c, string p0, string p1) => c.SignIn(p0, p1));
        @form.Render(Html); //renders 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(DateTime) , "date")
                    {
                        DisplayName = "Your birthday",
                        NotOptional =true,
                        GetCustomAttributes = () => new object[] { new DateAttribute() }
                    },
                    new PropertyVm(typeof(string) , "textmessage")
                    {
                        DisplayName = "Type a message:",
                        NotOptional =false,
                        GetCustomAttributes = () => new object[] { new MultilineTextAttribute(),  new DisplayAttribute(){Prompt = "placeholder??"}, new DisplayAttribute(Description = "Type anything here.")  },
                    },
                     new PropertyVm(typeof(string) , "number")
                    {
                        DisplayName = "Select a number",
                        NotOptional =false,
                        Choices = new List() {"one","two","three","four" },
                    },
                    new PropertyVm(typeof(string), "username")
                    {
                        DisplayName = "Username",
                        NotOptional = true,
                        Suggestions = new List() { "holy poo" },
                    },
                    new PropertyVm(typeof(string), "password")
                    {
                        DisplayName = "Password",
                        NotOptional = true,
                        GetCustomAttributes = () => new object[]{ new PasswordAttribute() }
                    },
                    new PropertyVm(typeof(string), "os")
                    {
                        DisplayName = "Operating System",
                        NotOptional = true,
                        Choices = new List() {"OSX", "IOS", "Windows", "Android"},
                        Value = "Windows", //Preselect windows
                        GetCustomAttributes = () => new object[] {new RadioAttribute(), new System.ComponentModel.DescriptionAttribute("Make a choice above.") }
                     },
                    new PropertyVm(typeof(bool), "check")
                    {
                        DisplayName = "Check if happy",
                        NotOptional = true,
                        Value = false, //Preselect false (unchecked)
                        GetCustomAttributes = () => new object[] {new FormFactory.Attributes.LabelOnRightAttribute() } // right label
                     },
                    new PropertyVm(typeof(bool), "check2")
                    {
                        DisplayName = "Check if sad",
                        Value = false, //Preselect false (unchecked)
                        NotOptional =true

                     }
              };
	    
...
//render it in your view
@formModel.Render(Html)

 

...will render this form: