Code On Time: AJAX

Blog

AJAX

Monday, October 10, 2011Print Subscribe

This is a brief introduction to the new code generation project DotNetNuke Factory, available with Code On Time web application generator. You can now integrate a line-of-business web application with the popular web content management system DotNetNuke, the leading web content system for ASP.NET.

Why DotNetNuke?

If you have experience with creating database web applications, then you’ve probably considered using a dynamic portal to increase the flexibility of your web application.

One can easily picture a whole world built around a few business data enabled pages. Users register using a portal, with the latest release notes and instructions posted for their convenience. Add a quick online survey and a few blog posts to your web application, without a fuss.

If you try building such a portal on your own, you will soon find that the task is not that simple. While you may be the leading expert in web application design with a database to prove it, web content delivery is another topic altogether.

Content management systems such as DotNetNuke and Microsoft SharePoint are widely adopted by organizations and businesses of all sizes as repositories of knowledge and web assets.

DotNetNuke is a proven portal software built with ASP.NET, boasting countless installations and a large dedicated user base. The easily available Community Edition of this product makes it especially attractive for developers who need portal-style functionality in their application at a low cost.

Integrating DotNetNuke With Your Line-of-Business Application

DotNetNuke is exceptionally easy to install and maintain – done entirely in a web browser.

DotNetNuke has impressive extensibility. One popular method of extending DotNetNuke is module development. A “module” represents an area on a portal page that is rendered by a custom application. For example, a calendar of events or a survey can be implemented as a module and placed on any portal page.

You can also create a database application with complex data management features and have it incorporated in a DotNetNuke module.

The development process is somewhat complicated. Here is where Code On Time’s DotNetNuke Factory comes to the rescue. DotNetNuke Factory will aid you in building a dedicated application packaged as a DotNetNuke module. This module can be deployed to the portal in seconds.

WebMatrix and DotNetNuke

Many popular software titles, including DotNetNuke, were developed for Microsoft ASP.NET Web Platform. Microsoft has created WebMatrix, a vehicle to allow simple download and installation of many popular open source web applications. WebMatrix includes a lightweight version of Microsoft Internet Information Services called IIS Express. This web server makes it possible to run web applications on virtually any type of operating system from Microsoft.

You will have to download WebMatrix at http://webmatrix.com to proceed with this tutorial.

Preparing a Database

DotNetNuke maintains its content in an SQL Server database. WebMatrix will automatically install SQL Express on your computer if you don’t have it already.

If you are planning to build a line-of-business database web application then you may want to create an empty SQL Server database. If you already have a database with a few tables then you are good to go. We will use the MyApp database name going forward – the sample data will co-exist with the DotNetNuke tables and other database objects.

Installing DotNetNuke

Run WebMatrix and create a new web site from the Web Gallery. Select DotNetNuke and enter MyDnn in the Site Name box at the bottom of the screen. Click the Next button.

Accept the EULA and wait for DotNetNuke to download and install.

The new site will be opened in WebMatrix when the download process has been completed and the web site is ready for use. Click Run button on the tool bar to start the portal web site.

Your default web browser will display the DotNetNuke Installation Wizard. Choose Typical installation method and click Next.

Make sure that your site passes the file permissions check and press Next.

On the Configure Database Connection page, select your database server type and enter the database name.

Enter DNN in the Object Qualifier input box. DotNetNuke will add this prefix to the names of all database objects that it needs to create, which will allow you to distinguish your own database tables from those that belong to the portal.

Click Next and wait for the installation of the system scripts to finish. If an error is displayed or “undefined…success” is looping, you have probably entered incorrect connection settings. If nothing goes wrong, click Next when installation of database is complete.

You will be prompted to enter the identities of two users – host and admin. The first user “owns” the entire portal and can install any content including new modules. The second user is allowed to perform various administrative functions.

We suggest that you enter passwords host123% and admin123% for the corresponding user identities for this tutorial. Leave the other settings as default.

Once complete, the portal home page will open and you will be automatically logged in as host/host123%.

Generating the DotNetNuke Factory Project

We are now ready to create our first line-of-business application integrated with DotNetNuke portal.

Start Code On Time generator and select DotNetNuke Factory project.

Enter MyFirstDnnApp in the project name and choose the implementation language for your application (the project must have a different name from your DNN website). The project wizard will show up. Under DotNetNuke Location, click on the “…” button on the right-hand side of the Path to DotNetNuke Installation field.

Browse to [My Documents]\My Web Sites\MyDnn and press OK.

Click Next and you will arrive to the Database Connection page.

Typically, your application will share the database with DotNetNuke, particularly if you plan to sell or distribute your module to other owners of DotNetNuke portals. If this is your situation, leave “Use connection string of the host application” box checked.

You can also use DotNetNuke as a powerful front end for the Internet facing portion of your web site and build an application with other types of backend database servers such Oracle and MySQL. If this is the case then make sure to uncheck “Use connection string of the host application” box and configure your database connection.

If you are creating your first app in a blank SQL Server database then we suggest populating this database with content. Click the “…” button next to Connection String field.

Select Northwind under Sample Tables and click Install.

Your database will be populated with the contents of the sample Northwind database. This content now co-exists with DotNetNuke database objects. Click OK to confirm successful installation and click OK one more time to finish connection string configuration.

Click Next button to proceed. Preserve the defaults on the Business Logic Layer page.

Click Next and enable dynamic and static reports.

Click Next and select Package Properties. Enter My First DNN App as the Friendly Name of our application. This will be used by DotNetNuke to identify our application.

Click Next a few more times until you reach the summary of application data controllers. Click Generate to have the code generator produce the application source code.

Upon generation, a test web application login page will be displayed. Sign in as admin/admin123%.

You will have to select a logical page to display. Select Customers and press Update to save the selection.

The logical page will be loaded in your browser.

The pages in the screen shots above are not a part of DotNetNuke portal. These pages simulate a hosting environment for your application. Your application “lives” in the Preview area of the main page of the host application.

This test web app is useful for making changes to the application and quickly previewing. You can log out and try different identities and configure the host page to present different logical pages of your applications.

Publishing DotNetNuke Factory Project

Now it’s time to publish our application to DotNetNuke portal.

Bring up Code On Time generator and select the publish action next to your project.

The resource file used to distribute DotNetNuke modules is created for your application and presented in Windows Explorer folder window. You can use this file to install your application in a different portal. The code generator will also copy this resource into the installation folder of the previously specified DotNetNuke instance.

We can now continue installation from within our own DotNetNuke portal.

Installing DotNetNuke Factory Module

Bring up the browser window with DotNetNuke portal. If you have lost the window then start the application again using WebMatrix.

Click on the Host link at the top of the portal page.

Click Extensions option under Basic Features.

Click on the Available Extensions tab and expand the Modules section.

Find My First DNN App and start installation.

Make sure to check the box titled “Ignore File Restrictions”. DotNetNuke maintains a list of “approved” applications. Ours is brand new and is not going to be on the list.

Click the Next button a few times. Note that both release notes and license can be changed if you open the application in Visual Studio.

Accept the license and allow installation to finish. Press the Return button once, and wait for the page to refresh by itself while the application pool of the portal is restarted.

Our module is now installed and can be found (and uninstalled) on Installed Extensions tab.

Navigate to the home page of your application. Add a new page titled Northwind by moving your mouse over the word Pages and enter page information under Add New Page section. Make sure the page is inserted after News & Promotions.

The new page will be created and displayed as a Northwind option on the menu.

Settings can activated if you mouse over Pages at the top and click Page Settings. Change page Permissions to ensure that only registered users can see the content.

Mouse over the transparent Manage button displayed in the top left corner of the ENTER TITLE content module. The button will become opaque and will show you the menu of available options. Delete the content module from the Northwind page.

Mouse over Modules link at the top of the page, select All Categories under Category, and choose My First DNN App option. Enter Northwind in the module Title, and press the Add Module button.

The module is instantiated and now requires logical page selection.

Mouse over the transparent Manage button and select Settings.

Select My First DNN App Settings tab and select Customers page.

Select Page Settings tab and, under Basic Settings, set Module Container to Host: DarkNight – Invisible.

Update module settings by clicking on Update button at the bottom of the screen.

An application page similar to the one in the picture will show up.

Making Changes to Your Project

If you modify your web application in Code On Time Designer, you can use the test web application of the project to test the changes.

Publish the project when you are satisfied with your modifications. A resource file will always be created upon publication. If the module has been installed, then the installed version will be automatically updated to the latest version. Simply bring up the browser window with the portal page and refresh the page to see the changes.

Conclusion

Implementation of line-of-business web applications integrated with DotNetNuke portal is made easy with Code On Time generator and DotNetNuke Factory.

Leave us a comment below to let us know what you think.

Labels: AJAX, Application Factory, DotNetNuke, Web 2.0, Web App Generator

Sunday, September 4, 2011Print Subscribe

URL Hashing

Powerful and simple mechanism of data controller URL parameters allows easy manipulation of the page behavior in Code On Time web applications. For example, consider Products page at http://northwind.cloudapp.net/pages/products.aspx. If you navigate to the page and login as admin/admin123% then you will see the following screen with a list of products.

If you want to navigate to a specific product then try the following link. The same page will open in edit mode on the product with the primary key equal to 7.

http://northwind.cloudapp.net/pages/products.aspx?ProductID=7&_controller=Products&_commandName=Edit&_commandArgument=editForm1

Data controller parameters offer a simple and powerful method of affecting user interface presentation. Couple that with robust Access Control Rules implementation and your web app will provide an excellent and secure mechanism of navigation to specific records.

Sometimes you may want to prevent any possibility of external commands sent to your application via URL parameters unless the commands were initiated by the web application itself or an external “friendly” source.

Enabling URL Hashing

Unlimited edition of Code On Time offers a new feature called URL Hashing, which is available as a component of EASE (Enterprise Application Services Engine). The purpose of URL Hashing is to ensure that only encrypted commands can be passed in the URL of your web application.

Start the web application generator, select your project and click Next button a few times until your reach the Features page. Enable URL Hashing under EASE Configuration.

Proceed to generate the project.

Navigate to any page of your web application displaying data and try passing any parameter in the URL. For example, if you are looking at Products.aspx page then change the URL in the address bar of the browser to Products.aspx?AnyParam=Hello and hit enter key to navigate to the page.

You will see the following response.

All applications pages are now protected and will not allow inclusion of any URL parameters.

Internal URL Parameters

Your web application may be using URL parameters for its own purpose. For example, configure a Navigate action in the Northwind sample as explained next.

Select your project on the start page of the web app generator and click Design. Select Products data controller on All Controllers tab and activate Action Groups page.

Select action group ag1 with the scope of Grid and switch to Actions tab.

Add a new action with the following properties. Note that Command Argument must be entered without line breaks.

Property	Value
Command Name	Navigate
Command Argument	?ProductID={ProductID}&_controller=Products&_commandName=Edit&_commandArgument=editForm1
Header Text	Edit Product

The value of command argument instructs the application to navigate to the current page that hosts the data controller view and pass the ProductID of selected row in the URL. The other URL parameters will force the data controller to open the specified product in editForm1 in Edit mode.

Save the new action, exit the Designer and generate your project.

Navigate to Products page and select the context menu of a product row.

Your browser will navigate to the currently active page with the URL that looks as follows. Notice that there is a parameter “_link” with the cryptic looking value in the address bar of the browser.

URL Hashing mechanism embedded in your application only allows this particular parameter and demands that the value of “ _link” parameter is encrypted.

Alter any portion of the parameter or add any additional URL parameters and the request will fail to display the page with the same HTPP error code 403 presented above.

External URL Parameters

Sometimes you may need to pass URL parameters from an external web application. If URL Hashing feature is enabled then this task becomes impossible unless you encrypt the URLs passed by external web application.

The implementation of encryption can be found in the StringEncryptorBase class of your application source code. The partial code below shows encryption key (Key) and initialization vector (IV). Both properties are passed by methods Encrypt and Decrypt as arguments to the default implementation of Advanced Encryption Standard (AES) available in Microsoft.NET Framework.

C#:

public class StringEncryptorBase
{
    
    public virtual byte[] Key
    {
        get
        {
            return new byte[] {
                    253,
                    124,
                    8,
                    201,
                    31,
                    27,
                    89,
                    . . . .
                    153};
        }
    }
    
    public virtual byte[] IV
    {
        get
        {
            return new byte[] {
                    87,
                    84,
                    163,
                    98,
                    205,
                    . . . .
                    112};
        }
    }
    
    public virtual string Encrypt(string s)
    {
        . . . . . . 
    }
    
    public virtual string Decrypt(string s)
    {

        . . . . . .
    }
}

VB:

Public Class StringEncryptorBase

    Public Overridable ReadOnly Property Key() As Byte()
        Get
            Return New Byte() {253, 124, . . . ., 153}
        End Get
    End Property

    Public Overridable ReadOnly Property IV() As Byte()
        Get
            Return New Byte() {87, 84, 163, 98, . . . ., 112}
        End Get
    End Property

    Public Overridable Function Encrypt(ByVal s As String) As String
        . . . . .
    End Function

    Public Overridable Function Decrypt(ByVal s As String) As String
        . . . . .
    End Function
End Class

Copy this class to the external application and make sure to encrypt the URLs that are passed to a Code On Time web application with URL Hashing enabled.

You may also want to change the key and initialization vector. The default values are hard-coded and shared by all applications generated with Unlimited edition of Code On Time.

Conclusion

URL Hashing is always performed for History and permalinks. If the application is generated without URL Hashing enabled then the permalinks are simply encoded with base-64 encoding to mask the nature of URL parameters.

Advanced encryption with hash code validation will be performed on links create with View Details command and on results of any actions with Command Name set to Navigate.

Labels: AJAX, Application Factory, EASE, Security, Web App Generator

Wednesday, July 20, 2011Print Subscribe

Azure Factory

Code On Time has released new code generation project Azure Factory.

Point the web application generator to SQL Azure database and in a couple of minutes a full-featured modern AJAX-enabled web application connected to your database in the cloud is up running right on your laptop.

Publish the generated application from Code On Time web application generator and upload the deployment package to Windows Azure. In about 10 minutes your application will be up and running on two extra-small server instances, protected by firewall, and enhanced with a load balancer. SQL Azure database exists in three copies for added peace of mind.

The best part – no upfront expenses, no need to have an extensive knowledge required to maintain a data center. Turn it “off” with a mouse click. Turn it back “on” with extended resources when need. In the cloud the sky is the limit.

The following features were included in the latest release of the code generation library:

Azure Factory code generation project. Current release does not support Import and Annotations. See live demo of the Northwind sample in Azure cloud at http://northwind.cloudapp.net.
Corrected enumeration of multi-value filters in the filter description presented in grid views. 'Between' filter will show the second value if the filter window is re-activated after being applied.
Programming language of each project is now remembered in the project file. Project language selector has been moved to New Project dialog.
Creation of sample databases is now supported in the code generator. Create the Northwind database from the database connection string configuration screen. More sample database will be available in the future.
ASP.NET Membership database tables and stored procedures can now be created in the application database straight from the code generator in the database connection string configuration screen. Click “Add” button to install membership support in your own database.
Web Site Factory project now supports “develop” action. Navigate to the start page of the code generator and select “develop” action in Actions column of the project row to start Visual Studio or Visual Web Developer.
Pages without containers will be generated with a tree view showing child nodes relative to the current page. The standard ASP.NET tree views on the pages of generated applications will use the link colors of the current theme. See example at http://northwind.cloudapp.net/Pages/AllReports.aspx.
Session State Monitor has been integrated in Azure Factory projects to perform clean up of ASP.NET session data required in multi-server hosting scenarios.
Project Wizard will replace passwords with “*****” in connection string input fields.
The depth of history has been reduced to 10.
ConnectionStringSettingsFactory class has been implemented to support multi-tenant applications with separate databases served by a single application code base. We will post a tutorial explaining the technique.
The code generator is now using MSBuild.exe from Microsoft.NET Framework to build applications. You don’t need to have Visual Studio or Visual Web Developer to build Web App Factory or Azure Factory projects.
In-page state maintenance input __COTState is rendered as "hidden" in IE and as "text" in other browser to make sure that IE preserves its ability to save user-name/password combinations.
Added missing Row action group scope in designer.

Coming Up

This week we will release a follow up update that includes Access Control Rules, the first component of the EASE framework (Enterprise Application Services Engine).

We will provide two tutorials explaining creation of multi-tenant web applications with Access Control Rules and ConnectionStringSettingsFactory.

Azure Factory tutorials are being completed and will be released this week.

We are working on completing Custom Membership and Role Providers – the second component of EASE. The goal is to have it out by the end of July, 2011.

New EASE component “My Account” will also be made available in all editions of Code On Time web application generator. The common scenario of applications using ASP.NET Membership is to have a table that allows storing extended user properties in a custom table. “My Account” will automatically detect if there is no record in extended user properties and will invoke a business rule to allow automatic creation of such record. Users will also be redirected to review their extended membership properties. My Account option on the membership bar will be enhanced to allow activation of a custom configuration screen. This will allow to delegate User ID / Password management to ASP.NET core classes and concentrate on data properties specific to your line-of-business application.

In July we will also release support for URL hashing. This feature will add a security level on top of Data Controller URL Parameters. URL hashing will be available only in Unlimited edition.

Automatic reports will be enhanced to support “form” layout. We expect this feature to be available in all product editions in the last week of July or the first week of August.

DotNetNuke Factory is expected to become available in the first half of August, 2011.

We have allocated significant development resources to completion of delayed features and code generation projects and expect to report significant progress.

Labels: AJAX, Application Factory, Azure, Release Notes, Web 2.0