Friday, November 8, 2013

File uploads with Angular part 2

We left off last time with a file uploader that was functional, but not without its shortcomings. Let's continue with addressing some of the immediate issues that bothered me.

Emptying the file input

The first thing that was bothering me about the file uploader as we left it last was that while the files were uploaded as soon as they were picked in the file input element, they were left as being selected in the element. Unfortunately, the file list is readonly, so I can't just clear that. However I can replace the used file input with a new one to simulate the list being cleared out. To do this I will need to handle the use of the file-uploader attribute a little differently. If Angular attaches events to a file input element, and then I replace it with a new one, all of Angular's bindings disappear. So I'm going to use an outer element instead.
<-- Partial -->
<div file-uploader="onFileSelected($files)"></div>
I no longer have a file input element so I'll have to handle the creation of that in the directive handler:
// Directive
app.directive("fileUploader", ["$parse", function ($parse) {
    var fileInputTemplate = "<input type='file' multiple />"; // jquery template for new file input
    
    return function (scope, $elem, attrs) {
        var fn = $parse(attrs["fileUploader"]);

        var changeFunc = function(e) {
            fn(scope, { $files: e.target.files });

            // Empty the container div and append a new element based
            // on fileInputTemplate and attach the change event handler
            $elem.empty().append( 
                $(fileInputTemplate).on("change", changeFunc)
            );
        };
        
        // Append a new element based on fileInputTemplate and
        //attach the change event handler
        $elem.append(
            $(fileInputTemplate).on("change", changeFunc)
        );
    };
}]);
Since I'm attaching the file-uploader directive on a div instead of an input element, I need to create the input element manually and append it to the div. I'm also declaring a function "changeFunc" which I'm using as the change handler. This is the same as the old event handler, except that in addition to calling fn I'm emptying the container div and appending a new input element with a new change event handler on it.

Adding a file queue

It's rare that someone would want a file to upload immediately upon selection in a file input. It's more likely that a user would want to see the selected files and wait to upload until a form submission. I'm going to modify the controller to populate an array on the scope instead of immediately sending files to be uploaded:
// Controller
app.controller("ImportController", ["$scope", "$http",
    function ($scope, $http) {
        $scope.files = [];
        
        $scope.onFileSelected = function ($files) {
            for (var i = 0; i < $files.length; ++i)
                $scope.files.push($files[i]);
            $scope.$apply();
        };
    }
]);
Instead of submitting the files like before, I'm adding them to a scope variable called files. It's now trivial to add a list of filenames to the partial.
<!-- Partial -->
<div file-uploader="onFileSelected($files)"></div>
<ul>
    <li ng-repeat="file in files">
        {{file.name}}
    </li>
</ul>
<input type="button" ng-click="upload()" value="Upload"/>
I went ahead and added a submit button. Since all of the files are stored on the scope, I can use the submit button to loop through those files and post them to the server:
// Controller
app.controller("ImportController", ["$scope", "$http",
    function ($scope, $http) {
        $scope.files = [];
        
        $scope.onFileSelected = function ($files) {
            for (var i = 0; i < $files.length; ++i)
                $scope.files.push($files[i]);
            $scope.$apply();
        };

        $scope.upload = function() {
            var formData = new FormData();

            for (var i = 0; i < $scope.files.length; ++i) {
                (function () {
                    var $file = $scope.files[i];
                    formData.append("file", $file, $file.name);
                })();
            }

            var options = {
                method: "POST",
                url: "/api/Import",
                data: formData,
                headers: { "Content-Type": undefined },
                transformRequest: angular.identity
            };

            $http(options).success(function (data, status) {
                if (status != 200)
                    console.log("Error uploading files");
                else {
                    for (var i = 0; i < data.length; ++i)
                        console.log(data[i]);
                    $scope.files.length = 0; // clear the array
                }

            });
        };
    }
]);
The new $scope.upload function should look familiar, it's essentially the old $scope.onFileSelected function.

Styling the file input

Right now the file input still looks like a plain old file input. This means, in Chrome, we will perpetually see the label "No file chosen" even if we have chosen files to upload. I'm going to take a page out of the jQuery File Upload book and style my button like theirs. First I'll need to modify the directive to handle a button caption:
// Directive
app.directive("fileUploader", ["$parse", function ($parse) {
    var fileInputTemplate = "<input type='file' multiple />"; // jquery template for new file input

    return function (scope, $elem, attrs) {
        var fn = $parse(attrs["fileUploader"]);

        var changeFunc = function (e) {
            fn(scope, { $files: e.target.files });

            // Empty the container div and append a new element based
            // on fileInputTemplate and attach the change event handler
            $elem.children("input").replaceWith(
                $(fileInputTemplate).on("change", changeFunc)
            );
        };

        $elem.addClass("file-uploader");
        var $button = $(document.createElement("button"));
        var text = $elem.text();
        var $span = $(document.createElement("span")).text(text);

        // Append a new element based on fileInputTemplate and
        //attach the change event handler
        $button.append($span).append(
            $(fileInputTemplate).on("change", changeFunc)
        );
        $elem.empty().append($button);
    };
}]);
There are a few significant differences between this version of the directive and the last. Note line 13. Instead of taking a shotgun approach and emptying the entire container div before appending the new input element, I'm specifically targeting the input element and replacing it. Below that, I am taking the text that was present in the container div and putting it into a span element to target it more easily with CSS. I'm then wrapping the whole thing into a button element that I can also style with CSS.

Speaking of CSS, here are the style rules I'm going to use:
// CSS
.file-uploader button {
    position: relative;
    overflow: hidden;
}

.file-uploader input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    -ms-filter: 'alpha(opacity=0)';
    font-size: 200px;
    direction: ltr;
    cursor: pointer;
}
This is a stripped down form of how jQuery File Upload styles their input button. It very cleverly mixes the opacity property of the input element (to hide it) with the overflow property of the button to mask the input element from the cursor.

Additional attributes

I'd like to add a couple more attributes for functionality. I'll start with an attribute to specify the maximum number of files and an attribute to signify whether the user would like to append to the current list of files or replace the current list of files every time they click browse.
<!-- Partial -->
<div file-uploader="files" 
     file-uploader-max-files="5" 
     file-uploader-browse-action="replace">Select files</div>
<ul>
    <li ng-repeat="file in files">
        {{file.name}}
    </li>
</ul>
<input type="button" ng-click="upload()" value="Upload"/>
You'll notice that I changed the value of "file-uploader" in the partial to bind directly to the "files" scope property instead of the "onFileSelected" scope property. In order to check for these attributes inside my directive, I'm going to need to refactor my code a bit. Currently the directive serves as nothing more than a traffic cop which redirects the "change" event of the file input to a function that is defined on the controller. I'm going to modify this pattern to bind the attribute directly to the files property on the scope and handle the population directly in the directive (no pun intended).
// Directive
app.directive("fileUploader", ["$parse", function ($parse) {
    var fileInputTemplate = "<input type='file' multiple />"; // jquery template for new file input

    return function (scope, $elem, attrs) {
        var scopePropGetter = $parse(attrs["fileUploader"]);

        var maxFiles = $parse(attrs["fileUploaderMaxFiles"])() || attrs["fileUploaderMaxFiles"];
        maxFiles = Math.max(parseInt(maxFiles || 0), 0);
        if (maxFiles == 1)
            fileInputTemplate = "<input type='file' />"; // remove the multiple attribute
        
        var browseAction = $parse(attrs["fileUploaderBrowseAction"])() || attrs["fileUploaderBrowseAction"];
        browseAction = browseAction || "replace";
        if (browseAction != "append")
            browseAction = "replace";

        var changeFunc = function (e) {
            var files = scopePropGetter(scope);
            if (browseAction == "replace")
                files.length = 0;

            var numFilesToAdd = e.target.files.length;
            if (maxFiles > 0)
                numFilesToAdd = Math.min(maxFiles - files.length, e.target.files.length);
            
            for (var i = 0; i < numFilesToAdd; ++i)
                files.push(e.target.files[i]);
            scope.$apply();

            // Empty the container div and append a new element based
            // on fileInputTemplate and attach the change event handler
            $elem.children("input").replaceWith(
                $(fileInputTemplate).on("change", changeFunc)
            );
        };

        $elem.addClass("file-uploader");
        var $button = $(document.createElement("button"));
        var text = $elem.text();
        var $span = $(document.createElement("span")).text(text);

        // Append a new element based on fileInputTemplate and
        //attach the change event handler
        $button.append($span).append(
            $(fileInputTemplate).on("change", changeFunc)
        );
        $elem.empty().append($button);
    };
}]);
// Controller
app.controller("ImportController", ["$scope", "$http",
    function ($scope, $http) {
        $scope.files = [];

        $scope.upload = function() {
            var formData = new FormData();

            for (var i = 0; i < $scope.files.length; ++i) {
                (function () {
                    var $file = $scope.files[i];
                    formData.append("file", $file, $file.name);
                })();
            }

            var options = {
                method: "POST",
                url: "/api/Import",
                data: formData,
                headers: { "Content-Type": undefined },
                transformRequest: angular.identity
            };

            $http(options).success(function (data, status) {
                if (status != 200)
                    console.log("Error uploading files");
                else {
                    for (var i = 0; i < data.length; ++i)
                        console.log(data[i]);
                    $scope.files.length = 0; // clear the array
                }

            });
        };
    }
]);
Let's start with the controller. The only thing we changed is we removed the "onFileSelected" function from the scope. As far the directive, there were quite a few changes made. Lines 8-16 deal with reading the values out of the new attributes and making sure they are valid. Lines 19-29 contain the new code that was taken from the old "onFileSelected" function. It handles the population of the whatever scope variable is bound to the directive. Lines 19-25 decide how many files to add based on the maximum file limit as well as clearing out the existing files if "replace" is selected. Lines 27-29 handle appending the new files onto the scope property.

If you've followed along, you should now have a functioning file uploader. It isn't quite feature complete, but I will continue adding to it in future posts.

File uploads with Angular

Uploading a file is a common operation, and in designing an Angular-based site the odds are high that one will eventually need to add support for it. I reached the point in one of my projects where I needed to add support. I've always used the very nice jQuery File Upload plugin, but since I am fairly new to Angular, I want to use this as a chance to explore the behind-the-scenes of creating directives and manually creating HTTP file posts.

Before jumping into any code I'll explain some assumptions. I'll be adding code to three different areas -- the partial, the controller, and the directive. The main javascript file will start off looking something like this:
var app = angular.module("myApp", []); // declare this module, named "myApp". Matches ng-app attribute.
We will assume that my partial file is somehow loaded through some sort of routing.

Now that we have that out of the way, let's jump in.

Creating the directive

First, I'm going to create a directive that I can use for my input tag. According to Angular's documentation, "Directives are markers on a DOM element (such as an attribute, element name, or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children." This will allow me to add functionality to an HTML element just by adding an attribute. I'll add a simple attribute to a file input tag like so:
<!-- Partial-->
<input multiple="" file-uploader="" type="file" />
Now that I've added the "file-uploader" attribute, I need to create a directive that's going to pick up on that and add some functionality:
// Directive
app.directive("fileUploader", [function() {
    return function() {
        console.log("It is working.");
    };
}]);
When I load the page I see the console message. Success! Now on to adding more functionality to the directive.

Expanding the directive

// Directive
app.directive("fileUploader", [function() {
    return function (scope, $elem, attrs) {
        $elem.on("change", function(e) {
            console.log("File changed");
        });
    };
}]);
A little more productive, I now have a jquery event handler for when a new file is picked. Say I want the developer to be able to specify his/her own callback function for when a file is picked. Just like any other binding, it will be assigned as a property on the scope:
// Controller
app.controller("ImportController", ["$scope",
    function ($scope) {
        $scope.onFileSelected = function() {
            console.log("onFileSelected called");
        };
    }
]);
<!-- Partial -->
<input multiple="" file-uploader="onFileSelected()" type="file" />
This still won't work, however. Nothing in our application is actually binding this method to the change event of the file input. If you run this as-is, you'll still get the "File changed" log message, but nothing that says "onFileSelected called". So, I need to modify the directive function:
// Directive
app.directive("fileUploader", ["$parse", function ($parse) {
    return function (scope, $elem, attrs) {
        // fn will be the callback function
        // injected into the directive attribute
        var fn = $parse(attrs["fileUploader"]);

        $elem.on("change", function(e) {
            fn(scope);
        });
    };
}]);
I've modified the directive function to take the string passed into the file-uploader directive and parse out the scope variable assigned to it. This should return a function, as it should be the custom callback function assigned to the scope. Once assigned to fn, it can be called, passing in the scope as the first parameter. Now when the a file is selected, the onFileSelected function I've added to the scope is called. Next, I'd like to actually get some file information back to the custom event handler. This is located inside the event object [todo -- on what browsers]. I'll make modifications to pass back this information.
// Directive
app.directive("fileUploader", ["$parse", function ($parse) {
    return function (scope, $elem, attrs) {
        var fn = $parse(attrs["fileUploader"]);
        $elem.on("change", function (e) {
            fn(scope, { $files: e.target.files });
        });
    };
}]);
// Controller
app.controller("ImportController", ["$scope",
    function ($scope) {
        $scope.onFileSelected = function($files) {
            console.log("onFileSelected called");
            console.log($files);
        };
    }
]);
<!-- Partial -->
<input multiple="" file-uploader="onFileSelected($files)" type="file" />
Inside the directive function, I've added a second parameter to the fn() call. The first parameter sends the scope, and the second parameter will extend the scope by adding/replacing properties on the scope. This is useful if you'd like to pass extra data to the callback function, but you don't want to make any lasting changes to the scope that other parts of the application could see. I'm using the property name "$files", with the dollar sign signifying that this is not a normal scope variable. Inside the controller, I've modified the onFileSelected function to take one parameter which will be assigned in the partial. Inside the partial, I've modified the file-uploader attribute to pass $files to the onFileSelected function. This completes the circle, and ensures that the callback has the data it needs.

Sending the data to the server

Now I'm going to loop through all of the files that were passed through the $files parameter and put together an HTTP request:
// Controller
app.controller("ImportController", ["$scope", "$http",
    function ($scope, $http) {
        $scope.onFileSelected = function ($files) {
            console.log("onFileSelected called");
            console.log($files);
            for (var i = 0; i < $files.length; ++i) {
                (function() {
                    var $file = $files.item(i);

                    var formData = new FormData();
                    formData.append("file", $file, $file.name); // test

                    var options = {
                        method: "POST",
                        url: "/api/Import",
                        data: formData,
                        headers: { "Content-Type": undefined },
                        transformRequest: angular.identity
                    };

                    $http(options);
                })();

            }
        };
    }
]);
Here I've added a loop to go through all of the attached files and issue an HTTP post for each one. I'm taking advantage of the FormData function, as it makes sending complex HTTP request incredibly easy. Unfortunately, FormData is not supported in versions of Internet Explorer prior to 10. I will add support for some older versions of IE in a future blog post. After building the FormData object, I'm adding it to the HTTP options. I'm also setting the Content-Type header to undefined and the transformRequest property to angular.identity, a bit of Angular magic to parse our FormData object. The controller as it stands will issue one request for every file, which is a bit overkill. It can be modified to lump all files together:
// Controller
app.controller("ImportController", ["$scope", "$http",
    function ($scope, $http) {
        $scope.onFileSelected = function ($files) {
            var formData = new FormData();
            
            for (var i = 0; i < $files.length; ++i) {
                (function() {
                    var $file = $files.item(i);
                    formData.append("file", $file, $file.name);
                })();
            }

            var options = {
                method: "POST",
                url: "/api/Import",
                data: formData,
                headers: { "Content-Type": undefined },
                transformRequest: angular.identity
            };

            $http(options);
        };
    }
]);
The backend I have this running against will spit out a list of relative paths that the uploaded files can be reached at, so I'm going to add some logging for the response.
// Controller
app.controller("ImportController", ["$scope", "$http",
    function ($scope, $http) {
        $scope.onFileSelected = function ($files) {
            var formData = new FormData();
            
            for (var i = 0; i < $files.length; ++i) {
                (function() {
                    var $file = $files.item(i);
                    formData.append("file", $file, $file.name);
                })();
            }

            var options = {
                method: "POST",
                url: "/api/Import",
                data: formData,
                headers: { "Content-Type": undefined },
                transformRequest: angular.identity
            };

            $http(options).success(function(data, status) {
                if (status != 200)
                    console.log("Error uploading files");
                else {
                    for (var i = 0; i < data.length; ++i)
                        console.log(data[i]);
                }
                    
            });
        };
    }
]);
It's not very pretty, but it functions. In a future post I'll talk about how to add more functionality and dress things up a bit. I eventually want to integrate jquery file uploader, but this is a nice exercise in learning all of the nuts and bolts behind Angular file uploads.

For more information, check out our website.

Wednesday, January 9, 2013

DropDownListFor with Enums

When creating a dropdown list using the DropDownListFor method off of the html helper, you usually have to manually include all of the list items:

@{
    List<selectlistitem> items = new List<selectlistitem>
    {
        new SelectListItem {Text = "Red", Value = "Red", Selected = Model.FavoriteColor == "Red"},
        new SelectListItem {Text = "Green", Value = "Green", Selected = Model.FavoriteColor == "Green"},
        new SelectListItem {Text = "Blue", Value = "Blue", Selected = Model.FavoriteColor == "Blue"}
    };
}

@Html.DropDownListFor(model => model.FavoriteColor, items)

In this case, FavoriteColor is a string property that has some options on a list for convenience. But what if it was an Enum?
public enum Colors
{
    Red,
    Green,
    Blue
}

We can use some fancy maneuvering and LINQ to create a dropdown list in one command:
@Html.DropDownListFor(model => model.FavoriteColor, Enum.GetValues(typeof(Colors)).Cast<colors>().Select(color => new SelectListItem { Text = Colors.ToString(), Value = Colors.ToString(), Selected = model.FavoriteColor == color }))

This LINQ query uses the static method GetValues to get a list of all entries in an enum. They get casted to their appropriate type and then a new SelectListItem is selected out of them. This works great, but it's a bit too much work. Let's try an HtmlHelper extension method:
public static class HtmlHelperExtensions
{
    public static MvcHtmlString DropDownListFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression)
    {

    }
}

By creating a new static class and adding it to the same namespace as the view (or adding a "using" statement to the top of the view), we will now see a new overload for the DropDownListFor method which takes only one parameter, the property expression.
@Html.DropDownListFor(model => model.FavoriteColor)

In populating the method, it has to do 5 things:
  1. It must establish the name of the property
  2. It must establish the type of the property and ensure it is an enum
  3. It must get a list of all possible options for the enum
  4. It must create a list of SelectListItems
  5. Finally, it must return a dropdown list
Here is the complete method in action:
public static MvcHtmlString DropDownListFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression)
{
    var propertyName = ExpressionHelper.GetExpressionText(expression);
    var metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);

    var propertyInfo = metadata.ContainerType.GetProperty(propertyName);

    if (!propertyInfo.PropertyType.IsEnum)
        throw new InvalidParameterException("Must use with a property of an Enum type.");

    var options = Enum.GetValues(propertyInfo.PropertyType).Cast<object>().Select(o => o.ToString()).ToList();
    var descriptions = propertyInfo.PropertyType.GetEnumDescriptions();

    var selectedOption = metadata.Model.ToString();
    var selectList = options.Select(option => new SelectListItem {Text = descriptions[option], Value = option, Selected = option == selectedOption});

    return htmlHelper.DropDownListFor(expression, selectList);
}
For more information, check out our website.

Wednesday, November 14, 2012

Code Refactoring - Improving speed without changing external behavior


As part of our Contract Management solution Contract Guardian, we have developed a reporting tool to enable us to enter complex search terms and fetch contracts satisfying the search terms. Our Rippe & Kingston development team wanted this to be a tool that we could use on any of our custom projects and products.  This tool was developed using ExtJS as the front end and C# ASHX pages to process the query. This sounds really simple except when it was used in real situations that fetch many thousand contracts. When this project was deployed to a client that had more than 5000 contracts, we got the dreaded IE error “A script on this page is causing Internet Explorer to run slowly”.

On further research we determined that a script on our program was taking a long time to finish executing. This is a note from Microsoft1 for Internet Explorer  - Because some scripts may take an excessive amount of time to run, Internet Explorer prompts the user to decide whether they would like to continue running the slow script. Some tests and benchmarks may use scripts that take a long time to run and may want to increase the amount of time before the message box appears. "

Now there were a couple of options to resolve this error. One of the options provided in the Microsoft Knowledge Base includes modification of a registry value on client machines to wait for more time before throwing the notification message. That option would introduce issues during mass deployment across large client installations.  Further, the same script could also be running slower in other browsers as well.

The other option was to go back to the drawing board and refactor2 the script that was causing the issue.  Refactoring is basically recoding the program without affecting the end result of the program.

As noted, the front end was ExtJS . This consists of a Contract grid (A ExtJS Grid Panel) with default columns. The users have options to choose the display fields that will be displayed as columns on the grid.   These display fields are saved on the Cache engine behind our reporting tool.  The Cache saves all the filters (Departments, Companies, Users, Contract Types) used to filter the contracts and the display fields that show up on the Contract Grid.

 Our script calls a corresponding ASHX page that processes the query and the query in turn uses the Cache to get the fields. The filters selected/entered by the user generates the JSON object to be returned to the script. The JSON object consists of the headers that will recreate the ExtJS Grid.Panel columns and the data that will go to the ExtJS store that populates the grid.  

Since the fields are not known until run time, the script was processing every header field, recreating columns, filters, creating a store, paging tool bar and many other things and finally adding the data to the store in the Grid Panel. This took a lot of time.
// Comment


function populateContractGrid(data) {

   // Code omitted .....
        reconfigure_grid_test(newHeaders, newHeaderTypes, newData, dataStore);
   }

//pass the information to the next method from here
function reconfigure_grid_test(headers, types, data, dataStore) {
    // Code omitted .........
    reconfigure_grid(headerFields, headerTypes, dataFields, dataStore);
}
 
function reconfigure_grid(fields, types, data, dataStore) {
    // Code omitted...
    //loop will create grid columns and grid fields, adding them to the above arrays
            
        // Code omitted 
        columnArray.push(column);

       // Code omitted 
        fieldArray.push(field);
    }

    //build the column model that will be used in the contract grid
   
    // Code omitted
    var reader = new Ext.data.ArrayReader(
    {
        totalProperty: ''
    }, record);

    var memoryProxy = new Ext.ux.data.PagingMemoryProxy(data);

    var store3 = new Ext.data.ArrayStore(
    {
        remoteSort: true,
        reader: reader,
        fields: fieldArray,
        baseParams:
        {
            lightWeight: true,
            ext: 'js'
        },
        data: data,
        cm: columnModel,
        proxy: memoryProxy
    });

   // Create the filters for the grid
   // Code omitted
    pagingTBar.bindStore(store3, true);
    contractGrid.reconfigure(store3, columnModel);

    if (contractGrid.plugins) {
        for (var index = 0; index <= contractGrid.plugins.length; index = index + 1) {
            contractGrid.plugins.pop();
        }
    }

    filterPlugin.init(contractGrid);
    summary.init(contractGrid)
    contractGrid.plugins.push(filterPlugin);
    contractGrid.plugins.push(summary);

   
    // Code omitted
}


Our solution to this was to recreate the Grid Panel before fetching the JSON data from the  Query_Handler ASHX page and then replacing the store in the Ext.Grid.Panel with the store recreated from the JSON Object returned by the ASHX page.

So basically when the user selected the fields for the Grid, the fields were saved in the Cache by the DisplayFields_ASHX page and in return a JSON Object with empty data rows was returned by this ASHX page. Our script used this JSON Object to run the code displayed above with empty data (instead of more than 5000 records). 

Then when the query was run, the store of the ExtJS Grid Panel was just replaced with the new store returned by the JSON object without recreating the grid. That resulted in a dramatic change and the script was much faster in IE. Instead of calling the original code, we called a new function demonstrated below, where the store in the Contract Grid was replaced with the data from the JSON object.
// Comment
function populateContractGridWithData(data) {
  // Code Omitted
    var newData = [];
    for (var i = 0; i < arrayRows.length; i++) {
        newData[i] = arrayRows[i].value;
    }
    var store4 = contractGrid.getStore();
    var memoryProxy = new Ext.ux.data.PagingMemoryProxy(newData);
    store4.proxy = memoryProxy;
    pagingTBar.bindStore(store4, true);

    store4.load(
    {
        params:
        {
            start: 0,
            limit: 100
        }
    });



This design provided better user experience and also minimizes the need on system resources.

In summary, for slow operation of any code, one of the best options to resolve these options is to go back to the drawing board and refactor the code to improve speed without changing the external result or behavior of the code.

For more information check our website

References:

Tuesday, November 13, 2012

Advanced Techniques with Database Migrations

While Entity Framework's database migrations will automatically pick up on structure changes, there are times where we want to do a little bit more. Consider the following model:


public class Attachment
{
    public int Id { get; set; }
    public string Name { get; set; }
    public DateTime CreatedOn { get; set; }
    public DateTime ModifiedOn { get; set; }
    public string Path { get; set; }
    public long Size { get; set; }
    public string MimeType { get; set; }
}


We'll assume that this model has already been added to the database via a previous migration. Let's say that we'd like to give users the ability to change the file in a given attachment. More than that, let's say that instead of just keeping track of the current file, we would like to have a history of all files that a user has uploaded for versioning. We'll modify our model:

public class Attachment
{
    public int Id { get; set; }
    public string Name { get; set; }
    public DateTime CreatedOn { get; set; }
    public DateTime ModifiedOn { get; set; }

    public virtual List<AttachmentFile> AttachmentFiles { get; set; }
}

public class AttachmentFile
{
    public int Id { get; set; }
    public DateTime CreatedOn { get; set; }
    public string Path { get; set; }
    public long Size { get; set; }
    public string MimeType { get; set; }

    public Attachment { get; set; }
    public int AttachmentId { get; set; }
}


Instead of the Attachment model containing information about the file, it has a one-to-many relationship with AttachmentFiles. We will assume that the AttachmentFile with the latest date will be used as the "primary" attachment.

Now we need to carry this change to our database. Using the package manager console, we run "add-migration AddAttachmentFiles", and we come up with this:

public partial class AddAttachmentFiles : DbMigration
{
    public override void Up()
    {
        CreateTable(
            "AttachmentFiles",
            c => new
                {
                    Id = c.Int(nullable: false, identity: true),
                    CreatedOn = c.DateTime(nullable: false),
                    Path = c.String(),
                    Size = c.Single(nullable: false),
                    MimeType = c.String()
                })
            .PrimaryKey(t => t.Id)
            .ForeignKey("Attachments", t => t.AttachmentId, cascadeDelete: true)
            .Index(t => t.AttachmentId);
        DropColumn("Attachments", "Path");
        DropColumn("Attachments", "Size");
        DropColumn("Attachments", "MimeType");
    }

    public override void Down()
    {
        AddColumn("Attachments", "MimeType", c => c.String());
        AddColumn("Attachments", "Size", c => c.Single(nullable: false));
        AddColumn("Attachments", "Path", c => c.String());
        DropIndex("AttachmentFiles", new[] { "AttachmentId" });
        DropForeignKey("AttachmentFiles", "AttachmentId", "Attachments");
        DropTable("AttachmentFiles");
    }
}


This looks acceptable. This migration will create the new table and remove the desired columns from the Attachments table. But what about our attachment data in the Attachments table? There is no way for Entity Framework to know that we want to do anything with the data in the columns we're deleting from the Attachments table. So, we do it manually. The DbMigration class has a Sql() method we can use to execute raw SQL against our database. If we modify our migration:

public partial class AddAttachmentFiles : DbMigration
{
    public override void Up()
    {
        CreateTable(
            "AttachmentFiles",
            c => new
                {
                    Id = c.Int(nullable: false, identity: true),
                    CreatedOn = c.DateTime(nullable: false),
                    Path = c.String(),
                    Size = c.Single(nullable: false),
                    MimeType = c.String()
                })
            .PrimaryKey(t => t.Id)
            .ForeignKey("Attachments", t => t.AttachmentId, cascadeDelete: true)
            .Index(t => t.AttachmentId);

        Sql("");

        DropColumn("Attachments", "Path");
        DropColumn("Attachments", "Size");
        DropColumn("Attachments", "MimeType");
    }

    public override void Down()
    {
        AddColumn("Attachments", "MimeType", c => c.String());
        AddColumn("Attachments", "Size", c => c.Single(nullable: false));
        AddColumn("Attachments", "Path", c => c.String());

        Sql("");

        DropIndex("AttachmentFiles", new[] { "AttachmentId" });
        DropForeignKey("AttachmentFiles", "AttachmentId", "Attachments");
        DropTable("AttachmentFiles");
    }
}


we can write SQL queries that will be executed in the flow of commands. The first query will move data from the to-be-deleted columns in the Attachments table to the AttachmentFiles table:

INSERT INTO AttachmentFiles (CreatedOn, Path, Size, MimeType, AttachmentId)
SELECT CreatedOn, Path, Size, MimeType, Id AS AttachmentId FROM Attachments


This query selects only the relevant fields from the Attachments table and inserts them into the AttachmentFiles. Since there will be exactly one set of file data per Attachment record, there will be exactly one AttachmentFile per Attachment. This means that the "primary" AttachmentFile for each Attachment will by default be the previous contents of the Attachments table simply because it will be the only record.

The second query will move data from the AttachmentFiles table back into the re-created columns in the Attachments table:

UPDATE Attachments
SET Attachments.Path = af1.Path, Attachments.Size = af1.Size, 
    Attachments.MimeType = af1.MimeType
FROM Attachments
INNER JOIN AttachmentFiles af1 on af1.Id =
    (SELECT TOP 1 Id FROM AttachmentFiles af2
    WHERE af2.AttachmentId = Attachments.Id 
        ORDER BY af2.CreatedOn DESC)
This query is much more complicated, because we have many AttachmentFiles per Attachment, and we need to select out only one per Attachment. We do this by using a subquery that selects out the most recent AttachmentFile for a given AttachmentId.

Our final migration looks like this:

public partial class AddAttachmentFiles : DbMigration
{
    public override void Up()
    {
        CreateTable(
            "AttachmentFiles",
            c => new
                {
                    Id = c.Int(nullable: false, identity: true),
                    CreatedOn = c.DateTime(nullable: false),
                    Path = c.String(),
                    Size = c.Single(nullable: false),
                    MimeType = c.String()
                })
            .PrimaryKey(t => t.Id)
            .ForeignKey("Attachments", t => t.AttachmentId, cascadeDelete: true)
            .Index(t => t.AttachmentId);

        Sql("INSERT INTO AttachmentFiles " +
            "(CreatedOn, Path, Size, MimeType, AttachmentId) " +
            "SELECT CreatedOn, Path, Size, MimeType, Id AS AttachmentId " +
            "FROM Attachments");

        DropColumn("Attachments", "Path");
        DropColumn("Attachments", "Size");
        DropColumn("Attachments", "MimeType");
    }

    public override void Down()
    {
        AddColumn("Attachments", "MimeType", c => c.String());
        AddColumn("Attachments", "Size", c => c.Single(nullable: false));
        AddColumn("Attachments", "Path", c => c.String());

        Sql("UPDATE Attachments " +
            "SET Attachments.Path = af1.Path, Attachments.Size = af1.Size, " +
                "Attachments.MimeType = af1.MimeType " +
            "FROM Attachments " +
            "INNER JOIN AttachmentFiles af1 on af1.Id = " +
                "(SELECT TOP 1 Id FROM AttachmentFiles af2 " +
                "WHERE af2.AttachmentId = Attachments.Id " +
                    "ORDER BY af2.CreatedOn DESC)");"

        DropIndex("AttachmentFiles", new[] { "AttachmentId" });
        DropForeignKey("AttachmentFiles", "AttachmentId", "Attachments");
        DropTable("AttachmentFiles");
    }
}


For more information, check out our website.

Tuesday, October 30, 2012

Functions as objects in Javascript

In Javascript, functions are objects.

That statement probably comes off a little underwhelming. Let's look at an example.

function addTheNumbers(num1, num2) {
    return num1 + num2;
}

function subtractTheNumbers(num1, num2) {
    return num1 - num2;
}

var func; 

func = addTheNumbers;
var result1 = func(1, 2); // 3

func = subtractTheNumbers;
var result2 = func(1, 2); // -1

We defined two different functions, one for adding and one for subtracting. Both take the same number of parameters. We then separately assign each of the functions to another variable, and then call that variable. You can point to any function just by using the name of that function as a variable.

For more information, check out our website.

Using a Windows Service as a Timer

BACKGROUND: Recently, I came across an issue with an MVC application I was developing. This application is composed of two sections: the Frontend and Backend. The Frontend contains all the visuals (what the user sees) and requests information from the Backend. The Backend fetches all the data from the database and sent it to the Frontend.

ISSUE: The communication between the Frontend and the Backend was being lost randomly. I was never able to witness it. We only knew it happened because the Frontend would display, but no data would be present.

RESOLUTION: I am going to create a windows service that is going to run on the machine hosting the Frontend project. This service will start a timer that will tick every x minutes (5 minutes for this application). On every tick, the Frontend will send a request to the Backend. If the request does NOT return "true" from the Backend, an error will be written to the log.

STEPS: *Using Visual Studio 2010 in .NET v.4

Step 1: Create a basic Windows Service Project and Setup Project
  • http://msdn.microsoft.com/en-us/library/aa984464(v=vs.71).aspx
  • You can ignore the OnContinue() action
  • Tip - For step 7 under the section 'To create the installers for your service', I chose to use Local System instead of Local Service. Local Service was NOT working for me. I would get a permissions error when I attempted to start the service and it would not start.
Step 2: Install the service, Start the service and Verify that it is running by checking the log in the Event Viewer

Step 3: Uninstall the service

Step 4: Add the Timer to the Windows Service
  • Add private System.Timers.Timer _timer = new System.Timers.Timer() to the top of the class
  • Call SetupTimer() from the OnStart function
private void SetupTimer(){
   int interval = 300000; //default to 5 minutes
   this._timer.Interval = interval;
   this._timer.Elapsed += new System.Timers.ElapsedEventHandler(TimerElapsed);
   this._timer.Start();
}
  • Create another function called TimerElapsed() in the same file
 
void TimerElapsed(object sender, System.Timers.ElapsedEventArgs e){
   eventLog1.WriteEntry("Communication check...");
   //Connect to a Backend function that returns true
   if (response)
     //Do nothing or write to log "success"
   else
     eventLog1.WriteEntry("Communication to Backend Failed",EventLogEntryType.Error);
     //EventLogEntryType.Error makes the entry get marked as an error in the Event Log
}

Step 5: Build the Windows Service Project

Step 6: Build the Setup Project
  • Be sure the build these projects in the proper order!
Step 7: Install the service, Start the service and Verify that it is running by checking the log in the Event Viewer


For more information, visit our site: www.rippe.com/index.htm