AngularJS - Apply Style to currency and percentage texts before bind to UI

I have a scenario where i need to highlight currency amount values and percentage values within html text. I went over so many sites to achieve this and finally got achieved this using AngularJS with JavaScript.

What i expected is below:

What Steps i done to achive this below:

1: Create Javascript function to replace currency and percentage matched text to our required style. In this case i have used regular expression

var ReplaceCurrencyText = function (text) {

    var returnText = text.replace(/(\$?(?=\(.*\)|[^()]*$)\(?(\d{1,6}|\d{1,3},\d{3})(\.\d\d?)?\)?\%?)/g, "<span style=’color:green;’>$1</span>");

    return returnText;

};

Here $1 represents RegEx matched 1st group. Each brackets considered as one group, but in this case i used only one group (i.e., (\$?(?=\(.*\)|[^()]*$)\(?(\d{1,6}|\d{1,3},\d{3})(\.\d\d?)?\)?\%?) ).

2: Create angular directive which used to replace currency and percentage text as required

angularApp.directive('displayStyledCurrencyValue', ['$sce', function ($sce) {

    return {

        restrict: 'AE',

        replace: true,

        template:

                   '<div ng-bind-html="getStyledHtml(htmlText)"></div>',

        scope: {

            htmlText: '='

        },

        link: function (scope, element, attrs) {

            scope.getStyledHtml = function (html) {

                return $sce.trustAsHtml(ReplaceCurrencyText(html));

            };

        }

    };

}]);

Here i have used ng-bind-html to render text as html so that html element will not be shown as text and for this i used $sce.trustAsHtml method to return as html string. JavaScript function ReplaceCurrencyText called inside angular directive to get my required format of currency amount and percentage text.

3: Call this angular directive in html page wherever required and th

<display-styled-currency-value html-text="someValueToBind"></display-styled-currency-value>

MVC - 401 Unauthorization redirect page

Sometimes we need to redirect our pages to some specific path when 401 unauthorized error happen. But by default it will redirect to some predefined path (Ex: ../login.aspx?ReturnUrl=home/index) and it may go 404 error if not found in our project.

To customize this default redirect path, i went through many ways and finally found simple change is

<authentication mode="Forms">

      <forms timeout="60" loginUrl="~/" />

</authentication>

Note: In browser network tab we cannot see 401 (Unauthorized) error, it will show as 302 (Redirect found). To resolve this, we can customize application end request method in global.asax file like below, But it will not redirect to login page instead it will show error page.

void Application_EndRequest(object sender, EventArgs e)

{

    if (Context.Response.StatusCode == 302)

    {

        Context.Response.Clear();

        Context.Response.StatusCode = 401;

    }

}

AngularJS - Intercept all ajax calls globally

Add following code in app module config section to handle success or error globally.

In below example i have handled 401 unauthorized error globally.

App.config(['$httpProvider', function ($httpProvider) {

    $httpProvider.defaults.useXDomain = true;

    $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"; //Post

    delete $httpProvider.defaults.headers.common['X-Requested-With'];

    var interceptor = ['$rootScope', '$q', function (scope, $q) {

        function success(response) {

            return response;

        }

        function error(response) {

            var status = response.status;

            console.log("site error: " + status);

            if (status == 401) {

                window.location.href = currentDomain;

                return;

            }

            // otherwise

            return $q.reject(response);

        }

        return function (promise) {

            return promise.then(success, error);

        }

    }];

    $httpProvider.responseInterceptors.push(interceptor);

}]);

MVC - How to get current domain root path in javaScript variable

Problem statement:

Get current domain root path in javascript variable. In some cases, we want to redirect to domain root from client side. Below is the solution for that.

Solution:

Create property in MVC model class to return current domain (Getting this in client side may occurs some url mismatches)

public class LocalMVCModel

    {

        ...etc., your other properities

        public string CurrentDomain { get { return GetSiteRoot(); } }

        private string GetSiteRoot()

        {

            string port = System.Web.HttpContext.Current.Request.ServerVariables["SERVER_PORT"];

            if (port == null || port == "80" || port == "443")

                port = "";

            else

                port = ":" + port;

            string protocol = System.Web.HttpContext.Current.Request.ServerVariables["SERVER_PORT_SECURE"];

            if (protocol == null || protocol == "0")

                protocol = "http://";

            else

                protocol = "https://";

            string sOut = protocol + System.Web.HttpContext.Current.Request.ServerVariables["SERVER_NAME"] + port + System.Web.HttpContext.Current.Request.ApplicationPath;

            if (sOut.EndsWith("/"))

            {

                sOut = sOut.Substring(0, sOut.Length - 1);

            }

            return sOut;

        }

        ...etc., your other properities

}

Get this property in any cshtml page as below in layout.cshtml page or in any global page

@model your.namespace.LocalMVCModel

<script type="text/javascript">

   currentDomain = '@(Model.CurrentDomain)';

</script>

or simply

<script type="text/javascript">

   currentDomain = '@(Url.Content("~"))';

</script>

 Notes:
- Razor syntax @ cannot be accessed in *.js files, so add script in cshtml page itself preferrably in layout page or some global page.

- Single quote required for razor syntax to consider as string
- Variable currentDomain in javascript can be declared anywhere in JS files and accessed here.

CSS - To display any content inside div to center

.parentDiv {

            text-align: center;

        }

.childDiv {

            display: inline-block;

            text-align: center;

            cursor: pointer;

           

        }

<div class="parentDiv">

   <div class="childDiv">put content</div>

   <div class="childDiv">put content</div>

   <div class="childDiv">put content</div>

</div>

C# - Assign one class properties to another class properties using reflection

Following code helpful to assign properties of one class to another class object

 public static void MapProperties<T1, T2>(T1 destinationClass, T2 sourceClass)

        {

            if (destinationClass != null & sourceClass != null)

            {

                Type destinationType = destinationClass.GetType();

                Type sourceType = sourceClass.GetType();

                foreach (PropertyInfo sourceProperty in

                    sourceType.GetProperties())

                {

                    if (sourceProperty.CanRead)

                    {

                        string propertyName = sourceProperty.Name;

                        Type propertyType = sourceProperty.PropertyType;

                        PropertyInfo destinationProperty =

                            destinationType.GetProperty(propertyName);

                        if (destinationProperty != null)

                        {

                            Type toPropertyType = destinationProperty.PropertyType;

                           if (toPropertyType == propertyType && destinationProperty.CanWrite)

                            {

                             object sourceValue = sourceProperty.GetValue(sourceClass, null);

                            destinationProperty.SetValue(destinationClass, sourceValue, null);

                            }

                        }

                    }

                }

            }

        }

MVC Razor - DropdownListFor with index list binding

In MVC Razor, sometimes we feel selected value not reflect when we use indexed selected

Ex:    @Html.DropDownListFor(m => m.EmployeeDetails[0].StateId,

                        Model.StateList,

                        new { @class = "classname" })

in the above example state will not selected as it taken from employeeDetail list.

Change the code as below and it will work

  @Html.DropDownListFor(m => m.EmployeeDetails[0].StateId,

                        new SelectList(Model.StateList, "Value", "Text", Model. EmployeeDetails[0].StateId),

                        new { @class = "classname" })

MVC Razor - Enum Drop List

To Bind Enum value in Drop Down use the following

CSHTML

To display list of enum and select the value

@Html.EnumDropDownList(model => model.State, new { Id = "ddlState" })

To display list of enum item and keep binding when save/modify

@Html.EnumDropDownListFor(model => model.StateSelected, Model.State, new { Id = "ddlState" })

Note: model.StateSelected is int value.

Model

private int _StateSelected = 1;

public int StateSelected

{

  get { return _StateSelected; }

  set { _StateSelected = value; }

}

private State _State = 1;

public State State 

{

  get { return _State; }

  set { _State= value; }

}

Note: State is enum

public enum State

        {

            Tamilnadu =1,

            Karnadaka,

            ..

       

        }

Helper Class

  /// <summary>

        /// Enums the drop down list for.

        /// </summary>

        /// <typeparam name="TModel">The type of the model.</typeparam>

        /// <typeparam name="TEnum">The type of the enum.</typeparam>

        /// <param name="htmlHelper">The HTML helper.</param>

        /// <param name="expression">The expression.</param>

        /// <param name="htmlAttributes">The HTML attributes.</param>

        /// <returns></returns>

        public static MvcHtmlString EnumDropDownList<TModel, TEnum>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TEnum>> expression, object htmlAttributes = null)

        {

            ModelMetadata metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);

            Type enumType = GetNonNullableModelType(metadata);

            Type baseEnumType = Enum.GetUnderlyingType(enumType);

            IEnumerable<SelectListItem> items = from value in enumType.GetFields(BindingFlags.Static | BindingFlags.GetField | BindingFlags.Public)

                                                select new SelectListItem()

                                                {

                                                    Text = GetEnumDisplayValue(value),

                                                    Value = Convert.ChangeType(value.GetValue(null), baseEnumType).ToString(),

                                                    Selected = (value.GetValue(null).Equals(metadata.Model))

                                                };

            return SelectExtensions.DropDownList(htmlHelper, "EnumDropDown", items, htmlAttributes);

        }

        /// <summary>

        /// Enums the drop down list for.

        /// </summary>

        /// <typeparam name="TModel">The type of the model.</typeparam>

        /// <typeparam name="TEnum">The type of the enum.</typeparam>

        /// <typeparam name="TProperty">The type of the property.</typeparam>

        /// <param name="htmlHelper">The HTML helper.</param>

        /// <param name="expression">The expression.</param>

        /// <param name="enumType">Type of the enum.</param>

        /// <param name="htmlAttributes">The HTML attributes.</param>

        /// <returns></returns>

        public static MvcHtmlString EnumDropDownListFor<TModel, TEnum, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TEnum>> expression, TProperty enumType, object htmlAttributes = null)

        {

            ModelMetadata metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);

            Type baseEnumType = Enum.GetUnderlyingType(typeof(TProperty));

            IEnumerable<SelectListItem> items = from value in typeof(TProperty).GetFields(BindingFlags.Static | BindingFlags.GetField | BindingFlags.Public)

                                                select new SelectListItem()

                                                {

                                                    Text = GetEnumDisplayValue(value),

                                                    Value = Convert.ChangeType(value.GetValue(null), baseEnumType).ToString(),

                                                    Selected = (value.GetValue(null).Equals(metadata.Model))

                                                };

            return SelectExtensions.DropDownListFor(htmlHelper, expression, items, htmlAttributes);

        }

        /// Gets the enum display value.

        /// </summary>

        /// <param name="field">The field.</param>

        /// <returns></returns>

        private static string GetEnumDisplayValue(FieldInfo field)

        {

            string text;

            DescriptionAttribute[] attributes =

           (DescriptionAttribute[])field.GetCustomAttributes(

           typeof(DescriptionAttribute),

           false);

            if (attributes != null &&

                attributes.Length > 0)

            {

                text = attributes[0].Description;

            }

            else

            {

                text = field.Name;

            }

            return text;

        }

        /// <summary>

        /// Gets the type of the non nullable model.

        /// </summary>

        /// <param name="modelMetadata">The model metadata.</param>

        /// <returns></returns>

        private static Type GetNonNullableModelType(ModelMetadata modelMetadata)

        {

            Type realModelType = modelMetadata.ModelType;

            Type underlyingType = Nullable.GetUnderlyingType(realModelType);

            if (underlyingType != null)

            {

                realModelType = underlyingType;

            }

            return realModelType;

        }