Skip to content

joeriks/DynaForms

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

49 Commits
 
 
 
 
 
 
 
 

Repository files navigation

With the help of the files DynaForms.cs & DynaFormTemplates.cs (just add them to your App_Code folder for your WebMatrix or MVC-projects) you can create and handle Html forms easily.

Basic add new form with built in templates:
-------------------------------------------

  var personForm = new DynaForm("person")
    .AddFormField("Name", required: true)        
    .AddFormField("Address")
    .AddFormField("Active", type: InputType.checkbox);


Basic add new form with custom templates:
-----------------------------------------

  Define the html template with parameters like this (idName will be replaced with id='{fieldName' name='{fieldName'}):

  var customTemplate = "{labelText}: <input type='text' {idName} value='{value}'/>{errorMessage}<br/>\n";

  var f = new DynaForm("formname");
  f.AddFormField("Name", template: customTemplate);
  f.AddFormField("Address", template: customTemplate);


Display form html:		
------------------
		
  @personForm.Html()		
  
  Based on the built in templates with the sample above it will create this form:
  
  <form id="person" method="post" action="#">
   <div class='labelinput'>
    <label for='name'>Name</label>
    <input type='text' id='name' name='name' value=''/>
   </div>
   <div class='labelinput'>
    <label for='address'>Address</label>
    <input type='text' id='address' name='address' value=''/>
   </div>
   <div class='labelcheckbox'>
    <label for='active'>Active</label>
    <input type='checkbox' id='active' name='active'/>
   </div>
   <div class='submit'>
    <input type='submit' id='submit' name='submit' value='submit'/>
   </div>
  </form>
  
  

Handle post:
------------

  if (IsPost)
  {
    if (personForm.TryUpdateModel().IsValid)
    {
      // Form is valid. Get the model from the dynaform, by default it's an ExpandoObject:
      dynamic result = personForm.Model;

      // Insert result into the db
      db.Execute("INSERT INTO person (Name, Address, Active) VALUES (@0,@1,@2)", result.Name, result.Address, result.Active);
    }
    else
    {
      // Form is not valid - show form again with validation error messages:
      @personForm.Html()
    }
  }
	
Use client side validation:
---------------------------

DynaForms create a jQuery Validate json-options string, which means you can add client side validation just by including these lines:

<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js'></script>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js'></script>

@Html.Raw(personForm.ClientSideScript())

Currently the client side rules are "required", "email", "maxlength", "minlength", "max" and "min". On server side there's also a Regex rule.


Change Html output for the controls:
------------------------------------

Either:

1. Add a custom template when you create your forms. Use the optional replace keywords, {idName}, {labelText}, {fieldName}, {value} and {errorMessage}

2. Or change the default html templates for the "field controls" by editing the templates in DynaFormTemplates.cs:
public const string TemplateInputText = @"
 <div class='labelinput'>
  <label for='{fieldName}'>{labelText}</label>
  <input type='text' id='{fieldName}' name='{fieldName}' value='{value}'/>{errorMessage}
 </div>";

Add plain Html to the forms
--------------------------- 
You can add plain Html with AddHtml():
  var f = new DynaForm("formname")
    .AddHtml("<fieldset>\n")
    .AddHtml("  <legend>Fieldset 1</legend>\n")
    .AddFormField("Name")
    .AddFormField("Address")
    .AddHtml("</fieldset>\n"); 
 
More information:
-----------------
There are tests and a sample to look at.

About

Generate HTML forms

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages