How to fix New Promise not support in IE browser issue?

we can use New Promise function to write asyncronization call to improve the application performance.

here is sample call to use the New Promise feature from ES6/Javascript

loadLanguage: function () {
                   return new Promise(
                        function (resolve, reject) {
                            var PreferredLanguages = [{ Description: "English", Code: "en" },
                             { Description: "French", Code: "fr" }];
                            dataViewModel.preferredLanguages(PreferredLanguages);
                            if (PreferredLanguages) {
                               
                                resolve(PreferredLanguages);
                            }
                            else{
                                reject("no Language load");
                            }
                        }
                    );
            },


however this feature is currently not support by all browser which it does not work in IE11 and below.

fortunately we still can make it work around with $.Deferred from JQuery

the code below will demonstrate the same result as the previous code within  new Promise constructor.

 loadLanguage: function () {
                var deferred = $.Deferred();

                var PreferredLanguages = [{ Description: "English", Code: "en" },
                { Description: "French", Code: "fr" }];
                dataViewModel.preferredLanguages(PreferredLanguages);
                if (PreferredLanguages) {

                    deferred.resolve(PreferredLanguages);
                }
                else {
                    deferred.reject("no Language load");
                }
                return deferred.promise();
            },

how to prevent user to close your modal popup with ESC key?

it is very useful to have a modal to block the page content being accessed by user, when we allow user to modify the data in the Modal Popup. However, the user can close the modal by press the Escape key without clicking on the close button.

the fix is quite easy, we just have to add a new element attribute data-keyboard="false" to the DIV

here is sample code to prevent the user close the modal by pressing the escape

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false" style="overflow-y: auto;">

How to customize the Canada Post Autocomplete in its Option Setting?

if you initialize the Canada Post Autocomplete in the docment ready event or anything script loading event. we can handle it with the following code.


 var fields = [
             {
                 element: customerType + "street-address", field: "Line1"
             },
             {
                 element: "street-address2", field: "Line2", mode: pca.fieldMode.POPULATE
             },
             {
                 element: "city", field: "City", mode: pca.fieldMode.POPULATE
             },
             {
                 element: "province", field: "ProvinceCode", mode: pca.fieldMode.POPULATE
             },
             {
                 element: "postalCode", field: "PostalCode"
             },
             { element: "country", field: "CountryIso3", mode: pca.fieldMode.COUNTRY }
        ],
           options = {
               key: myKey,
               countries: {defaultCode: "CAN", value: "CAN", prepopulate: false, populate:false},
               bar: { visible: false, showCountry: false, showLogo: true, logoLink: false, logoClass: "aclogo"}
                  
            },

          control = new pca.Address(fields, options);

there is an Options paramenters on new Canada Post Address Autocomplete initialization, which will allow us to customize the look and features on the address autocomplete control. the picture shows all the settings that allow us modified in the control

here is the rule for setting up your own values

Key:Value

if there is a group in one attribute. then we have to the curly bracket to organize them together.

Key:{key1:value1, key2:value2......................}

How to implement localization on MVC web application with ActionFilterAttribute?

when we implement the asp.net web application. we can easily to localize the web UI with Resource files. we just need to override the InitializeCulture Method in the Page class to initialize the Culture and UICulture information for the page.

However the approach is quite different in the MVC app implement. we will create new ActionFilterAction attribute to render the content in the OnActionExecuting event.


 public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            your business logic on localization handling
        }

put the above inside your class that extend the ActionFilterAttribute.

public class LanguageAttribute : ActionFilterAttribute
    {
    
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            //put yPostsour logic here to handle the localization
        }
    }

how to create a custom binding handler for format phone number input with specific pattern in KnockoutJs web app?

If we want to format the phone number on user input, we can handle it with keypress event using Jquery.

here is sample code to force the user can input 10 number and automatically format them to be
XXX-XXX-XXXX

$("#phoneNumberInput").keypress(function (e) {
            if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                return false;
            }
            var currentChar = this.value.length;
            var currentValue = $(this).val();
            if (currentChar == 3) {
                $(this).val(currentValue + "-");
            } else if (currentChar == 7) {
                $(this).val(currentValue + "-");
            }
            $(this).attr('maxlength', '12');
        });

in KnockoutJs, we can implement a custom binding handler, then we can apply it to all phone number input fields,

with the keydown event to prevent any non numeric value.

update function in the handler will format the text change to the specific format after user enter 10 nueric values.

ko.bindingHandlers.formatPhoneNumber = {
    init: function (element, valueAccessor) {
        $(element).on("keydown", function (event) {
            if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                (event.keyCode == 65 && event.ctrlKey === true) ||
                (event.keyCode == 188 || event.keyCode == 190 || event.keyCode == 110) ||
                (event.keyCode >= 35 && event.keyCode <= 39)) {
                return;
            }
            else {
                if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                    event.preventDefault();
                }
            }
        });
    },
    update: function (element, valueAccessor) {
        $(element).val(ko.unwrap(valueAccessor()));
        formatPhone(element);
    }
};

 formatPhone = function (element) {   
        var phone= $(element).val().replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
        $(element).val(phone);  
    }

it is very easy to use in the html page. here we will use textInput Binding from KnockoutJs framework to trigger the formatPhoneNumber update method immediately after the user key in 10 numbmers.

 <input id="phone" class="form-control" type="text" placeholder="Home Phone" data-bind="textInput: homePhone, formatPhoneNumber:homePhone, validationElement:homePhone " maxlength="10" />

How to use ng-pattern to validate the phone format in AngularJS Web application.

we can directly apply the regular expression pattern to the ng-pattern directive to validate the phone number format. however this approach will limit to mandatory field only. you will see the annoying message if you use this implementation.

<input type="text" ng-model="phoneNumber" id="input" name="phoneNumber" 

 ng-pattern="/^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/" /><br>

we can use different approach to handle this validation, we will use ng-required to validate the required validation, then we will implment a function to take care of phone format validation.



<input type="text" name="phoneNumber" ng-model="phoneNumber" ng-required="requiredCondition" ng-pattern="phoneNumberPattern" />

in the controller javascript file we will implement a validatePhoneNumber function, which will only trigger when the phone field is not blank.

$scope.validatePhoneNumber = (function () {
        var regexp = /^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/;
        return {
            test: function (value) {
                if (value.length == 0) {
                    return true;
                }
                return regexp.test(value);
            }
        };
    })();

How to use Handy Tool Object Exporter to extract Data from C# object List?

it is quite handy, if we can extract data from our C# object list and send them to your teammate for debugging purpose.

Here is the tool that provide the great need

https://marketplace.visualstudio.com/items?itemName=OmarElabd.ObjectExporter

it is compatible for Visual Studio 2013,2015,2017

You just have to highlight the data list object that you plan to export the data.

First, you go to Tools--> Object Explorer




 Second Pick the object from the List




third pick either Json,XML data format to export the data.