joeriks/DynaForms
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
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 0
No packages published