AngularJS : Autocompleting Multiple Values Into a Single Field

This is of course is not a invention, but thought of writing this post as it might help some one, some day.

The thing  I am trying to achieve is some thing like below (please ignore the styling!).

Autocompletion

Basically it’s just a textbox giving us suggestions from predefined list of items. The important thing hers is the textbox can have multiple entries and for each item it’s giving us suggestions. So let’s see  how we can build something like this using AngularJS and jQuery.

Here I will be using a Visual Studio solution, and if you want to learn how you can create an ASP.NET Project Powered by AngularJS using Visual Studio, please refer the below article.

   Creating an Empty ASP.NET Project Powered by AngularJS using Visual Studio

First I need to install jQuery-UI nuget package and include the references.

jQuery UI

<script src="../Scripts/jquery-1.6.4.js"></script>

<script src="../Scripts/jquery-ui-1.11.4.js"></script>

Once the reference to jQuery and jQuery UI libraries are added, let’s write some code in the AngularJS controller to define the list of suggestions and write a method to invoke jQuery autocomplete on a textbox.

app.controller('homeController', function ($scope) {

    $scope.availableTags = [

      "ActionScript",

      "AppleScript",

      "Asp",

      "BASIC",

      "C",

      "C++",

      "C#",

      "Clojure",

      "COBOL",

      "ColdFusion",

      "Erlang",

      "Fortran",

      "Groovy",

      "Haskell",

      "Java",

      "JavaScript",

      "Lisp",

      "Perl",

      "PHP",

      "Python",

      "Ruby",

      "Scala",

      "Scheme"

    ];

    function split(val) {

        return val.split(/,\s*/);

    }

    function extractLast(term) {

        return split(term).pop();

    }

    $scope.autoComplete = function () {

        $("#txtTags")

        .bind("keydown", function (event) {

            if (event.keyCode === $.ui.keyCode.TAB &&

              $(this).autocomplete("instance").menu.active) {

                event.preventDefault();

            }

        })

        .autocomplete({

            minLength: 0,

            source: function (request, response) {

                response($.ui.autocomplete.filter(

                $scope.availableTags, extractLast(request.term)));

            },

            focus: function () {

                return false;

            },

            select: function (event, ui) {

                var terms = split(this.value);

                terms.pop();

                terms.push(ui.item.value);

                terms.push("");

                this.value = terms.join(", ");

                return false;

            }

        });

    }

});

Basically you can find this code snippet in jQuery UI site and I just modified it for AngularJS. Now in the view/template, let’s just create an textbox and put it’s id as “txtTags” and kick off our “autoComplete” method in key up event.

<input type="text" id="txtTags" ng-keyup="autoComplete()" />

So that’s about it. If you want the full sample code, you can download it from my OneDrive.

Happy Coding.

Regards,
Jaliya

Visual C# Technical Guru - February 2015

All the votes are in for Microsoft TechNet Guru Awards - February 2015. And for Februarys’ competition, I didn’t participate as a Wiki article author. Instead I have got this privilege of becoming  a judge under Visual C# category.

The TechNet Guru Awards celebrate the technical articles on Microsoft TechNet.

Post in WikiNinjas Official Blog,

http://blogs.technet.com/b/wikininjas/archive/2015/03/19/technet-guru-february-2015.aspx

Visual C# Technical Guru - February 2015

Happy Coding.

Regards,

Jaliya

TNWikiSummit15 Day 2 Presentation: Working with WCF Data Services

Yesterday was a very special day to me, as I did my first ever live online session, and most importantly that’s in one of the biggest events in TechNet Wiki history, the TechNet Wiki Summit 2015.

I am sure, you must have participated at least to one session there. There was a great line up of interesting sessions which was delivered by amazing group of speakers, community leaders, and experts from different countries.

So here is a summary of my session “Working with WCF Data Services”.

Working with WCF Data Services

I have started off with the session showing the Wiki article which my session was based upon. Then I gave a quick snap of what I was planning to deliver in the session.

Agenda

Then I moved ahead following my agenda. Here I have spent some considerable amount of time explaining OData, as it’s the concept behind WCF Data Services. First, I briefly explained what OData is and explained the problem Microsoft tried to resolve by introducing OData. After that, I explained the solution which OData provides as a answer to that particular problem.

Now it was the first demo time. For that I opened up Internet Explorer and showed the OData web site. There I went through OData Ecosystem, showing some Producers and Consumers and then opened up the Nuget Live Service in browser to demo the capabilities of OData Services. There I have used LINQPad to show how this handy tool can be used to run queries against OData Services.

After showing some cool queries against Nuget Live Service (well for me how they got executed is kind of cool!), moved back to the slides. After the demo, hoped the audience must have got some idea of OData. Then I have explained how OData really works. There I have briefly explained the four main parts of OData which are the OData Data Model, OData Protocol, OData Client Libraries and the OData service.

After explaining each of these in detail, now it’s high time to discuss about WCF Data Services. I started explaining what WCF Data Services really is and how it gets connected to OData. Then I explained  WCF Data Services data access layer. There I have gone through Entity Framework Provider, Reflection Provider and the Custom Provider.

Once I completed that, then again it’s demo time.

First I moved ahead with creating a WCF Data Service with Entity Framework Provider. Here I have created a ADO.NET Entity Data Model from Northwind database, and exposed it’s tables through my WCF Data Service. Then I have created an console application showing the different ways to create a GET request to retrieve some data.

After that, I started off with creating a WCF Data Service with Reflection Provider. There I have used a simple POCO class and created a method to retrieve some sample data. Then I have exposed those data through my WCF Data Service.

So that was it. It was almost the time for me to end my session!.

Here is a list of important links.

Links

Introduction to WCF Data Services

http://social.technet.microsoft.com/wiki/contents/articles/19019.introduction-to-wcf-data-services.aspx

Demo Code
Download from MSDN Code Gallery

Slide Deck and Video : Available soon.

Finally there wasn’t many listeners as expected, but I am extremely privileged and honored to deliver a session in such an event.

Thank you Durva Ramos Junior, Ed Price, Microsoft and all the TechNet Wiki Ninja’s for all your support and if you want me to do a session in future, please do count me in.

Here is the link to the same article in TechNet Wiki Ninja's blog.
http://blogs.technet.com/b/wikininjas/archive/2015/03/19/tnwikisummit15-day-2-presentation-working-with-wcf-data-services.aspx

Happy Coding.

Regards,
Jaliya

Imagine Cup 2015 Sri Lanka

Had the pleasure of being a judge in first round of Imagine Cup 2015 Sri Lanka, under the “World Citizenship” category‏. Thank you Microsoft Sri Lanka for inviting me to be part of such an amazing experience.

There were around 51 teams from different universities in Sri Lanka as well as from leading schools. As this is the first round, most of the students were explaining their concepts. And amazingly some had demo applications developed as well.

I got really impressed with some concepts which the students presented, and of course, I got bored of some as well. I rather stop saying that, I hope the results of first round will be publicly available sometime during this week.

For those who will get to the next round, keep up the good work. For those who won’t, please don’t be discouraged. The more you fail, the more you succeed.

Happy Coding.

Regards,

Jaliya

C# : Indexes in Classes

Indexes are generally used to access a specific element or setting a value to a specific element in a collection or a array. But indexes can be used on classes/structs or interfaces to provide an array like access. Let’s consider the following Fruit class.

public class Fruit

{

    public Fruit(int length)

    {

        this.items = new string[length];

    }

    private string[] items;

    public string[] Items

    {

        get { return items; }

        set { items = value; }

    }

}

It’s pretty simple class, I have an array of type string and in the constructor I am initializing the array with a given length. So this is how I would access the Items array from outside.

static void Main(string[] args)

{

    Fruit fruits = new Fruit(10);

    fruits.Items[0] = "Apple";

    fruits.Items[1] = "Orange";

}

Now if we can omit the part where we are accessing Items array through fruits.Items and can access it like fruits[0], fruits[1] etc. isn’t that great. And that’s where the Indexes can be real handy. And here is how we can define an Index in the Fruit class.

public class Fruit

{

    private string[] items;

    public Fruit(int length)

    {

        this.items = new string[length];

    }

    public string this[int index]

    {

        get { return items[index]; }

        set { items[index] = value; }

    }

    public int Length

    {

        get

        {

            return items.Length;

        }

    }

}

Here I have a private string array and in the constructor I am initializing the array with a given length. I have another property which exposes the length of the array. And then I have the Index syntax.

Now let’s see how we can access items array through the Index defined for the class.

Fruit fruits = new Fruit(5);

fruits[0] = "Apple";

fruits[1] = "Orange";

for (int i = 0; i < fruits.Length; i++)

{

    Console.WriteLine(fruits[i]);

}

Result

Isn’t that great.

Happy Coding.

Regards,
Jaliya