Use TinyMCE in Asp.Net Single Page Application (SPA) using Knockout

CodeProject

In one of our project, we were creating web site using Asp.Net single page application with knockout.js. We had to add TinyMCE html editor in one of my page. It took some time to make it work.
Add binding handler for tinyMce using knock out. Please see code below

ko.bindingHandlers.tinymce = {
    init: function (element, valueAccessor, allBindingsAccessor, context) {
        var options = allBindingsAccessor().tinymceOptions || {};
        var modelValue = valueAccessor();
        var value = ko.utils.unwrapObservable(valueAccessor());
        var el = $(element)
        options.theme = "advanced";
      

        // Customize Tool Bars. Remove 3 lines below if you want standard tool bar
        options.theme_advanced_buttons1 = "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,separator,bullist,numlist,undo,redo,link,unlink";
        options.theme_advanced_buttons2 = "outdent,indent,separator,forecolor,backcolor,emoticons,separator,formatselect";
        options.theme_advanced_buttons3 = "";

        ////handle edits made in the editor. Updates after an undo point is reached.
        options.setup = function (ed) {
            ed.onChange.add(function (ed, l) {
                if (ko.isWriteableObservable(modelValue)) {
                    modelValue(l.content);
                }
            });
        };

        //handle destroying an editor 
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            setTimeout(function () { $(element).tinymce().remove() }, 0)
        });

        // $(element).tinymce(options);
        setTimeout(function () {
            $(element).tinymce(options);
            //$(element).tinymce({});

        }, 1000);

        el.html(value);

    },
    update: function (element, valueAccessor, allBindingsAccessor, context) {

        var el = $(element)
        var value = ko.utils.unwrapObservable(valueAccessor());
        var id = el.attr('id')

        //handle programmatic updates to the observable
        // also makes sure it doesn't update it if it's the same. 
        // otherwise, it will reload the instance, causing the cursor to jump.
        if (id !== undefined) {
            $(el).tinymce();
            var tinyM = tinyMCE.getInstanceById(id);
            if (tinyM !== undefined) {
                var content = tinyM.getContent({ format: 'raw' })
                if (content !== value) {
                    el.html(value);
                }
            }
        }
    }

};

Now you can bind any text area using data-bind of knockout and don’t forget to assign id to the element e.g. id=”txtPublished”.

<textarea data-bind="tinymce: publishNotes" id="txtPublished" style="height: 150px; width: 550px;"></textarea>

Tuple in C# 4.0

CodeProject

What is a Tuple?

In Mathematics, A Tuple is a sequence of finite length. An n-tuple is a tuple with n elements. For example (2, 4, 3, 8) is a 4-tuple.

C# 4.0 introduced new data type Tuple. Tuple is not new in software engineering, but of course it is new in dot net frame work 4.0. A tuple is a simple generic data structure that holds an ordered set of items of heterogeneous types. There are two ways to instantiate Tuple By calling either the Tuple constructor or the static Tuple.Create() method.

// Instantiate using constructor 
 Tuple<int, string, int> t1 = new Tuple<int, string, int>(3, "Frank", 9);

 // Instantiate using create method 
 Tuple<int, int, int> t2 = Tuple.Create(3, 5, 9);

Tuple constructor and create() method can contains maximum 8 parameters. You have to take care of the 8th parameter because it replaces another tuple object.

Simple use of Tuple

You can easily return more than one value from Method without using out or ref parameters.

 public Tuple<int, int> SplitPoints(string point)
 {
    string[] pointList = point.Split(',');

    int x = Convert.ToInt32(pointList[0]);
    int y = Convert.ToInt32(pointList[1]);
    return Tuple.Create<int, int>(x, y);
  }

SplitPoints method split the points and returns x and y points in tuple.

 Tuple<int,int> points = SplitPoints("12,14");           
 string msg = string.Format("X: {0}, Y: {1}", points.Item1, points.Item2);
 MessageBox.Show(msg); 

You can get returned values from exposed properties Item1, Item2 etc by Tuple object. Item properties of Tuple object are readonly. You can not change the value of the property.

Lambda Expression in C# 3.0

Lambda Expression is the one of the best feature of the C# 3.0. Lambda expression is same as anonymous method introduced in C# 2.0. Lambda Expression is a concise syntax to achieve the same goal as anonymous method. Now we can summarize Lambda expression in one line.

“Lambda expression is simply a Method.”

Syntax of Lambda Expression

Input Parameters => Expression/Statement Block;

Left hand side of expression contains the zero or more parameters followed by Lambda operator ‘=>’ which is read as “goes to” and right hand side contains the expression or Statement block.

A simple Lambda expression: x => x * 2

This Lambda expression is read as “x goes to x times 2”. Lambda Operator “=>” has sameprecedence as assignment “=” operator. This simple expression takes one parameter “x” and returns the value “x*2”.

Parameters Type

The parameters of the lambda expression can be explicitly or implicitly typed. For example

(int p) => p * 4; // Explicitly Typed Parameter
q => q * 4; // Implicitly Typed Parameter

Explicit typed parameter is same as parameters of method where you explicitly specified the type of parameter. In an implicit typed parameter, the type of parameter inferred from the context of lambda expression in which it occurs.

Type Inference is a new feature of c# 3.0. I will explain it in some other blog.

Use simple Lambda Expression

Here is simple example of Lambda Expression which returns a list of numbers greater than 8.

int[] numbers = {1,2,3,4,5,6,7,8,9,10 };  
var  returnedList = numbers.Where(n => (n > 8));

You can also use anonymous method for returning same list.

int[] numbers = {1,2,3,4,5,6,7,8,9,10 };
var returnedList = numbers.Where(delegate(int i) { return i > 8; });

Use Statement Block in Lambda Expression

Here is simple example to write statement block in the lambda expression. This expression returns list of numbers less than 4 and greater than 8.

int[] numbers = { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 };

var returnedList = numbers.Where(n =>
                          {
                            if (n < 4)
                                  return true;
                              else if (n > 8)
                                  return true;

                              return false;
                          }
                       );

Use Lambda with More then one Parameter

You can also write lambda which takes more than one parameters. Here is an exampleof lambda which adds two integer numbers.

delegate int AddInteger(int n1, int n2);

AddInteger addInt = (x, y) => x + y;
int result = addInt(10,4); // return 14

Use Lambda with Zero parameter

Here is an example of lambda which take no parameter and returns new Guid.

delegate Guid GetNextGuid();

GetNextGuid getNewGuid = () => (Guid.NewGuid());
Guid newguid = getNewGuid();

Use Lambda that return Nothing

You can also write lambda which returns void. Here is an example that lambda is only showing message and return nothing.

delegate void ShowMessageDelegate();

ShowMessageDelegate msgdelegate = () => MessageBox.Show("It returns nothing.");
msgdelegate();

Some Build in Delegates

Dot Net Framework 3.0 provides some build in parameterized delegate types that is “Func<t>(...)” and also provides some parameterized delegates that returns void that is “Action<T>(...)”.