Irwsoft Web Control

FormWizardTemplate
Brief Information
DescriptionA free content designer (template) of form data entry control to input many fields.
FeaturesA compact data entry form with auto validation.
Separate inputs into some steps like wizard.
Three form modes are View, Insert and Edit.
A Free design with HTML and controls of Irwsoft Web Control.
FormWizardTemplate control
FormWizardTemplate control in Insert mode

FormWizardTemplate control
FormWizardTemplate control in Insert mode

FormWizardTemplate control
FormWizardTemplate control in Insert mode

FormWizardTemplate control
FormWizardTemplate control in View mode

FormWizardTemplate control
FormWizardTemplate control in View mode

FormWizardTemplate control
FormWizardTemplate control in View mode


The IWC ASP.net FormWizardTemplate 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 FormWizardTemplate control is the powerfull control for data-entry application but also lets you to design all input controls and how to display it.

There are three modes of FormWizardTemplate control. The View mode displays plain table to display data only with Edit or Insert buttons. The Insert mode gives you blank entry data with Save or Cancel buttons. The Edit mode gives you entry data to edit current data object with Save or Cancel buttons. The FormWizardTemplate control will generate all neccessary controls depend on the properties sepcified.

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

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 FormWizardTemplate


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 FormWizardTemplate

// 1) Defines the FormWizardTemplate control
<irw:FormWizardTemplate ID="FT1" runat="server" SkinStyle="Copper"
     OnInsert="FT1_Insert" OnEdit="FT1_Edit" OnCancel="FT1_Cancel"
     OnSaving="FT1_Saving" OnSaved="FT1_Saved"
     OnStepIndexChanging="FT1_StepIndexChanging" OnStepIndexChanged="FT1_StepIndexChanged"
     OnFileDelete="FT1_FileDelete" OnFileSave="FT1_FileSave"
     OnImagePreview="FT1_ImagePreview" OnFileDownload="FT1_FileDownload">
     <Steps>  // 2) Defines the Form'Steps
          <irw:FormWizardTemplateStep runat="server" StepTitle="Personal Information">
               <InsertTemplate>
                    <div class="header">Person Biodata</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="ITName" 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">  // 4) Use CommandButton and specified CommandName, doesn't need you to set all Buttons ID.
                         <irw:CommandButton ID="NextBtn01" runat="server" CommandName="NEXT" Text="Next"></irw:CommandButton>
                         <irw:CommandButton ID="CancelBtn01" runat="server" CommandName="CANCEL" Text="Cancel"></irw:CommandButton>
                    </div>
               </InsertTemplate>
               <ViewTemplate>
                    <div class="header">Person Biodata</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="FName1" runat="server" Text="Name"></irw:Field>
                                   </td>
                                   <td colspan="3">
                                        <irw:ReadOnlyText ID="FName" runat="server" DataFormat="{0} {1}" Width="600">
                                             <ViewPropertyNames>
                                                  <irw:ViewPropertyName Name="FirstName" />
                                                  <irw:ViewPropertyName Name="LastName" />
                                             </ViewPropertyNames>
                                        </irw:ReadOnlyText>
                                   </td>
                              </tr>
                              <tr>
                                   <td>
                                        <irw:Field ID="FDOB1" runat="server" Text="Date Of Birth"></irw:Field>
                                   </td>
                                   <td>
                                        <irw:ReadOnlyText ID="ROTDOB" runat="server">
                                             <ViewPropertyNames>
                                                  <irw:ViewPropertyName Name="DateOfBirth" DataType="Date" Format="d" />
                                             </ViewPropertyNames>
                                        </irw:ReadOnlyText>
                                   </td>
                                   <td>
                                        <irw:Field ID="FAge1" runat="server" Text="Age"></irw:Field>
                                   </td>
                                   <td>
                                        <irw:ReadOnlyText ID="ROTAge" runat="server">
                                             <ViewPropertyNames>
                                                  <irw:ViewPropertyName Name="Age" DataType="Integer" />
                                             </ViewPropertyNames>
                                        </irw:ReadOnlyText>
                                   </td>
                              </tr>
                              <tr>
                                   <td>
                                        <irw:Field ID="FGender1" runat="server" Text="Gender"></irw:Field>
                                   </td>
                                   <td colspan="3">
                                        <irw:ReadOnlyText ID="ROTGender" runat="server">
                                             <ViewPropertyNames>
                                                  <irw:ViewPropertyName Name="Gender" DataType="List" />
                                             </ViewPropertyNames>
                                        </irw:ReadOnlyText>
                                   </td>
                              </tr>
                         </table>
                    </div>
                    <div class="buttons">
                         <irw:CommandButton ID="NextBtn02" runat="server" CommandName="NEXT" Text="Next"></irw:CommandButton>
                         <irw:CommandButton ID="EditBtn02" runat="server" CommandName="EDIT" Text="Edit"></irw:CommandButton>
                         <irw:CommandButton ID="NewBtn02" runat="server" CommandName="INSERT" Text="Insert"></irw:CommandButton>
                    </div>
               </ViewTemplate>
          </irw:FormWizardTemplateStep>
          <irw:FormWizardTemplateStep runat="server" StepTitle="Address Information">
               <InsertTemplate>
                    <div class="header">Person Biodata</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:CommandButton ID="PrevBtn11" runat="server" CommandName="PREVIOUS" Text="Previous"></irw:CommandButton>
                         <irw:CommandButton ID="NextBtn11" runat="server" CommandName="NEXT" Text="Next"></irw:CommandButton>
                         <irw:CommandButton ID="CancelBtn11" runat="server" CommandName="CANCEL" Text="Cancel"></irw:CommandButton>
                    </div>
               </InsertTemplate>
               <ViewTemplate>
                    <div class="header">Person Biodata</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="FIdentityCardNo1" runat="server" Text="ID NO."></irw:Field>
                                   </td>
                                   <td>
                                        <irw:ReadOnlyText ID="ROTIdentityCardNo" runat="server">
                                             <ViewPropertyNames>
                                                  <irw:ViewPropertyName Name="IdentityCardNo" />
                                             </ViewPropertyNames>
                                        </irw:ReadOnlyText>
                                   </td>
                                   <td>
                                        <irw:Field ID="FAddress1" runat="server" Text="Address"></irw:Field>
                                   </td>
                                   <td>
                                        <irw:ReadOnlyText ID="ROTAddress" runat="server">
                                             <ViewPropertyNames>
                                                  <irw:ViewPropertyName Name="Address" />
                                             </ViewPropertyNames>
                                        </irw:ReadOnlyText>
                                   </td>
                              </tr>
                              <tr>
                                   <td>
                                        <irw:Field ID="FCity1" runat="server" Text="City"></irw:Field>
                                   </td>
                                   <td>
                                        <irw:ReadOnlyText ID="ROTCity" runat="server">
                                             <ViewPropertyNames>
                                                  <irw:ViewPropertyName Name="City" />
                                             </ViewPropertyNames>
                                        </irw:ReadOnlyText>
                                   </td>
                                   <td>
                                        <irw:Field ID="FCountry1" runat="server" Text="Country"></irw:Field>
                                   </td>
                                   <td>
                                        <irw:ReadOnlyText ID="ROTCountry" runat="server">
                                             <ViewPropertyNames>
                                                  <irw:ViewPropertyName Name="Country" />
                                             </ViewPropertyNames>
                                        </irw:ReadOnlyText>
                                   </td>
                              </tr>
                         </table>
                    </div>
                    <div class="buttons">
                         <irw:CommandButton ID="PrevBtn12" runat="server" CommandName="PREVIOUS" Text="Previous"></irw:CommandButton>
                         <irw:CommandButton ID="NextBtn12" runat="server" CommandName="NEXT" Text="Next"></irw:CommandButton>
                         <irw:CommandButton ID="EditBtn12" runat="server" CommandName="EDIT" Text="Edit"></irw:CommandButton>
                         <irw:CommandButton ID="InsertBtn12" runat="server" CommandName="INSERT" Text="Insert"></irw:CommandButton>
                    </div>
               </ViewTemplate>
          </irw:FormWizardTemplateStep>
          <irw:FormWizardTemplateStep runat="server" StepTitle="BioData Information">
               <InsertTemplate>
                    <div class="header">Person Biodata</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 colspan="3">
                                        <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:CommandButton ID="PrevBtn21" runat="server" CommandName="PREVIOUS" Text="Previous"></irw:CommandButton>
                         <irw:CommandButton ID="SaveBtn21" runat="server" CommandName="SAVE" Text="Save"></irw:CommandButton>
                         <irw:CommandButton ID="CancelBtn21" runat="server" CommandName="CANCEL" Text="Cancel"></irw:CommandButton>
                    </div>
               </InsertTemplate>
               <ViewTemplate>
                    <div class="header">Person Biodata</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="FPictureUrl1" runat="server" Text="Photo"></irw:Field>
                                   </td>
                                   <td colspan="3">
                                        <irw:Link ID="lnkPictureUrl" runat="server" Async="true">
                                             <ViewPropertyNames>
                                                  <irw:ViewPropertyName Name="PictureUrl" DataType="ImageUrl" Format="~/Img/{0}" />
                                             </ViewPropertyNames>
                                        </irw:Link>
                                   </td>
                              </tr>
                              <tr>
                                   <td>
                                        <irw:Field ID="FBioData1" runat="server" Text="BioData"></irw:Field>
                                   </td>
                                   <td colspan="3">
                                        <irw:ReadOnlyText ID="ROTBioData" runat="server">
                                             <ViewPropertyNames>
                                                  <irw:ViewPropertyName Name="BioData" />
                                             </ViewPropertyNames>
                                        </irw:ReadOnlyText>
                                   </td>
                              </tr>
                         </table>
                    </div>
                    <div class="buttons">
                         <irw:CommandButton ID="PrevBtn22" runat="server" CommandName="PREVIOUS" Text="Previous"></irw:CommandButton>
                         <irw:CommandButton ID="EditBtn22" runat="server" CommandName="EDIT" Text="Edit"></irw:CommandButton>
                         <irw:CommandButton ID="InsertBtn22" runat="server" CommandName="INSERT" Text="Insert"></irw:CommandButton>
                    </div>
               </ViewTemplate>
          </irw:FormWizardTemplateStep>
     </Steps>
</irw:FormWizardTemplate>



Related Topics :


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