Pages

Thursday, March 26, 2015

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.

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 () {

returnfalse;

},

select: function (event, ui) {

var terms = split(this.value);

terms.pop();

terms.push(ui.item.value);

terms.push("");

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

returnfalse;

}

});

}

});

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.

<inputtype="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.

Friday, March 20, 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.

Thursday, March 19, 2015

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.

Monday, March 16, 2015

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.

Thursday, March 5, 2015

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.

publicclass Fruit

{

public Fruit(int length)

{

this.items = newstring[length];

}

privatestring[] items;

publicstring[] 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.

staticvoid 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.

publicclass Fruit

{

privatestring[] items;

public Fruit(int length)

{

this.items = newstring[length];

}

publicstringthis[int index]

{

get { return items[index]; }

set { items[index] = value; }

}

publicint 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.