Irwsoft Web Control

Working with Form
Brief Information
DescriptionInformation about how to work with Form control in data-entry application.
Form control
Form control in Insert mode

Form control
Form control in View mode

Form control
Image preview in View mode


This page will give you brief information about how to work with IWC - Form control. The first thing you need to know is that the Form control is designed with MVVM pattern, which mean you need 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. The second thing you need to do is declare the property-names and its data-type. Please note that data-type is important that define the input control.

The Form control has three modes. 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. So the last thing is specified the DataMode of the Form which represents as the beginning state when Form displays in View, Edit or Insert mode.

This example uses Irwsoft Data Framework as a data model. I prefer Irwsoft Data Framework Professional Edition because it has editor to build our data-model.

Example : Input registration data of ID Card in Person table with Form


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 Form

// 1) Defines the Form control
<irw:Form ID="FR1" runat="server" SkinStyle="GreenOcean" FormLayoutMode="Table"
     OnEdit="FR1_Edit" OnInsert="FR1_Insert" OnSaving="FR1_Saving" OnSaved="FR1_Saved" OnCancel="FR1_Cancel"
     OnFileSave="FR1_FileSave" OnFileDelete="FR1_FileDelete"
     OnImagePreview="FR1_ImagePreview" OnFileDownload="FR1_FileDownload">
     <TableStyle ColumnCount="2" LabelWidth="150" DataWidth="250">  // 2) Defines the Table styles tag
     <Header>
          <div style="width: 100%;"text-align: center;">Identity Card Registration Form</div>
     </Header>
     <DataPropertyNames>  // 3) Defines some properties to bind inside DataPropertyNames tag
          <irw:FormDataPropertyName Name="FirstName" Caption="First Name" />
          <irw:FormDataPropertyName Name="LastName" Caption="Last Name" />
          <irw:FormDataPropertyName Name="DateOfBirth" Caption="Date of Birth"
                    DataType="Date" Format="dd/MM/yyyy" AllowEmpty="false" />
          <irw:FormDataPropertyName Name="Age" DataType="Integer" />
          <irw:FormDataPropertyName Name="Gender" DataType="List" Type="SamplesNET2.Data.GenderType"
                    AllowEmpty="false"/>
          <irw:FormDataPropertyName Name="IdentityCardNo" Caption="ID No." />
          <irw:FormDataPropertyName Name="Address" />
          <irw:FormDataPropertyName Name="City" />
          <irw:FormDataPropertyName Name="Country" />
          <irw:FormDataPropertyName Name="PictureUrl" Caption="Photo" DataType="ImageUrl" AllowEmpty="false" />
          <irw:FormDataPropertyName Name="BioData" Caption="Bio Data" DataType="MultiText" />
     </DataPropertyNames>
     <Footer>
          <div style="width: 100%;"text-align: right;">Irwsoft.com</div>
     </Footer>
</irw:Form>


C# code behind for Form state

// 1) We set the beginning state as Insert in Page_Load method
protected void Page_Load(object sender, EventArgs e)
{
     if (!this.IsPostBack)
     {    // 1.1) The beginning state as Insert
          this.FR1.DataMode = Irwsoft.Web.Controls.DataMode.Insert;
     }
}

// 2) Prepare the object where you will persist the data in FR1_Saving method
protected void FR1_Saving(object sender, Irwsoft.Web.Controls.FormSaveEventArgs e)
{
     if (args.OldDataMode == Irwsoft.Web.Controls.DataMode.Edit)
     {    // 2.1) If the previous state is in Edit mode then prepare the old data !
          if (Session["Person"] != null)
          {    // 2.1.1) Just check if we had has some old data in session !
               args.DataObject = Session["Person"];
          }
     }
     else if (args.OldDataMode == Irwsoft.Web.Controls.DataMode.Insert)
     {    // 2.2) If the previous state is in Insert mode then prepare the new object !
          args.DataObject = new Person();
     }
}

// 3) Populate data and persist to database in FR1_Saved method
protected void FR1_Saved(object sender, EventArgs e)
{    // 3.1) Populate the data from FR1 control !
     this.FR1.DataPopulate();
     // 3.2) Persist data in database here !
     this.SaveToDatabase((Person)this.FR1.DataObject);
     // 3.3) Persist in ASP.net session for later use !
     Session["Person"] = this.FR1.DataObject;
}

// 4) When the user click the Cancel button then do something in FR1_Cancel method
protected void FR1_Cancel(object sender, Irwsoft.Web.Controls.FormDataEventArgs e)
{    // 4.1) Prepare previous data if existed to view !
     if (Session["Person"] != null)
     {    // 4.1.1) Just check if we had has some old data in session !
          this.FR1.DataObject = Session["Person"];
     }
}

// 5) When the user click the Edit button then do something in FR1_Edit method
protected void FR1_Edit(object sender, Irwsoft.Web.Controls.FormDataEventArgs e)
{    // 5.1) Prepare previous data if existed to view !
     if (Session["Person"] != null)
     {    // 5.1.1) Just check if we had has some old data in session !
          this.FR1.DataObject = Session["Person"];
     }
}

// 6) When the user click the Insert button then do something in FR1_Insert method
protected void FR1_Edit(object sender, Irwsoft.Web.Controls.FormDataEventArgs e)
{    // 6.1) Just clear all previous data !
     this.FR1.DataObject = null;
     // 6.2) Clear the session !
     Session["Person"] = null;
}



C# code behind to handle file upload/delete

// 1) Handles Picture uploading in FR1_FileSave method
protected void FR1_FileSave(object sender, Irwsoft.Web.Controls.FormFileSaveArgs e)
{    // 1.1) Persist the file data !
     //      Do stuff to persist file in drive and keept the file-name into PictureUrl of Person in database !
     //      ...

     // 1.2) Set SaveCompleted of arg to true !
     args.SaveCompleted = true;
}

// 2) Handles Picture deleting in FR1_FileDelete method
protected void FR1_FileDelete(object sender, Irwsoft.Web.Controls.FormFileDeleteArgs e)
{    // 2.1) Delete the file data !
     //      Do stuff to delete file in drive and the file-name in PictureUrl of Person in database !
     //      ...

     // 2.2) Set DeleteCompleted of arg to true !
     args.DeleteCompleted = true;
}


C# code behind to handle file download or image preview

// 1) Handles Picture previewing in FR1_ImagePreview method
protected void FR1_ImagePreview(object sender, Irwsoft.Web.Controls.FormImagePreviewArgs e)
{    // 1.1) Get the file !
     //      Do stuff to load file or get the URL path of the image !
     //      ...

     // 1.2) Set ImageSource of arg with file binary or URL path !
     args.ImageSource = "some-path";
     // 1.3) Set DownloadCompleted of arg to true !
     args.DownloadCompleted = true;
}

// 2) Handles Picture downloading in FR1_FileDownload method
protected void FR1_FileDownload(object sender, Irwsoft.Web.Controls.FormFileDownloadArgs e)
{    // 2.1) Get the file !
     //      Do stuff to load file binary of the image !
     //      ...

     // 2.2) Set FileContents of arg with file binary !
     args.FileContents = File.ReadAllBytes(path);
     // 2.3) Set FileName of arg from PictureUrl !
     args.FileName =person.PictureUrl;
     // 2.4) Set MimeType to JPEG !
     args.MimeType = Irwsoft.Web.MimeType.Jpeg;
     // 2.5) Set DownloadCompleted of arg to true !
     args.DownloadCompleted = true;
}


C# code behind handles all database process with Irwsoft Data Framework

// 1) Handles database persistence in SaveToDatabase method
private void SaveToDatabase(Person data)
{    // 1.1) Persist the data using Irwsoft Data Framework !
     SqlInsertInto insert = new SqlInsertInto(data);
     insert.ConnectionString = "Your connection string here ...";
     insert.Execute();
}



Related Topics :


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