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
Monday, September 15, 2008PrintSubscribe
Custom Templates for AJAX Grids in Data Aquarium Framework Applications

Data Aquarium Framework and Aquarium Express provide excellent support for custom form templates.

New feature in Data Aquarium Framework allows to create inline form templates for rows of grid views in edit mode.

See live demo of this feature now.

Generate  a Data Aquarium project from Northwind database. Create a new form with name GridTemplate.aspx based on MasterPage.master. Enter the following markup.

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false"
    CodeFile="GridTemplate.aspx.vb" Inherits="GridTemplate" Title="Grid Template" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Header1Placeholder" runat="Server">
    Grid Template
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Header2Placeholder" runat="Server">
    Northwind
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="BodyPlaceholder" runat="Server">
    <div id="Products" runat="server" />
    <aquarium:DataViewExtender ID="ProductsExtender" runat="server" Controller="Products"
        TargetControlID="Products" />
</asp:Content>

View this page in a web browser. It will look like the one in the next illustration.

image

Change ~/Controllers/Products.aspx data controller descriptor by moving action with Edit command to be the first action in the scope of grid.

<actionGroup scope="Grid">
  <action commandName="Edit" />
  <action commandName="Select" commandArgument="editForm1" />
  <action commandName="Delete" confirmation="Delete?" />
  <action whenLastCommandName="Edit" commandName="Update" headerText="Save" />
  <action whenLastCommandName="Edit" commandName="Cancel" />
</actionGroup>

Refresh the page and click on any link in the first column. This will force the grid view to display all fields in selected row to present the edit mode user interface.

image

This works well for most applications. Sometimes you may need to display just a few columns when user browses through records but would rather have more fields available for editing without leaving the grid view.

Enter the following HTML fragment right after the DataViewExtender in GridTemplate.aspx page.

<div id="Products_grid1" style="display: none">
    <table style="border: solid 1px silver; margin: 4px">
        <tr>
            <td valign="top">
                <div style="margin-bottom: 4px">
                    {ProductName}</div>
                <div style="margin-bottom: 4px">
                    {SupplierID}</div>
                <div>
                    {CategoryID}</div>
            </td>
            <td valign="top">
                <div style="margin-bottom: 4px">
                    {QuantityPerUnit}</div>
                <div style="margin-bottom: 4px">
                    {UnitPrice}</div>
                <div>
                    {Discontinued}</div>
            </td>
            <td valign="top">
                <div style="margin-bottom: 4px">
                    {UnitsInStock}</div>
                <div style="margin-bottom: 4px">
                    {UnitsOnOrder}</div>
                <div>
                    {ReorderLevel}</div>
            </td>
        </tr>
    </table>
</div>

Refresh the page in a web browser and click on any product link in the first column of the grid view.

image

Your template will be displayed in place of the selected row. The template definition technique is equivalent to the one that you would use with custom form templates. The popup menu on the action bar allows user to save or cancel changes. All controls behave in the same way as they do in a regular form view rendered by framework.

From user's perspective such grid is a lot like an accordion view, which expands the row when you edit the record. You can further enhance the presentation of inline form by introducing custom Save and Cancel buttons. Add a second table row to the table in the template Products_grid1.

<tr>
    <td colspan="3" align="right" style="border-top: solid 1px silver; padding: 4px;">
        <button onclick="Web.DataView.find('ProductsExtender').executeAction('ActionBar', 0, null, 0)">
            Save</button>
        <button onclick="Web.DataView.find('ProductsExtender').executeAction('ActionBar', 1, null, 0)">
            Close</button>
    </td>
</tr>

The novelty here is onclick event handler that executes the same actions that are available in the Record menu on action bar. This code is written in java script and is executed in a browser when user clicks on a button.

The first argument of executeAction method defines the action scope. The second one is the action index. Third argument represents the row in the grid. You don't know, which row is selected, but Web.DataView component does. That is why we are passing null here. The last argument defines the index of action group in the scope, which is handy if you have more than one action available on action bar in edit mode.

This is how you template looks if you are trying it out.

image

Notice that this sample shows an invalid Units On Order value entered, which is detected when you click on Save button.

If you want to display more fields then there are columns in the view then make sure to define all data fields in grid view and simply add  hidden attribute set to true for each data field, which is not supposed to be displayed as a grid view column but should be available in an inline form.

Monday, September 15, 2008PrintSubscribe
Server-Side Data Filters

Data Aquarium Framework and Aquarium Express applications are featuring user-defined adaptive filtering. Users can select any combination of field values in dynamic menus of grid view columns to find the data they need.

Take a look at a live example of Northwind database web application available at http://dev.codeontime.com/demo/northwind. The screen shot displays a list of orders filtered down to employee with last name Fuller. User is about to apply an additional filter to the column Ship Via Company Name.

image

If you want your users to see only a subset of data then define alternative data views based on queries that are limiting data in the SQL query in the foundation of each views.  The advantage of this approach is an ability to quickly define a data subset limited by a known criteria. Dynamic parameter values are not allowed in the query.

What if you want to limit the list of orders to those placed by currently signed-in employee only?

New feature available in Data Aquarium Framework allows to define a reusable data filter class used by linked data controllers automatically whenever a corresponding data retrieval operation requires a  filter. Let's see how it works.

Generate a web site code with Data Aquarium Framework project  and Northwind database.  Open this web site in Visual Studio 2008 or free Visual Web Developer 2008 Express Edition. Add Class1 to App_Code folder and enter the following code.

Data filter written in C#:

using System;
using System.Collections.Generic;
using MyCompany.Data;

public class Class1 : IDataFilter
{
    void IDataFilter.Filter(SortedDictionary<string, object> filter)
    {
        filter.Add("EmployeeID", new int[] { 2, 1 });
        filter.Add("ShipVia", 1);
    }
}

Here is VB.NET version of this class:

Imports System.Collections.Generic
Imports MyCompany.Data

Public Class Class1
    Implements IDataFilter

    Public Sub Filter(ByVal filter As SortedDictionary(Of String, Object)) _
        Implements MyCompany.Data.IDataFilter.Filter
        filter.Add("EmployeeID", New Object() {2, 1})
        filter.Add("ShipVia", 1)
    End Sub
End Class

Open data controller descriptor ~/Controllers/Orders.xml and  add an attribute dataFilterType as shown below:

<dataController 
  name="Orders" conflictDetection="overwriteChanges" 
  label="Orders" xmlns="urn:schemas-codeontime-com:data-aquarium" 
  dataFilterType="Class1">

If you run the web site and select Orders in the drop down of the default page then a view like the one below is displayed.

image

Only eight pages of orders are available. All of them are limited to those placed by employees Fuller and Davolio. All of these orders were shipped via Speedy Express.  If you look at the sample code then you will notice that we are supplying filter values for EmployeeID field as an array with two values, while the ShipVia field is filtered by a single value only.

A quick and easy enhancement will make your view less busy. In our example only one shipper is displayed. You can hide this column from user interface by adding an additional hidden attribute to dataField element in the data controller descriptor ~/Controllers/Orders.xml.

<dataField fieldName="ShipVia" aliasFieldName="ShipViaCompanyName"  hidden="true"/>

In a real-world scenario you will likely use HttpContext.Current.User.Identity property or HttpContext.Current.User.IsInRole method to determine the scope of data that you want to include in the result set displayed to a currently signed in user. Make sure to add System.Web namespace to the list of namespaces in your data filter to get access to HttpContext.Current property.

What do you do if the number of filter values is greater than just a few? In this case you might want to consider creating a database table that holds sets of filter values matched with user identities or roles and then join this table into SQL queries defined in corresponding data controller descriptors. Implement a server-side data filter to provide an ID or a role of current user.

If the name of the data filter field is not matched with any of the fields in the result set then the value is ignored. You can link the same filter to multiple data controllers to take advantage of centralized processing architecture of Data Aquarium Framework.

Thursday, September 11, 2008PrintSubscribe
Default Field Values in Custom Action Handlers

A common requirement in many data management applications is to compliment data manually entered by users with some calculated values. You may be required to perform some complicated financial computations, lookup additional field values in the database according to some custom logic, or automatically supply audit trail by recording the time stamps and user ID in the database records. Some of these tasks can be encapsulated in database table triggers. If this is not an option then it is time to create a custom action handler.

We will illustrate this with the unit price lookup by improving on the custom action handler example presented in Aquarium Express Primer.

The primer is demonstrating a lookup of unit price for inserted order details records of Northwind database. Basically it is suggesting to allow insertion of the order details record without a price and executing a follow-up update of the new record. This is resulting in two database operations - SQL insert will be followed by update statement.

We will improve on that by supplying a unit price prior to the insertion of order details record.

Open ~/Controllers/OrderDetails.aspx and change the definition of createForm1 as follows:

<view id="createForm1" type="Form" commandId="command1" label="New Order Details">
  <headerText>Please fill this form and click OK button to create a new order details record. Click Cancel to return to the previous screen.</headerText>
  <categories>
    <category headerText="New Order Details">
      <description>Complete the form. Make sure to enter all required fields.</description>
      <dataFields>
        <dataField fieldName="OrderID" aliasFieldName="OrderCustomerID" />
        <dataField fieldName="ProductID" aliasFieldName="ProductProductName" />
        <dataField fieldName="UnitPrice" dataFormatString="c" columns="15" hidden="true"/>
        <dataField fieldName="Quantity" columns="15" />
        <dataField fieldName="Discount" columns="15" />
      </dataFields>
    </category>
  </categories>
</view>

The primer suggests removing the UnitPrice data field from view createForm1. We are restoring the data field and instead marking it up as "hidden". Hidden data fields are not rendered in the standard user interface when displayed in a web browser, which meets our objective as outline in the primer. On the other hand, hidden fields are available for manipulation in custom action handlers. Note that you can still display any hidden fields if you are using custom form templates.

Now you can remove the price lookup code from method AfterSqlActon in Class1.

Create a new method BeforeSqlAction as shown in example.

Here is C# implementation of BeforeSqlAction.

protected override void BeforeSqlAction(ActionArgs args, ActionResult result)
{
    if (args.CommandName == "Insert" && args["UnitPrice"].Value == null)
    {
        double price = 0;
        using (SqlText findPrice = new SqlText(
            "select UnitPrice from Products where ProductId = @ProductID"))
        {
            findPrice.AddParameter("@ProductId", args["ProductID"].Value);
            price = Convert.ToDouble(findPrice.ExecuteScalar());
        }
        args["UnitPrice"].NewValue = price;
        args["UnitPrice"].Modified = true;
    }
}

VB.NET implementation looks very much the same.

Protected Overrides Sub BeforeSqlAction(ByVal args As MyCompany.Data.ActionArgs, _
                                            ByVal result As MyCompany.Data.ActionResult)
        If args.CommandName = "Insert" And args("UnitPrice").Value Is Nothing Then
            Dim price As Double = 0
            Using findPrice As SqlText = New SqlText( _
                "select UnitPrice from Products where ProductId = @ProductID")
                findPrice.AddParameter("@ProductID", args("ProductID").Value)
                price = Convert.ToDouble(findPrice.ExecuteScalar())
            End Using
            args("UnitPrice").NewValue = price
            args("UnitPrice").Modified = True
        End If
    End Sub

As you can see we are finding the price of the ordered product and then assigning it to the new value of UnitPrice in the argument. It is important to mark the field value as modified. Otherwise the field will not be included in the SQL statement generated by data controller.

Custom action handlers allow complex calculations to be implemented in a high level language such as C# or VB.NET, which may be the only option if calculations involve resources outside of the database server. The same custom action handler is uniformly used in all pages of your application that are displaying the data with the help of the controllers that are referring to your custom action handler via actionHandlerType attribute. Custom action handlers become centralized stateless business logic layer rule repositories of your Web 2.0 applications written with ASP.NET and AJAX.