Irwsoft Web Control

FormWizardDesigner
Brief Information
DescriptionA free designer of form data entry control to input many fields with steps separation.
FeaturesA compact data entry form with auto validation.
Separate inputs into some steps like wizard.
A Free design with HTML and controls of Irwsoft Web Control.
FormWizardDesigner control
FormWizardDesigner control (Personal Information)


FormWizardDesigner control
FormWizardDesigner control (Address Information)


FormWizardDesigner control
FormWizardDesigner control (Biodata Information)


The IWC ASP.net FormWizardDesigner control is a data entry control that separates into some steps. The control lets developer design a form to input data with HTML and any controls of Irwsoft Web Control. There is also auto validation for the data types for each properties. With this idea make FormWizardDesigner control is a powerfull control for data-entry application because it is easy to use and make developement faster.

It is recommended to use contros of Irwsoft Web Control for data entry. All data-binding and data-populating will be handled by FormWizardDesigner.

All IWC input control designed using MVVM pattern which mean you can have a data-model class representing a domain/table. You can use simple C# class, Irwsoft Data Framework, Entity Framework, Linq to Sql or other .NET ORM. Then set its data-source and a property to bind.

Example : Input biodata of Person table with FormWizardDesigner


C# code for Person table

// 1) Sample code for Person table
public class Person
{
     public int ID { get; set;}
     public string FirstName { get; set;}
     public string LastName { get; set;}
     public GenderType Gender { get; set;}
     public DateTime DateOfBirth { get; set;}
     public int Age { get; set;}
     public string Address { get; set;}
     public string City { get; set;}
     public string Country { get; set;}
     public string IdentityCardNo { get; set;}
     public string BioData { get; set;}
     public string PictureUrl { get; set;}
}


ASPX code for FormWizardDesigner

// 1) Defines the FormWizardDesigner control
<irw:FormWizardDesigner ID="FD1" runat="server" SkinStyle="Orange"
     OnStepIndexChanging="FD1_StepIndexChanging" OnStepIndexChanged="FD1_StepIndexChanged"      OnSaving="FD1_Saving" OnSaved="FD1_Saved" OnCancel="FD1_Cancel"
     OnFileSave="FD1_FileSave" OnFileDelete="FD1_FileDelete"      OnImagePreview="FD1_ImagePreview" OnFileDownload="FD1_FileDownload">
     <Steps>  // 2) Defines the Form'Steps
          <irw:FormWizardDesignerStep runat="server" StepTitle="Personal Information" NextButtonID="NextBtn">
               <div class="header">Biodata Registration</div>
               <div class="content">  // 3) Designs all input controls of the form
                    <div class="title"><span class="txt">Personal Information</span></div>
                    <table>
                         <tr>
                              <td>
                                   <irw:Field ID="FName" runat="server" Text="Name"></irw:Field>
                              </td>
                              <td colspan="3">
                                   <irw:InputText ID="FName" runat="server" DataFormat="{0} {1}" Width="600">
                                        <DataPropertyNames>
                                             <irw:DataPropertyName Name="FirstName" />
                                             <irw:DataPropertyName Name="LastName" />
                                        </DataPropertyNames>
                                   </irw:InputText>
                              </td>
                         </tr>
                         <tr>
                              <td>
                                   <irw:Field ID="FDOB" runat="server" Text="Date Of Birth"></irw:Field>
                              </td>
                              <td>
                                   <irw:DateTimePicker ID="DTP" runat="server" DateTimePickerMode="Date">
                                        <DataPropertyNames>
                                             <irw:DataPropertyName Name="DateOfBirth" DataType="Date" />
                                        </DataPropertyNames>
                                   </irw:DateTimePicker>
                              </td>
                              <td>
                                   <irw:Field ID="FAge" runat="server" Text="Age"></irw:Field>
                              </td>
                              <td>
                                   <irw:InputText ID="ITAge" runat="server" Width="100">
                                        <DataPropertyNames>
                                             <irw:DataPropertyName Name="Age" DataType="Integer" />
                                        </DataPropertyNames>
                                   </irw:InputText>
                              </td>
                         </tr>
                         <tr>
                              <td>
                                   <irw:Field ID="FGender" runat="server" Text="Gender"></irw:Field>
                              </td>
                              <td colspan="3">
                                   <irw:DropDownList ID="DDLGender" runat="server">
                                        <DataPropertyNames>
                                             <irw:DataPropertyName Name="Gender" DataType="List" Type="SamplesNET2.Data.GenderType" />
                                        </DataPropertyNames>
                                        <DataSourcePropertyNames>
                                             <irw:DataPropertyName DataType="List" Type="SamplesNET2.Data.GenderType" />
                                        </DataSourcePropertyNames>
                                   </irw:DropDownList>
                              </td>
                         </tr>
                    </table>
               </div>
               <div class="buttons">
                    <irw:Button ID="NextBtn" runat="server" Text="Next"></irw:Button>
               </div>
          </irw:FormWizardDesignerStep>
          <irw:FormWizardDesignerStep runat="server" StepTitle="Address Information"
               PreviousButtonID="PrevBtn1" NextButtonID="NextBtn1">
               <div class="header">Biodata Registration</div>
               <div class="content">  // 3) Designs all input controls of the form
                    <div class="title"><span class="txt">Address Information</span></div>
                    <table>
                         <tr>
                              <td>
                                   <irw:Field ID="FIdentityCardNo" runat="server" Text="ID NO."></irw:Field>
                              </td>
                              <td>
                                   <irw:InputText ID="ITIdentityCardNo" runat="server">
                                        <DataPropertyNames>
                                             <irw:DataPropertyName Name="IdentityCardNo" />
                                        </DataPropertyNames>
                                   </irw:InputText>
                              </td>
                              <td>
                                   <irw:Field ID="FAddress" runat="server" Text="Address"></irw:Field>
                              </td>
                              <td>
                                   <irw:MultiText ID="MTAddress" runat="server">
                                        <DataPropertyNames>
                                             <irw:DataPropertyName Name="Address" />
                                        </DataPropertyNames>
                                   </irw:MultiText>
                              </td>
                         </tr>
                         <tr>
                              <td>
                                   <irw:Field ID="FCity" runat="server" Text="City"></irw:Field>
                              </td>
                              <td>
                                   <irw:InputText ID="ITCity" runat="server">
                                        <DataPropertyNames>
                                             <irw:DataPropertyName Name="City" />
                                        </DataPropertyNames>
                                   </irw:InputText>
                              </td>
                              <td>
                                   <irw:Field ID="FCountry" runat="server" Text="Country"></irw:Field>
                              </td>
                              <td>
                                   <irw:InputText ID="ITCountry" runat="server">
                                        <DataPropertyNames>
                                             <irw:DataPropertyName Name="Country" />
                                        </DataPropertyNames>
                                   </irw:InputText>
                              </td>
                         </tr>
                    </table>
               </div>
               <div class="buttons">
                    <irw:Button ID="PrevBtn1" runat="server" Text="Previous"></irw:Button>
                    <irw:Button ID="NextBtn1" runat="server" Text="Next"></irw:Button>
               </div>
          </irw:FormWizardDesignerStep>
          <irw:FormWizardDesignerStep runat="server" StepTitle="BioData Information"
               PreviousButtonID="PrevBtn2" SaveButtonID="SaveBtn" CancelButtonID="CancelBtn">
               <div class="header">Biodata Registration</div>
               <div class="content">  // 3) Designs all input controls of the form
                    <div class="title"><span class="txt">BioData Information</span></div>
                    <table>
                         <tr>
                              <td>
                                   <irw:Field ID="FPictureUrl" runat="server" Text="Photo"></irw:Field>
                              </td>
                              <td>
                                   <irw:FileUpload ID="FUPictureUrl" runat="server" Async="true">
                                        <DataPropertyNames>
                                             <irw:DataPropertyName Name="PictureUrl" DataType="ImageUrl" />
                                        </DataPropertyNames>
                                   </irw:FileUpload>
                              </td>
                         </tr>
                         <tr>
                              <td>
                                   <irw:Field ID="FBioData" runat="server" Text="BioData"></irw:Field>
                              </td>
                              <td colspan="3">
                                   <irw:MultiText ID="ITBioData" runat="server" Width="800">
                                        <DataPropertyNames>
                                             <irw:DataPropertyName Name="BioData" DataType="MultiText" />
                                        </DataPropertyNames>
                                   </irw:MultiText>
                              </td>
                         </tr>
                    </table>
               </div>
               <div class="buttons">
                    <irw:Button ID="PrevBtn2" runat="server" Text="Previous"></irw:Button>
                    <irw:Button ID="SaveBtn" runat="server" Text="Save"></irw:Button>
                    <irw:Button ID="CancelBtn" runat="server" Text="Cancel"></irw:Button>
               </div>
          </irw:FormWizardDesignerStep>
     </Steps>
</irw:FormWizardDesigner>



Related Topics :


Irwsoft Data Ultimate Edition 4.0 supports data-schema extension (entity framework, linq to sql, simple class, and etc).