Irwsoft NETCore Asp

FormWizardTemplate
Brief Information
DescriptionA free content designer (template) of form data entry tag-helper 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 NETCore Asp.
FormWizardTemplate tag-helper
FormWizardTemplate tag-helper in Insert mode

FormWizardTemplate tag-helper
FormWizardTemplate tag-helper in Insert mode

FormWizardTemplate tag-helper
FormWizardTemplate tag-helper in Insert mode

FormWizardTemplate tag-helper
FormWizardTemplate tag-helper in View mode

FormWizardTemplate tag-helper
FormWizardTemplate tag-helper in View mode

FormWizardTemplate tag-helper
FormWizardTemplate tag-helper in View mode


The INA ASP.net FormWizardTemplate tag-helper is a data entry tag-helper that separates into some steps. The tag-helper lets developer design a form to input data with HTML and any controls of Irwsoft NETCore Asp. There is also auto validation for the data types for each properties. With this idea make FormWizardTemplate tag-helper is the powerfull tag-helper for data-entry application but also lets you to design all input controls and how to display it.

There are three modes of FormWizardTemplate tag-helper. 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 tag-helper will generate all neccessary controls depend on the properties sepcified.

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

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 tag-helper
<FormWizardTemplate ID="FT1" SkinStyle="Copper">
     // 2) Defines the Form'Steps
     <FormWizardTemplateStep StepTitle="Personal Information">
          <FormWizardTemplateStepInsert>
               <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>
                                   <Field ID="FName" Text="Name"></Field>
                              </td>
                              <td colspan="3">
                                   <InputText ID="ITName" DataFormat="{0} {1}" Width="600">
                                        <DataPropertyName Name="FirstName" />
                                        <DataPropertyName Name="LastName" />
                                   </InputText>
                              </td>
                         </tr>
                         <tr>
                              <td>
                                   <Field ID="FDOB" Text="Date Of Birth"></Field>
                              </td>
                              <td>
                                   <DateTimePicker ID="DTP" DateTimePickerMode="Date">
                                        <DataPropertyName Name="DateOfBirth" DataType="Date" />
                                   </DateTimePicker>
                              </td>
                              <td>
                                   <Field ID="FAge" Text="Age"></Field>
                              </td>
                              <td>
                                   <InputText ID="ITAge" Width="100">
                                        <DataPropertyName Name="Age" DataType="Integer" />
                                   </InputText>
                              </td>
                         </tr>
                         <tr>
                              <td>
                                   <Field ID="FGender" Text="Gender"></Field>
                              </td>
                              <td colspan="3">
                                   <DropDownList ID="DDLGender" runat="server">
                                        <DataPropertyName Name="Gender" DataType="List" Type="SamplesNET2.Data.GenderType" />
                                        <DataPropertyName DataType="List" Type="SamplesNET2.Data.GenderType" />
                                   </DropDownList>
                              </td>
                         </tr>
                    </table>
               </div>
               <div class="buttons">  // 4) Use CommandButton and specified CommandName, doesn't need you to set all Buttons ID.
                    <CommandButton ID="NextBtn01" CommandName="NEXT" Text="Next"></CommandButton>
                    <CommandButton ID="CancelBtn01" CommandName="CANCEL" Text="Cancel"></CommandButton>
               </div>
          </FormWizardTemplateStepInsert>
          <FormWizardTemplateStepView>
               <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>
                                   <Field ID="FName1" Text="Name"></Field>
                              </td>
                              <td colspan="3">
                                   <ReadOnlyText ID="FName" DataFormat="{0} {1}" Width="600">
                                        <ViewPropertyName Name="FirstName" />
                                        <ViewPropertyName Name="LastName" />
                                   </ReadOnlyText>
                              </td>
                         </tr>
                         <tr>
                              <td>
                                   <Field ID="FDOB1" Text="Date Of Birth"></Field>
                              </td>
                              <td>
                                   <ReadOnlyText ID="ROTDOB" runat="server">
                                        <ViewPropertyName Name="DateOfBirth" DataType="Date" Format="d" />
                                   </ReadOnlyText>
                              </td>
                              <td>
                                   <Field ID="FAge1" Text="Age"></Field>
                              </td>
                              <td>
                                   <ReadOnlyText ID="ROTAge" runat="server">
                                        <ViewPropertyName Name="Age" DataType="Integer" />
                                   </ReadOnlyText>
                              </td>
                         </tr>
                         <tr>
                              <td>
                                   <Field ID="FGender1" Text="Gender"></Field>
                              </td>
                              <td colspan="3">
                                   <ReadOnlyText ID="ROTGender" runat="server">
                                        <ViewPropertyName Name="Gender" DataType="List" />
                                   </ReadOnlyText>
                              </td>
                         </tr>
                    </table>
               </div>
               <div class="buttons">
                    <CommandButton ID="NextBtn02" CommandName="NEXT" Text="Next"></CommandButton>
                    <CommandButton ID="EditBtn02" CommandName="EDIT" Text="Edit"></CommandButton>
                    <CommandButton ID="NewBtn02" CommandName="INSERT" Text="Insert"></CommandButton>
               </div>
          </FormWizardTemplateStepView>
     </FormWizardTemplateStep>
     <FormWizardTemplateStep StepTitle="Address Information">
          <FormWizardTemplateStepInsert>
               <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>
                                   <Field ID="FIdentityCardNo" Text="ID NO."></Field>
                              </td>
                              <td>
                                   <InputText ID="ITIdentityCardNo" runat="server">
                                        <DataPropertyName Name="IdentityCardNo" />
                                   </InputText>
                              </td>
                              <td>
                                   <Field ID="FAddress" Text="Address"></Field>
                              </td>
                              <td>
                                   <MultiText ID="MTAddress" runat="server">
                                        <DataPropertyName Name="Address" />
                                   </MultiText>
                              </td>
                         </tr>
                         <tr>
                              <td>
                                   <Field ID="FCity" Text="City"></Field>
                              </td>
                              <td>
                                   <InputText ID="ITCity" runat="server">
                                        <DataPropertyName Name="City" />
                                   </InputText>
                              </td>
                              <td>
                                   <Field ID="FCountry" Text="Country"></Field>
                              </td>
                              <td>
                                   <InputText ID="ITCountry" runat="server">
                                        <DataPropertyName Name="Country" />
                                   </InputText>
                              </td>
                         </tr>
                    </table>
               </div>
               <div class="buttons">
                    <CommandButton ID="PrevBtn11" CommandName="PREVIOUS" Text="Previous"></CommandButton>
                    <CommandButton ID="NextBtn11" CommandName="NEXT" Text="Next"></CommandButton>
                    <CommandButton ID="CancelBtn11" CommandName="CANCEL" Text="Cancel"></CommandButton>
               </div>
          </FormWizardTemplateStepInsert>
          <FormWizardTemplateStepView>
               <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>
                                   <Field ID="FIdentityCardNo1" Text="ID NO."></Field>
                              </td>
                              <td>
                                   <ReadOnlyText ID="ROTIdentityCardNo" runat="server">
                                        <ViewPropertyName Name="IdentityCardNo" />
                                   </ReadOnlyText>
                              </td>
                              <td>
                                   <Field ID="FAddress1" Text="Address"></Field>
                              </td>
                              <td>
                                   <ReadOnlyText ID="ROTAddress" runat="server">
                                        <ViewPropertyName Name="Address" />
                                   </ReadOnlyText>
                              </td>
                         </tr>
                         <tr>
                              <td>
                                   <Field ID="FCity1" Text="City"></Field>
                              </td>
                              <td>
                                   <ReadOnlyText ID="ROTCity" runat="server">
                                        <ViewPropertyName Name="City" />
                                   </ReadOnlyText>
                              </td>
                              <td>
                                   <Field ID="FCountry1" Text="Country"></Field>
                              </td>
                              <td>
                                   <ReadOnlyText ID="ROTCountry" runat="server">
                                        <ViewPropertyName Name="Country" />
                                   </ReadOnlyText>
                              </td>
                         </tr>
                    </table>
               </div>
               <div class="buttons">
                    <CommandButton ID="PrevBtn12" CommandName="PREVIOUS" Text="Previous"></CommandButton>
                    <CommandButton ID="NextBtn12" CommandName="NEXT" Text="Next"></CommandButton>
                    <CommandButton ID="EditBtn12" CommandName="EDIT" Text="Edit"></CommandButton>
                    <CommandButton ID="InsertBtn12" CommandName="INSERT" Text="Insert"></CommandButton>
               </div>
          </FormWizardTemplateStepView>
     </FormWizardTemplateStep>
     <FormWizardTemplateStep StepTitle="BioData Information">
          <FormWizardTemplateStepInsert>
               <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>
                                   <Field ID="FPictureUrl" Text="Photo"></Field>
                              </td>
                              <td colspan="3">
                                   <FileUpload ID="FUPictureUrl" Async="true">
                                        <DataPropertyName Name="PictureUrl" DataType="ImageUrl" />
                                   </FileUpload>
                              </td>
                         </tr>
                         <tr>
                              <td>
                                   <Field ID="FBioData" Text="BioData"></Field>
                              </td>
                              <td colspan="3">
                                   <MultiText ID="ITBioData" Width="800">
                                        <DataPropertyName Name="BioData" DataType="MultiText" />
                                   </MultiText>
                              </td>
                         </tr>
                    </table>
               </div>
               <div class="buttons">
                    <CommandButton ID="PrevBtn21" CommandName="PREVIOUS" Text="Previous"></CommandButton>
                    <CommandButton ID="SaveBtn21" CommandName="SAVE" Text="Save"></CommandButton>
                    <CommandButton ID="CancelBtn21" CommandName="CANCEL" Text="Cancel"></CommandButton>
               </div>
          </FormWizardTemplateStepInsert>
          <FormWizardTemplateStepView>
               <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>
                                   <Field ID="FPictureUrl1" Text="Photo"></Field>
                              </td>
                              <td colspan="3">
                                   <Link ID="lnkPictureUrl" Async="true">
                                        <ViewPropertyName Name="PictureUrl" DataType="ImageUrl" Format="~/Img/{0}" />
                                   </Link>
                              </td>
                         </tr>
                         <tr>
                              <td>
                                   <Field ID="FBioData1" Text="BioData"></Field>
                              </td>
                              <td colspan="3">
                                   <ReadOnlyText ID="ROTBioData" runat="server">
                                        <ViewPropertyName Name="BioData" />
                                   </ReadOnlyText>
                              </td>
                         </tr>
                    </table>
               </div>
               <div class="buttons">
                    <CommandButton ID="PrevBtn22" CommandName="PREVIOUS" Text="Previous"></CommandButton>
                    <CommandButton ID="EditBtn22" CommandName="EDIT" Text="Edit"></CommandButton>
                    <CommandButton ID="InsertBtn22" CommandName="INSERT" Text="Insert"></CommandButton>
               </div>
          </FormWizardTemplateStepView>
     </FormWizardTemplateStep>
</FormWizardTemplate>



Related Topics :


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