Cloud

The Product Browser example explains how to create a user control that takes advantage of the application server built in a web app created with Code On Time.  The scope of this example is to demonstrate reading the app data with REST requests with a custom JavaScript. The example also uses jQuery library integrated in the generated web apps.

Most custom user interface extensions will need to update, insert, and delete data.  Create, Read, Update, and Delete operations are also known as CRUD.  A complete example of a standalone Product Catalog Manager is implementing a Cross-Domain CRUD.

If a custom user control is created in a web app, then there is no need for cross-domain AJAX requests. Standard JSON requests can be executed with explicitly defined HTTP methods POST, GET, PUT, and DELETE to indicate the purpose of an AJAX web request.

Enabling Access to Products, Suppliers, and Categories

Three data controllers are required to implement the Product Catalog Manager. The data controllers Products, Categories, and Suppliers must explicitly allow REST requests. The application server will deny any web requests if data controllers are not configured accordingly.

Select Products, Suppliers, and Categories data controllers in Project Designer and enter the following in its Representational State Transfer (REST) Configuration property for each controller:

Creating a User Control

Create a custom user control following instructions from the Product Browser example and replace the markup of a the user control with the example from the Source Code section below.

Browse to the page of a running web app that contains the user control. You will see the following:

Note that if you are accessing the page without singing in, then you will see a browser prompt for user name and password. The static link to the list of suppliers will force the application server to issue an identity challenge.

<script type="text/javascript" 
    src="../appservices/Suppliers?_sortExpression=CompanyName&_instance=SupplierData">
</script>

If you do not wish to have a static link to suppliers then dynamically populate SupplierID list following the pattern shown in the implementation of loadCategories method.

loadCategories: function () {
    $.ajax({
        url: this.basePath() + '/Categories?_sortExpression=CategoryName',
        dataType: 'json',
        cache: false,
        success: function (data) {
            $.each(data.Categories, function (index, category) {
                $('<option>').text(category.CategoryName)
                .attr('value', category.CategoryID).appendTo($('#CategoryID'));
            })
        }
    });
}

Try updating, inserting, and deleting data.

A new product is created by issuing an PUT request to the application server of a web app.

An existing product is deleted by issuing a DELETE request to the application server of a web app.

Source Code

The ajax requests are using a relative path to access the application server. Method ProductManager.basePath() return the path.

Notice the use of “json” in the “dataType” parameter of ajax requests. Also the nature of the CRUD operations is explicitly expressed by the “type” of the requests.

<%@ Control AutoEventWireup="true" %>
<!-- this tag is needed to enable jQuery IntelliSense only -->
<script src="../Scripts/_System.js" type="text/javascript"></script>
<!-- the user interface of the control -->
<script type="text/javascript" 
    src="../appservices/Suppliers?_sortExpression=CompanyName&_instance=SupplierData">
</script>
<script type="text/javascript">
var ProductManager = {
    // Returns the url of the application server of a demo web app.
    basePath: function () { return '../appservices'; },
    // Loads the list of categories requested from the app server via ajax request.
    loadCategories: function () {
        $.ajax({
            url: this.basePath() + '/Categories?_sortExpression=CategoryName',
            dataType: 'json',
            cache: false,
            success: function (data) {
                $.each(data.Categories, function (index, category) {
                    $('<option>').text(category.CategoryName)
                    .attr('value', category.CategoryID).appendTo($('#CategoryID'));
                })
            }
        });
    },
    // Populate suppliers from the list retrieved by the second <script> element.
    loadSuppliers: function () {
        $.each(MyCompany.SupplierData.Suppliers, function (index, supplier) {
            $('<option>').text(supplier.CompanyName)
                .attr('value', supplier.SupplierID).appendTo($('#SupplierID'));
        })
    },
    // Shows a list of products in <select> element
    showProductList: function () {
        var query = '?_sortExpression=ProductName&_q=' + encodeURIComponent($('#QuickFind').val());
        $.ajax({
            url: this.basePath() + '/Products' + query,
            cache: false,
            dataType: 'json',
            success: function (data) {
                var selectedValue = $('#ProductList').val();
                $('#ProductList option').remove();
                $.each(data.Products, function (index, product) {
                    $('<option>')
                        .text(product.ProductName + ' / ' + product.CategoryCategoryName)
                        .attr('value', product.ProductID).appendTo($('#ProductList'));
                });
                $('#ProductList').val(selectedValue);
                $('#ProductListPanel').show();
            }
        });
    },
    // Shows a form with product details,
    showProductDetails: function (productId) {
        if (productId == null) return;
        $('#ProductSearchPanel').hide();
        $('#DeleteButton').show();
        $.ajax({
            url: this.basePath() + '/Products/editForm1/' + productId,
            cache: false,
            dataType: 'json',
            success: function (product) {
                $('#ProductDetailsPanel').show();
                $('#ProductID').attr('value', product.ProductID);
                $('#ProductName').attr('value', product.ProductName).focus();
                $('#SupplierID').attr('value', product.SupplierID);
                $('#CategoryID').attr('value', product.CategoryID);
                $('#QuantityPerUnit').attr('value', product.QuantityPerUnit);
                $('#UnitPrice').attr('value', product.UnitPrice);
            }
        });
    },
    // Returns back to the search mode.
    backToSearch: function () {
        $('#ProductDetailsPanel').hide();
        $('#ProductSearchPanel').show();
        $('#ProductList').focus();
    },
    // Refreshes the search result.
    refreshSearch: function () {
        this.backToSearch();
        this.showProductList();
    },
    // Formats a URI of a product
    createProductUrl: function (requestType) {
        if (requestType == 'POST')
            return this.basePath() + '/Products/createForm1';
        return this.basePath() + '/Products/editForm1/' + encodeURIComponent($('#ProductID').val());
    },
    // Creates an object with the properties retrievd from the input fields 
    // of the "ProductDetails" form.
    collectFieldValues: function () {
        return {
            ProductID: $('#ProductID').val(),
            ProductName: $('#ProductName').val(),
            SupplierID: $('#SupplierID').val(),
            CategoryID: $('#CategoryID').val(),
            QuantityPerUnit: $('#QuantityPerUnit').val(),
            UnitPrice: $('#UnitPrice').val()
        };
    },
    // Deletes a products.
    deleteProduct: function () {
        if (!confirm('Delete?')) return;
        $.ajax({
            url: this.createProductUrl('DELETE'),
            dataType: 'json',
            type: 'DELETE',
            data: ProductManager.collectFieldValues(),
            success: function (result) {
                if (result.errors)
                    alert(result.errors[0].message);
                else
                    ProductManager.refreshSearch();
            }
        });
    },
    // Shows the product form with blank values.
    newProduct: function () {
        $('#ProductSearchPanel').hide();
        $('#DeleteButton').hide();
        $('#ProductDetailsPanel').show();
        $('#ProductID').attr('value', null);
        $('#ProductName').attr('value', 'New Product').focus().select();
        $('#SupplierID').attr('value', null);
        $('#CategoryID').attr('value', null);
        $('#QuantityPerUnit').attr('value', null);
        $('#UnitPrice').attr('value', null);
    },
    // Saves a product. If there is no value in the #ProductID hidden field then
    // a new product is created by "POST" request. Otherwise an existing product
    // is updated with "PUT" request.
    saveProduct: function () {
        if (!confirm('Save?')) return
        var requestType = $('#ProductID').val() != '' ? 'PUT' : 'POST';
        $.ajax({
            url: this.createProductUrl(requestType),
            dataType: 'json',
            type: requestType,
            data: ProductManager.collectFieldValues(),
            success: function (result) {
                if (result.errors)
                    alert(result.errors[0].message);
                else {
                    if (requestType == 'POST')
                        alert('ID of the new product is ' + result.ProductID);
                    ProductManager.refreshSearch();
                }
            }
        });
    },
};
$(document).ready(function () {
    // pre-populate the drop down lists of categories and suppliers
    ProductManager.loadCategories();
    ProductManager.loadSuppliers();
    // attach event handlers to buttons
    $('#ProductListPanel,#ProductDetailsPanel').hide();
    $('#FindButton').click(function (e) {
        e.preventDefault();
        ProductManager.showProductList();
    });
    $('#ShowDetailsButton').click(function (e) {
        e.preventDefault();
        ProductManager.showProductDetails($('#ProductList').val());
    });
    $('#BackToSearchButton').click(function (e) {
        e.preventDefault();
        ProductManager.backToSearch();
    });
    $('#NewButton').click(function (e) {
        e.preventDefault();
        ProductManager.newProduct();
    });
    $('#SaveButton').click(function (e) {
        e.preventDefault();
        ProductManager.saveProduct();
    });
    $('#DeleteButton').click(function (e) {
        e.preventDefault();
        ProductManager.deleteProduct();
    });
    $('#QuickFind').focus();
});
</script>
<style type="text/css">
    body, button, input, select
    {
        font-family: Tahoma;
        font-size: 8.5pt;
    }
   
    #QuickFind
    {
        width: 280px;
    }
    
    #ProductList
    {
        width: 350px;
        height: 208px;
        margin-bottom: 4px;
    }
    
    #FindButton
    {
        width: 60px;
    }
    
    #ProductListPanel
    {
        margin-top: 4px;
    }
    
    .Field
    {
        padding-bottom: 4px;
    }
    
    #ProductDetailsPanel
    {
        margin-top: 4px;
        padding: 8px;
        border: solid 1px silver;
        display: inline-block;
    }
    
    .Field label
    {
        display: block;
        color: green;
    }
    
    .Field input
    {
        width: 300px;
    }
</style>
<div>
    <div id="ProductSearchPanel">
        <input id="QuickFind" type="text" />
        <button id="FindButton">
            Find</button>
        <div id="ProductListPanel">
            <select id="ProductList" size="5">
            </select>
            <div>
                <button id="ShowDetailsButton">
                    Show Details</button>
                <button id="NewButton">
                    New Product</button>
            </div>
        </div>
    </div>
    <div id="ProductDetailsPanel">
        <input id="ProductID" type="hidden" />
        <div class="Field">
            <label for="ProductName">
                Product Name:</label>
            <input id="ProductName" />
        </div>
        <div class="Field">
            <label for="SupplierID">
                Supplier Company Name:</label>
            <select id="SupplierID">
            </select>
        </div>
        <div class="Field">
            <label for="CategoryID">
                Category Name:</label>
            <select id="CategoryID">
            </select>
        </div>
        <div class="Field">
            <label for="QuantityPerUnit">
                Quantity Per Unit:</label>
            <input id="QuantityPerUnit" />
        </div>
        <div class="Field">
            <label for="UnitPrice">
                Unit Price:</label>
            <input id="UnitPrice" />
        </div>
        <div>
            <button id="BackToSearchButton">
                Back To Search</button>
            <button id="SaveButton">
                Save</button>
            <button id="DeleteButton">
                Delete</button>
        </div>
    </div>
</div>

With the release of Windows Azure, Microsoft has provided a great cloud database, storage, and computing service platform. Windows Azure offers many benefits, such as guaranteed 99.95% uptime, automatic OS and service  patching, integrated network load balancing, and easy scaling.

While the Windows Azure cloud may offer the perfect platform to deploy your next web application, you still need to build this application. This is where Code On Time’s Azure Factory comes in. All you have to do is paste in your SQL Azure database connection string, and hit Generate. In a minute, your advanced web application will start in your default browser, complete with sorting, adaptive filtering, reporting, charts, and much more. Hit Publish, and the application will be packaged. Upload the published deployment package to Windows Azure, and within minutes you’ll have your app running in the cloud.

Need to add more features and customize your app? Just use the easy to use Designer to make necessary changes to the logical definition of the application. While no coding is needed to make a great app, you can always open the source code in Visual Studio and change it to precisely fit your requirements.

The following article will explain how to generate and deploy an Azure Factory application. View our learning system if you need help setting up a Windows Azure account, creating a database server, or creating a database using SQL Azure tools.

Generating the Azure Factory Project

Launch the web application generator, and create a new project. Choose Azure Factory.

Give this project the name of “AzureFactory”. Pick the programming language of your choice. Press Create to create the project.

On the next page, you can specify your namespace. We’ll leave the default of “MyCompany” and continue to the next page of the wizard by pressing Next.

This page requires you to specify a database connection. Click on the “…” button next to the Connection String field to configure the string.

In the Server field, enter the database’s Fully Qualified DNS Name. This can be found in the Properties of the server when using Windows Azure Management Portal.

Enter your server username and password.

If you already have an SQL Azure database, then enter it’s name in the Database field. If you don’t have a database, you can quickly create one using the web application generator. The next few steps explain how to create a sample Northwind database.

In the Database field, write “Northwind”. Press the Create button to create the database. Press Yes to confirm creation of the database.

You will be notified that the database has been created. Press OK to close the notification, and select Northwind from the Sample Tables dropdown. Press Install to install the Northwind sample into the database, and press Yes to confirm.

Once complete, you will be notified. Press OK to close the notification.

The next steps explain configuration of ASP.NET Membership and Session State management that apply to any database.

Let’s add ASP.NET Membership to this database. Under Membership, press Add. Press OK to confirm installation.

Once complete, press OK to close the notification.

By default, Azure Factory applications are configured to use two extra-small server instances in the cloud. If you use multiple instances, then Session State management must be included in the application. Under Session State, press Add. Press OK to confirm the installation.

Press OK to close the notification, and press OK one more time to save the connection string. Press Next twice to get to the Reporting page.

Check the box to enable reporting, and keep pressing Next to reach the Theme page.

Let’s choose the Azure theme. Select Azure from the list.

Hold down Shift key, and press Next. This shortcut will take you to the Summary page. Press the Generate button.

Wait until the generator finishes, and your default browser will open with your new web application. While the application is running on your computer, the database is located in the cloud. You can log in and start using the app immediately.

Deploying the Web App

It’s time to deploy the app to Azure. Go back to the generator, and click on the project name. Press Publish.

The generator will package the web application and create the files necessary for deployment. A Windows Explorer screen will open and display the location of the files.

Log in to your Windows Azure Management Portal, and switch to Hosted Services, Storage Accounts & CDN section in the bottom left corner. In the folders, click on Hosted Services. Select your subscription, and press New Hosted Service on the ribbon.

Use the following settings for your new hosted service:

Press OK, and Windows Azure will start the deployment process. This step may take 10-15 minutes. Once the status of the deployment changes to Ready, use the link found under Properties. You will be taken to the fully functional website running in the cloud .

If you look at the URL, you will notice that it uses the ID of the deployment, not the requested DNS Name. This is because the deployment is a staging deployment. You can go back to the management portal, and choose Swap VIP to change it into a production deployment. Now you can use the DNS Name you specified during creation of the hosted service.

When you are ready to deploy a new project revision, create a new staging deployment. Test the new deployment in the cloud. If everything is working as expected, then swap the virtual IP address of the staging deployment with the production one. Click Swap VIP button on the Management Portal ribbon to do so.

When VIP swapping has finished, the previous application revision will become a staging deployment. Shut it down if you don’t need it. Continue upgrading staging deployment with the new revisions of the application, and swapping them later with production.