Home > Code > ASP.NET MVC Helper – Dynamic Forms based on Model

ASP.NET MVC Helper – Dynamic Forms based on Model

September 28th, 2009

Recently, I was working with a fairly complex data model that required a simple input form. Being the lazy programmer I am, I did not feel like crunching out the HTML required to generate this form by hand. So instead, I wrote an HTML helper class to generate the form for me.

Model

Here is the data model we are going to be working with in this example.

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
    public Address Address{ get; set; }
    public Gender Gender { get; set; }
}

public class Address
{
    public string Address1 { get; set; }
    public string Address2 { get; set; }
    public string City { get; set; }
    public string State { get; set; }
}

public enum Gender
{
    Male,
    Female
}

Goal

The goal here is to have a View that needs only call this helper to generate the textboxes and dropdown lists used for entering data. This way we avoid manually typing all of those angle brackets. So our View will look something likeā€¦

 

<h2>Dynamic Form</h2>

<%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %>

<% using (Html.BeginForm()) {%>

<%= Html.DynamicInputs(Model, "Enter Person Information", string.Empty) %>

<p>
    <input type="submit" value="Submit" />
</p>

<% } %>

 

Dynamic Input Helper

The DynamicInputHelper will enumerate the data model properties and output forms elements responsible for receiving input from the user based on the data type. This is pretty simple.

 

public static class DynamicFormHelper
{
    public static string DynamicInputs<T>(this HtmlHelper helper, T obj, string heading, string prefix)
        where T : class
    {

        // Contruct id for model binding
        if (!string.IsNullOrEmpty(prefix))
            prefix += ".";

        // Make sure we have an instance of the obj
        if (obj == null)
            obj = (T)Activator.CreateInstance(typeof(T));

        var type = obj.GetType();

        var sb = new StringBuilder().Append("<fieldset>");

        sb.AppendFormat("<legend>{0}</legend>", heading);

        foreach (var propertyInfo in type.GetProperties())
        {
            if ((propertyInfo.PropertyType.IsValueType && !propertyInfo.PropertyType.IsEnum) || propertyInfo.PropertyType.FullName == typeof(string).FullName)
            {
                sb.AppendFormat(
                    "<p><label for=\"{0}\">{1}:</label>" +
                    "<input type=\"text\" id=\"{0}\" name=\"{0}\" value=\"{2}\"></p>",
                    prefix + propertyInfo.Name,
                    propertyInfo.Name.SpaceCamelCase(),
                    propertyInfo.GetValue(obj, null));
            }
            else if (propertyInfo.PropertyType.IsEnum)
            {
                sb.AppendFormat("<p><label for=\"{0}\">{0}:</label>", propertyInfo.PropertyType.Name.SpaceCamelCase());

                sb.Append(
                    helper.SelectFromEnum(propertyInfo.PropertyType,
                    prefix + propertyInfo.PropertyType.Name.SpaceCamelCase()));

                sb.Append("</p>");
            }
            else
            {

                var child = Convert.ChangeType(propertyInfo.GetValue(obj, null) ??
                    Activator.CreateInstance(propertyInfo.PropertyType), propertyInfo.PropertyType);

                sb.AppendFormat(
                    helper.DynamicInputs(child, propertyInfo.Name, prefix + propertyInfo.Name)
                    );
            }
        }

        sb.Append("</fieldset>");
        return sb.ToString();
    }

    public static string SelectFromEnum(this HtmlHelper helper, Type type, string name)
    {
        var sb = new StringBuilder();

        sb.AppendFormat("<select id=\"{0}\" name=\"{0}\">", name);

        foreach (var e in Enum.GetNames(type))
        {
            sb.AppendFormat("<option value=\"{0}\">{1}</option>", (int) Enum.Parse(type, e, true), e.SpaceCamelCase());
        }

        sb.Append("</select>");

        return sb.ToString();
    }

    public static string SpaceCamelCase(this string camelCase)
    {
        if (camelCase == null)
            throw new ArgumentException("Null is not allowed for StringUtils.FromCamelCase");

        var sb = new StringBuilder(camelCase.Length + 10);
        bool first = true;
        char lastChar = '\0';

        foreach (char ch in camelCase)
        {
            if (!first &&
                 (char.IsUpper(ch) ||
                   char.IsDigit(ch) && !char.IsDigit(lastChar)))
                sb.Append(' ');

            sb.Append(ch);
            first = false;
            lastChar = ch;
        }

        return sb.ToString(); ;
    }
}
 

Finished Product

If all goes according to plan you should end up with a finished product that looks something like this. The coolest part about this form is that it is rendered so the Model Binder will know how to construct the object on the server when the request is received.

tmpE18B

 

Update 9/30/2009: As pointed out in the comments below, check out Input Builders MvcContrib for a more complete and robust solution for your form generation needs.

  • Facebook
  • Twitter
  • Delicious
  • Reddit
  • StumbleUpon
  • Share/Save/Bookmark
Author: Christopher Patterson Categories: Code Tags:
  1. dario-g
    September 29th, 2009 at 15:35 | #1

    Looks nice but better will be with partals for templating :)

  2. September 29th, 2009 at 18:29 | #2

    I found something similar by Eric Hexter called Input Builders – now a part of MvcContrib as MvcContrib.UI.InputBuilders (just added to the latest build). His uses template views and partials to build the forms.

    It’s always a lot more fun to build it yourself though! :)

  3. October 9th, 2013 at 08:57 | #3

    Thanks for this… license?

  4. Ananth
    February 21st, 2014 at 00:46 | #4

    Hi sir

    I am getting this error..

    ‘System.Web.Mvc.HtmlHelper’ has no applicable method named ‘DynamicInputs’ but appears to have an extension method by that name. Extension methods cannot be dynamically dispatched. Consider casting the dynamic arguments or calling the extension method without the extension method syntax. d:\MVC Projects\MvcApplication40\MvcApplication40\Views\Person\Index.aspx 10 5 MvcApplication40

  5. February 21st, 2014 at 18:46 | #5

    If you have done your preliminary work, the dog should
    go down for you. There is a department on Frree and Low cost Help which can’t allow specific referrals, butt which points you in tthe right direction.
    This time frame accounts for approximately 2,000 generations of humans since the great split, during which
    time modern genetic features developed independently.

  6. John A Davis
    June 22nd, 2014 at 02:03 | #6

    Sure would like to know how to do this not with a model of the data but with a database table schema.
    For example, there are 20 columns in a table, the code generates an input form and validation for all columns. That is more real world.

  1. No trackbacks yet.