AJAX

Labels
AJAX(112) App Studio(7) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(183) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
AJAX
Friday, October 31, 2008PrintSubscribe
Upload and Download of BLOB in AJAX Applications

Data Aquarium Framework introduces a new feature that allows code-free uploading and downloading of Binary Large Objects to/from a database table column in AJAX style. The feature is based on a generic handler blob.ashx from File Upload premium project.

Here is screen shot from a sample application available at http://dev.codeontime.com/demo/nwblob.

image

If a BLOB field is storing an image then a thumbnail preview is automatically created. A preview is available in all views. Other types of BLOB are presented by a simple download hyperlink. Views are displaying additional controls that allow BLOB uploading when records are presented in edit or detail mode.

image

BLOB support is enabled only when you are interacting with existing records. BLOB data cannot be uploaded when creating new records. The internal preview and upload mechanism is based on automatic table row references based on primary keys, which makes uploading of BLOB impossible when records are created.

Original BLOB data can be retrieved from a database with a click of mouse. Here is a screen shot from Adventure Works application that shows side-by-side small and large photographs of products. Original BLOB data other then images will be opened by native applications when downloaded completely by your web browser.

image

A confirmation message is displayed at the top of the page when a BLOB data has been uploaded successfully.

image

You can find complete implementation details for all of these features in the project source code.

Making It Work

Generate a Data Aquarium Framework application from Northwind database and open ~/Contollers/Categories.xml data controller descriptor. Find definition of Picture field. It must look like the one below.

<field name="Picture" type="Byte[]" onDemand="true" 
  sourceFields="CategoryID" 
  onDemandHandler="CategoriesPicture" onDemandStyle="Thumbnail" 
  allowQBE="false" allowSorting="false" label="Picture" />

Three attributes are turning on the BLOB support. Attribute sourceFields must list all fields that allow to find the row with a BLOB. This information is passed on to a generic handler blob.ashx located in the root of your web site project. The name of the handler is specified by onDemandHandler attribute. Optional style for an on-demand field is controlled by onDemandStyle attribute.

Generic handler blob.ashx is automatically generated by Code OnTime Generator. All handlers discovered in your database are listed at the top of the file.

Here is how they look in a Northwind application written in C#.

public partial class BlobFactory
{
    
    static BlobFactory()
    {
        // register blob handlers
        RegisterHandler("CategoriesPicture", "\"dbo\".\"Categories\"", "\"Picture\"", 
            new string[] {"\"CategoryID\""}, "Categories Picture", String.Empty);
        RegisterHandler("EmployeesPhoto", "\"dbo\".\"Employees\"", "\"Photo\"", 
            new string[] {"\"EmployeeID\""}, "Employees Photo", String.Empty);
    }
}

You can quickly change these handlers and add the new ones when needed. The parameters of RegisterHandler method are easy to understand.

image

The first parameter defines a key that is provided as a value for onDemandHandler attribute in data controller descriptors. The second parameter is a fully qualified name of the table that stores BLOB values. The third parameter specifies a column name of a BLOB. A list of key columns of this table follows in the fourth parameter. A user-friendly name of the blob in the fifth parameter is for GUI presentation.

The last parameter defines a content type of a BLOB. If the value is an empty string then the code of generic handler will try to automatically find the content type by treating the value as an image. If you are storing a specific type of data other then image then enter a valid content type that matches the BLOB. For example, if you are storing Microsoft Word documents then use application/msword as content type.

Friday, October 31, 2008PrintSubscribe
Export to Spreadsheet

Data Aquarium Framework applications are now supporting automatic exporting in Comma-Separated Values format.

Apply filters and sort your grid views the way you like. Select Actions on action bar and choose Export to Spreadsheet option.

image

A data file will be created on the server and a new web browser window will be launched to download the result. Your spreadsheet processor will automatically launch and displayed data.

image

The sort order, custom filters, and data formatting will be displayed similar to what you see in a grid view.

This feature is automatically available to all premium project subscribers.

Tuesday, September 30, 2008PrintSubscribe
Lookup Item Styles

Data Aquarium Framework pr0vides a variety of presentation styles for lookup items in your grid and form views.

Consider the following screen shot fragment of products form view in application generated by Code OnTime Generator from Northwind database.

image

Supplier company name and category names are allowing user to select SupplierID and CategoryID in a products table row. If user clicks on a link with category name then the following lookup control is presented.

image

The eraser icon will clear up the selected category.

This advanced lookup control is displayed thanks to the following configuration of SupplierID and CategoryID fields in ~/Controllers/Products.xml data controller descriptor.

<field name="SupplierID" type="Int32" label="Supplier#">
  <items style="Lookup" dataController="Suppliers" 
    newDataView="createForm1" />
</field>
<field name="SupplierCompanyName" type="String" readOnly="true" 
  label="Supplier Company Name" />
<field name="CategoryID" type="Int32" label="Category#">
  <items style="Lookup" dataController="Categories" newDataView="createForm1" />
</field>
<field name="CategoryCategoryName" type="String" readOnly="true" 
  label="Category Name" />

Style of items is set to Lookup.

The source of items is identified by dataController attribute that refers to a corresponding data controller descriptor.

You can change the style of items for CategoryID field by replacing Lookup with DropDownList.

This will translate into the following presentation.

image

Notice that N/A option is automatically added to the list since CategoryID field allows null values to be stored in the table column.

Here is how ListBox item presentation style is rendered.

image

Another popular option is to have lookup items displayed as a radio button list.

image

You can provide a more compact radio button list by adding columns property to the data field in editForm1 form view as shown in the snippet.

<dataField fieldName="CategoryID" aliasFieldName="CategoryCategoryName"  
  columns="3"/>

This is how the presentation of categories has changed.

image

Grid view is also sensitive to the item style and automatically displays the data as prescribed in data controller file. Here you can see a DropDownList style of the lookup items of CategoryID field.

image

A common requirement is to have a custom fixed list of values for certain fields in the database tables.

Redefine the items of CategoryID field as shown in the markup example below.

<field name="CategoryID" type="Int32" label="Category#">
  <items style="RadioButtonList">
    <item text="One" value="1"/>
    <item text="Two" value="2"/>
    <item text="Three" value="3"/>
  </items>
</field>

The presentation of the field will change to the following.

image

If you retain the dataController attribute then both static and dynamic items will show up in a list.

image

Note that dynamic and static items are always sorted in alphabetical order regardless of their nature.

Lookup style is not supported for static items.

Additional display style CheckBox is provided to support fields with boolean data type only.