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.

how to control the page access in the controller level in MVC web application?

we can control the page access in various area in the MVC web applicaton.

first we can control in the razor page file.

@if (!this.User.HasPermission(ADGroup))
{
    Response.Redirect("~/ErrorMessage.aspx?ErrorCode=AccessDenied");
}

second we can control access in the Action method.
 public async Task<ActionResult> MyPage()
        {
         if (!IsAllowAccess)
       {
           return Redirect("~/ErrorMessage.aspx?ErrorCode=AccessDenied");
       }
    }

third we can set the access permission in the Class level by implmented an ActionFilterAttribute.


 public class MyPageAccessActionFilterAttribute : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            if (!IsAllowAccessPage)
            {
                filterContext.Result = new RedirectResult("~/ErrorMessage.aspx?ErrorCode=AccessDenied");
            }
            base.OnActionExecuting(filterContext);
        }
    }


Then in Page Controller, I can just set the  MyPageAccessActionFilter Attribute in controller class
   [MyPageAccessActionFilter]
    public class MyController : Controller
    {

}

the third approach will reduce lots of code and affect on the maintenance. since we can easily modify one file to apply permission on the action methods within the controller.

How to download a document Web Application accessed from UAG

we can easy to use javascript Window.Open to download a document in IE or popup it up in Chrome and Firefox.

However, the user access the web application from UAG, then error indicates that the document is not found with the url absolute path. since the UAG had block the actual host server of the web application and shown the user with the UAG host server.


it is quick simply to work around it. we should return the relative path to front end for the Window.Open method.

Before:

Window.Open("Http://myserver/myapp/filefolder/myDoc")


After

Window.Open("myapp/filefolder/myDoc")



In the Server, we can use the following snippet code to demonstrate this approach.


   if (baseUrl.Contains("localhost"))
{
    response.fileName = baseUrl + "/Downloads/" + response.fileName ;
}
else
{
    string currentAppFolder = System.AppDomain.CurrentDomain.BaseDirectory;
    if (!string.IsNullOrEmpty(currentAppFolder))
    {
        string parentFolder = string.Empty;
        currentAppFolder = currentAppFolder.Trim('\\');
        int index = currentAppFolder.LastIndexOf("\\");
        if (index > -1) {
            parentFolder = currentAppFolder.Substring(index);
        }
        response.nvisFileName = parentFolder + "/Downloads/" + response.fileName ;
    }
}