AppFabric

Blog Post: Azure AD OAuth 2.0 Authorization Grant

Syndicated AppFabric Author — Fri, 17 May 2013 23:08:00 GMT

Yesterday I talked about a bug which prevented me to complete the authorization grant flow with Azure AD. It turn out the bug is only exposed when using Azure Management Portal for Relying party registration. In this post, I’ll use Graph Explorer to do the registration which works fine. My scenario is to create a […]
Blog Post by: zamd

Blog Post: Azure AD OAuth 2.0 Client_Credentials Flow

Syndicated AppFabric Author — Thu, 16 May 2013 22:24:00 GMT

I was playing with the Authorization code grant type recently added to Azure Active directory however there is bug in the preview implementation which prevents exchange an ‘authorization code’ with an access token. I can get the authorization code for graph api by using following url in the browser. https://login.windows.net/69383356-56dd-4e78-a18e-a4ff5450c995/oauth2/authorize?response_type=code&client_id=9f030b74-1ec1-4b6b-8911-f4e6e465ff9d&resource=https://graph.windows.net&api-version=1.0 AAD authenticates me and redirects […]
Blog Post by: zamd

Blog Post: Filtering the data in an #AngularJS ngRepeat element

Syndicated AppFabric Author — Mon, 13 May 2013 07:51:00 GMT

Index:

Getting started with AngularJS
Creating an AngularJS Controller
The AngularJS $scope is not the MVC Model
Using repeating elements in AngularJS
Filtering the data in an AngularJS ngRepeat element

Showing a list of items like in the previous post is nice but if the list is large most users appreciate the possibility to search in it. Turns out that AngularJS has that already build in so it is really simple to do.

We are using exactly the same controller as before, all it contains is a list of people.

   1: function DemoCtrl($scope) {

2:

   3:     $scope.people = [

   4:         { firstName: 'Maurice', lastName: 'de Beijer' },

   5:         { firstName: 'Jacob', lastName: 'Smith' },

   6:         { firstName: 'Sophia', lastName: 'Brown' },

   7:         { firstName: 'Mason', lastName: 'Lee' },

   8:         { firstName: 'Emma', lastName: 'Wilson' },

   9:         { firstName: 'Ethan', lastName: 'Martin' },

  10:         { firstName: 'Emily', lastName: 'Taylor' },

  11:         { firstName: 'Wiliam', lastName: 'Wong' },

  12:         { firstName: 'Emily', lastName: 'Campbell' },

  13:         { firstName: 'Liam', lastName: 'Williams' }

  14:     ];

  15: }

To let the use filter the list we are going to add the AngularJS filter directive.

The change to the markup is minimal. I did change the items to be an ordered list but that is not important. The important part is adding the “| filter:filterText” to the ng-repeat directive. This filters the data in the array to containing the text in the filterText property. And the filter text is the result of the input element I added and data bound using the ng-model directive.

   1: <!DOCTYPE html>

   2: <html lang="en">

   3: <head>

   4:     <title>AngularJS Demo</title>

   5:     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

   6: </head>

   7: <body ng-app ng-controller="DemoCtrl">

   8:     Search:

   9:     <input type="text" ng-model="filterText" autofocus />

10:

  11:     <ol>

  12:         <li ng-repeat="person in people | filter:filterText">

  13:             {{person.firstName}} {{person.lastName}}

  14:         </li>

  15:     </ol>

16:

  17:     <script src="Scripts/angular.js"></script>   1:  
   2:     <script src="App/Controllers/DemoCtrl.js">
</script>

  18: </body>

  19: </html>

Nice and simple, just the way I like it :-)

Blog Post by: Maurice

Blog Post: Unit testing a ASP.NET WebAPI controller

Syndicated AppFabric Author — Sun, 12 May 2013 19:04:00 GMT

One of he goals of the ASP.NET WebAPI is to make REST style API controllers more testable than more traditional WCF services where in the past. For the most part that is true but there are cases where an ApiController depends on the actual incoming request and its data and things can become a bit more difficult.

Testing a simple ApiController that gets data

Suppose we have the following ASP.NET WebAPI Controller with two Get methods, the first returns the complete list of books and the second returns the book with the requested ID.

   1: public class BooksController : ApiController

   2: {

   3:     private readonly IBooksRepository _repo;

4:

   5:     public BooksController()

   6:         : this(new BooksRepository())

   7:     {

8:

   9:     }

  10:     public BooksController(IBooksRepository repository)

  11:     {

  12:         _repo = repository;

  13:     }

14:

  15:     // GET api/books

  16:     public IEnumerable<Book> Get()

  17:     {

  18:         return _repo.GetBooks();

  19:     }

20:

  21:     // GET api/books/5

  22:     public HttpResponseMessage Get(int id)

  23:     {

  24:         var book = _repo.GetBook(id);

25:

  26:         if (book == null)

  27:         {

  28:             return Request.CreateResponse(HttpStatusCode.NotFound);

  29:         }

30:

  31:         return Request.CreateResponse(HttpStatusCode.OK, book);

  32:     }

33:

  34:     // Remainder ommitted

Testing the Get() method

The Get() method that returns all books is easy enough to test. There are no dependencies on WebAPI bits, all it does is return a enumeration of books.

   1: [TestMethod]

   2: public void WhenGettingItShouldReturnAllBooks()

   3: {

   4:     // Arrange

   5:     var controller = new BooksController();

6:

   7:     // Act

   8:     var books = controller.Get();

9:

  10:     // Assert

  11:     Assert.AreEqual(5, books.Count());

  12: }

No big deal there :-)

Testing the Get(id) method

When getting a specific book things are a bit more complex. The requested Id might not exist and in that case we should return a specific HTTP response status code of 404 NotFound. This results in that the ApiController method uses the Request property to create a new HttpResponseMessage with the specific HTTP status code. If we just call this method we will receive an ArgumentNullException in the CreateResponse() function.

System.ArgumentNullException: Value cannot be null.
Parameter name: request

Just setting the Request property to a new instance of HttpRequestMessage is a start but not quite enough. With just this change you will see an InvalidOperationException with the following message:

System.InvalidOperationException: The request does not have an associated configuration object or the provided configuration was null.

To fix this we need to add a HttpConfiguration object through the Properties dictionary as below:

   1: [TestMethod]

   2: public void WhenGettingWithAKnownIdItShouldReturnThatBook()

   3: {

   4:     // Arrange

   5:     var controller = new BooksController

   6:     {

   7:         Request = new HttpRequestMessage()

   8:         {

   9:             Properties = { { HttpPropertyKeys.HttpConfigurationKey, new HttpConfiguration() } }

  10:         }

  11:     };

12:

  13:     // Act

  14:     var response = controller.Get(1);

15:

  16:     // Assert

  17:     Assert.AreEqual(HttpStatusCode.OK, response.StatusCode);

  18:     var book = response.Content.ReadAsAsync<Book>().Result;

  19:     Assert.AreEqual(1, book.Id);

  20: }

Testing for getting with an invalid ID is equally simple:

   1: [TestMethod]

   2: public void WhenGettingWithAnUnknownIdItShouldReturnNotFound()

   3: {

   4:     // Arrange

   5:     var controller = new BooksController()

   6:     {

   7:         Request = new HttpRequestMessage()

   8:         {

   9:             Properties = { { HttpPropertyKeys.HttpConfigurationKey, new HttpConfiguration() } }

  10:         }

  11:     };

12:

  13:     // Act

  14:     var response = controller.Get(999);

15:

  16:     // Assert

  17:     Assert.AreEqual(HttpStatusCode.NotFound, response.StatusCode);

  18: }

Testing an HTTP PUT operation

Testing an update using an HTTP put is just as simple as a testing a get action. The implementation looks like this:

   1: // PUT api/books/5

   2: public HttpResponseMessage Put(int id, Book book)

   3: {

   4:     if (!ModelState.IsValid)

   5:     {

   6:         return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);

   7:     }

8:

   9:     var newBook = _repo.UpdateBook(book);

  10:     return Request.CreateResponse(HttpStatusCode.OK, newBook);

  11: }

And the related test goes as follows:

   1: [TestMethod]

   2: public void WhenPuttingABookItShouldBeUpdated()

   3: {

   4:     // Arrange

   5:     var controller = new BooksController()

   6:     {

   7:         Request = new HttpRequestMessage()

   8:         {

   9:             Properties = { { HttpPropertyKeys.HttpConfigurationKey, new HttpConfiguration() } }

  10:         }

  11:     };

12:

  13:     // Act

  14:     var book = new Book() {Id = 1, Title = "New Title", Author = "New Author"};

  15:     var response = controller.Put(book.Id, book);

16:

  17:     // Assert

  18:     Assert.AreEqual(HttpStatusCode.OK, response.StatusCode);

  19:     var newBook = response.Content.ReadAsAsync<Book>().Result;

  20:     Assert.AreEqual(1, newBook.Id);

  21:     Assert.AreEqual("New Title", newBook.Title);

  22:     Assert.AreEqual("New Author", newBook.Author);

  23: }

No big surprises there :-)

Adding new data using an HTTP POST action

Testing an HTTP POST used to add a new book is a little, but not much more, involved. The main reason for this is the HTTP convention to return a 201 Created status code and to include the HTTP Location header with an URI where the new resource can be found. The implementation is as follows:

   1: // POST api/books

   2: public HttpResponseMessage Post(Book book)

   3: {

   4:     if (!ModelState.IsValid)

   5:     {

   6:         return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);

   7:     }

8:

   9:     var newBook = _repo.AddBook(book);

10:

  11:     var response = Request.CreateResponse(HttpStatusCode.Created, newBook);

12:

  13:     var uriString = Url.Link("DefaultApi", new { id = newBook.Id }) ?? string.Empty;

  14:     response.Headers.Location = new Uri(uriString);

15:

  16:     return response;

  17: }

If we try to test this with a similar setup action as the previous tests we will see a KeyNotFoundException below:

System.Collections.Generic.KeyNotFoundException: The given key was not present in the dictionary.

Not a very helpful message, what key is not found? The stack trace gives a clue and it turns out we need to configure the HTTP routing on the HttpConfiguration object. Easy enough as just calling WebApiConfig.Register() with the configuration should do the trick.

However this just leads us to an UriFormatException as the Uri.Link() function returns null.

It turns out we also need to add the HttpRouteData to the Request Properties dictionary with the controller name. No big deal but not exactly obvious.

The correct unit test is as follows:

   1: [TestMethod]

   2: public void WhenPostingANewBookShouldBeAdded()

   3: {

   4:     // Arrange

   5:     var httpConfiguration = new HttpConfiguration();

   6:     WebApiConfig.Register(httpConfiguration);

   7:     var httpRouteData = new HttpRouteData(httpConfiguration.Routes["DefaultApi"],

   8:         new HttpRouteValueDictionary { { "controller", "Books" } });

   9:     var controller = new BooksController()

  10:     {

  11:         Request = new HttpRequestMessage(HttpMethod.Post, "http://domain.com/api/books/")

  12:         {

  13:             Properties =

  14:             {

  15:                 { HttpPropertyKeys.HttpConfigurationKey, httpConfiguration },

  16:                 { HttpPropertyKeys.HttpRouteDataKey, httpRouteData }

  17:             }

  18:         }

  19:     };

20:

  21:     // Act

  22:     var response = controller.Post(new Book()

  23:     {

  24:         Title = "A new book",

  25:         Author = "The author"

  26:     });

27:

  28:     // Assert

  29:     Assert.AreEqual(HttpStatusCode.Created, response.StatusCode);

  30:     var addedBook = response.Content.ReadAsAsync<Book>().Result;

31:

  32:     Assert.AreEqual(string.Format("http://domain.com/api/Books/{0}",

  33:         addedBook.Id), response.Headers.Location.ToString());

  34: }

The arrange section might be a bit more verbose but once you know what to add no big deal.

Enjoy :-)

Blog Post by: Maurice

Blog Post: Using repeating elements in #AngularJS

Syndicated AppFabric Author — Fri, 10 May 2013 19:30:00 GMT

Index:

In the previous posts I showed how to get started with AngularJS and use some of the basic AngularJS directives to data bind. In these examples I uses a really simple single element to bind to. However in lots of business cases you really need to display a list of repeating elements. Fortunately this is really easy to do.

The AngularJS ng-repeat directive

Whenever you need to repeat a specific block of HTML markup for each item in an array the ng-repeat directive is your friend. Take a look at the simple list of people below.

The data for this list is contained in an array that is added to the $scope object in the controller. The actual controller is real simple, see the code below.

   1: function DemoCtrl($scope) {

2:

   3:     $scope.people = [

   4:         { firstName: 'Maurice', lastName: 'de Beijer' },

   5:         { firstName: 'Jacob', lastName: 'Smith' },

   6:         { firstName: 'Sophia', lastName: 'Brown' },

   7:         { firstName: 'Mason', lastName: 'Lee' },

   8:         { firstName: 'Emma', lastName: 'Wilson' },

   9:         { firstName: 'Ethan', lastName: 'Martin' },

  10:         { firstName: 'Emily', lastName: 'Taylor' },

  11:         { firstName: 'Wiliam', lastName: 'Wong' },

  12:         { firstName: 'Emily', lastName: 'Campbell' },

  13:         { firstName: 'Liam', lastName: 'Williams' }

  14:     ];

  15: }

The markup to generate the list in the screenshot is also real simple:

   1: <!DOCTYPE html>

   2: <html lang="en">

   3: <head>

   4:     <title>AngularJS Demo</title>

   5:     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

   6: </head>

   7: <body ng-app ng-controller="DemoCtrl">

   8:     <div ng-repeat="person in people">

   9:         {{person.firstName}} {{person.lastName}}

  10:     </div>

11:

  12:     <script src="Scripts/angular.js"></script>   1:  
   2:     <script src="App/Controllers/DemoCtrl.js">
</script>

  13: </body>

  14: </html>

The DIV element containing the ng-repeat, and everything inside it, is simply repeated for every person in the array of people. Simple right :-)

Editing the people

Editing the people in the list is really easy, just add an input control and use the same ng-model directive as before.

   1: <!DOCTYPE html>

   2: <html lang="en">

   3: <head>

   4:     <title>AngularJS Demo</title>

   5:     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

   6: </head>

   7: <body ng-app ng-controller="DemoCtrl">

   8:     <div ng-repeat="person in people">

   9:         <input type="text" ng-model="person.firstName"/>

  10:         {{person.firstName}} {{person.lastName}}

  11:     </div>

12:

  13:     <script src="Scripts/angular.js"></script>   1:  
   2:     <script src="App/Controllers/DemoCtrl.js">
</script>

  14: </body>

  15: </html>

In the screenshot below I am changing Jacob to Bob and as I type in the input element the text behind it is updated immediately.

Enjoy :-)

Blog Post by: Maurice

Blog Post: CRM Online Entity Creation

Syndicated AppFabric Author — Tue, 30 Apr 2013 14:42:00 GMT

Recently I started exploring the world of Dynamics and specifically Dynamics CRM. Technically the platform looks fairly simple with a reasonably clean web services API (mostly SOAP) & SAML based message security (remember legacy WS-Trust ) using Live ID as the identity provider. The helper code from the sdk (\sdk\samplecode\cs\helpercode) hides all the complexity but [...]
Blog Post by: zamd

Blog Post: The #AngularJS $scope is not the MVC Model

Syndicated AppFabric Author — Mon, 15 Apr 2013 17:39:00 GMT

Index:

In the previous post I showed how to create and use an MVC Controller in AngularJS to manage the logic of an application. In this post I showed how to use the $scope variable that is passed into the Controller to share data between the Controller and the View. This may lead you to believe that the $scope is the MVC Model used but you would be completely wrong.

The $scope is not the MVC Model

There is a common believe that the $scope object in AngularJS is the MVC Model, or ViewModel, but that is wrong. In fact the $scope is just the glue object that should be used to share things between the controller and the view. Now that sounds awfully like a model but it isn’t. In fact you will see a lot of people do just that and as a result report bugs like this one. In fact this isn’t a bug and it works as designed. The correct way is to add the model as a property to the @scope instead so the controller and the view can share it.

So what is the problem with treating the $scope as the Model?

The biggest problem is in the way AngularJS works with it’s scopes. There usually isn’t just a single scope but a collection of nested scopes. And these nested scopes are linked together through the JavaScript prototype chain. This means that as long as you only read properties JavaScript will search up the chain of prototypes. However as soon as you write to what feels the same property you actually create a new one on the scope you are writing to. The net result is you now have two different but identically named properties on different linked scopes. And this means your application might just behave in an unexpected way as with the “bug” mentioned above.

The correct way of working with $scope objects

It turns out the correct way of working with scope is pretty easy.

Treat $scope as read-only in views

Treat $scope as write-only in controllers

Or an even simpler rule:

An ng-model directive should always contain a “.” so it updates a property on the model which is on the scope and not a property on the scope directly. If you don’t have a “.” in your ng-model you are doing it wrong!

But don’t just take my word for it. Take a good look at this video from Miško Hevery starting at about 0:29. BTW the rest of this video is highly recommended as well.

Fixing our calculator controller and view

With this knowledge is it easy to see that the controller and view from the previous post are actually wrong as the view is writing directly to the $scope x and y properties. In fact the only reason this appeared to work is that the example was so simple that no nested scopes where created. Still lets do the proper thing and fix the example.

The corrected view is now:

   1: <!DOCTYPE html>

   2: <html lang="en">

   3: <head>

   4:     <title>AngularJS Demo</title>

   5:     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

   6: </head>

   7:     <body ng-app ng-controller="DemoCtrl">

   8:         <input type="text" ng-model="model.x"/>

   9:         {{model.operator}}

  10:         <input type="text" ng-model="model.y"/>

11:

  12:         <button ng-click="add()">+</button>

  13:         <button ng-click="multiply()">*</button>

14:

  15:         = {{model.result}}

16:

  17:         <script src="Scripts/angular.js"></script>   1:  
   2:         <script src="App/Controllers/DemoCtrl.js">
</script>

  18:     </body>

  19: </html>

And the corrected controller now is as follows.

   1: function DemoCtrl($scope) {

   2:     $scope.model = {

   3:         x: 2,

   4:         y: 3,

   5:         result : "?",

   6:         operator : "?"

   7:         };

8:

   9:     $scope.multiply = function () {

  10:         $scope.model.operator = "*";

  11:         $scope.model.result = (+$scope.model.x) * (+$scope.model.y);

  12:     };

13:

  14:     $scope.add = function () {

  15:         $scope.model.operator = "+";

  16:         $scope.model.result = (+$scope.model.x) + (+$scope.model.y);

  17:     };

  18: }

Maybe not a big change but important to get right.

Enjoy!

Blog Post by: Maurice

Blog Post: Creating an AngularJS Controller

Syndicated AppFabric Author — Wed, 10 Apr 2013 13:05:00 GMT

In the previous blog post I showed how to get started with a really minimal AngularJS application. Even though the app could multiply two numbers it could hardly be called useful and as it turns out that is about as much as I could do with it.

Model View Controller

AngularJS is an MVC framework. So far we have only seen the View part as the HTML used was the view used to render the page to the user. As the name suggest there should be more in the form of a Controller and a Model.

The Controller part of an MVC application is normally the glue that ties a specific part of that application together. It gathers the data (Model) together and tells the View to render the data to the user. It also responds to events to do things.

Suppose we want to expand on the simple page from the previous post and turn this into a simple calculator, like in the screenshot below, the controller would be responsible for the calculations and the view would just be about displaying the data and not, like with the previous example, contain the actual calculation.

The AngularJS Controller

The controller that drives the logic of the application is a pretty simple JavaScript constructor function. As this is used with the new keyword to create an object I have capitalized the first letter as is the convention in JavaScript.

   1: function DemoCtrl($scope) {

   2:     $scope.x = 2;

   3:     $scope.y = 3;

   4:     $scope.result = "?";

   5:     $scope.operator = "?";

6:

   7:     $scope.multiply = function() {

   8:         $scope.operator = "*";

   9:         $scope.result = (+$scope.x) * (+$scope.y);

  10:     };

11:

  12:     $scope.add = function () {

  13:         $scope.operator = "+";

  14:         $scope.result = (+$scope.x) + (+$scope.y);

  15:     };

  16: }

The code basically consists of the X and Y value to be used in the calculation, two functions for adding and multiplying and a way to show the result and operator used. Adding two more functions for divide and subtract should be a simple enough exercise. The code is simple enough and pretty standard JavaScript. For those not used to JavaScript the (+$scope.x) expression is one of the ways you can convert a string to a number in JavaScript.

One special AngularJS thing is the $scope variable passed into the function and used.

What is the $scope?

The $scope variable is inserted automatically by AngularJS and serves as the bridge to share data between the controller and the view. Each variable added to the $scope is automatically be available for use in view data binding expressions. In fact there is always a scope, in the example from the previous the values where still stored in an AngularJS scope even though no controller was used.

The way AngularJS knows what to pass to the controller function is determined by the name. Just because we named it $scope AngularJS knows what to pass. This is done by a mechanism called dependency injection which is a very powerful mechanism used to separate different parts of the application and wire them up automatically at runtime while allowing us to pass in dummy services for testing purposes.

The AngularJS View

The view used is similar to the example from the previous blog post.

   1: <!DOCTYPE html>

   2: <html lang="en">

   3: <head>

   4:     <title>AngularJS Demo</title>

   5:     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

   6: </head>

   7:     <body ng-app ng-controller="DemoCtrl">

   8:         <input type="text" ng-model="x"/>

   9:         {{operator}}

  10:         <input type="text" ng-model="y"/>

11:

  12:         <button ng-click="add()">+</button>

  13:         <button ng-click="multiply()">*</button>

14:

  15:         = {{result}}

16:

  17:         <script src="Scripts/angular.js"></script>   1:  
       2:         <script src="App/Controllers/DemoCtrl.js">
  </script>

  18:     </body>

  19: </html>

New is the ng-controller attribute that tells AngularJS to create the controller and what part of the HTML view it controls. In the view we don’t have to use the $scope variable, every expression is always evaluated scoped to the current $scope.

Testing the controller

One of the reasons for using an MVC framework is the capability to test the code. As the controller has no requirements for testing it should be easy enough to test it. Below is a test for adding two numbers using QUnit.

   1: test("Test adding 3 + 7", function () {

   2:     // Arrange

   3:     var scope = {};

   4:     var ctrl = new DemoCtrl(scope);

   5:     scope.x = "3";

   6:     scope.y = "7";

7:

   8:     // Act

   9:     scope.add();

10:

  11:     // Assert

  12:     ok(scope.operator === "+", "The operator should be +");

  13:     ok(scope.result === 10, "3 + 7 should be 10");

  14: });

Enjoy!

Blog Post by: Maurice

Blog Post: Getting started with #AngularJS

Syndicated AppFabric Author — Fri, 05 Apr 2013 17:50:00 GMT

One of the nicer JavaScripts out there to work with must me AngularJS. Now there are quite a few other ones out there and I have used a number of them but AngularJS seems to be the most structured of them. And while it is really powerful it is also really easy to get started with.

AngularJS is a client side framework for creating rich web applications using JavaScript and HTML. It isn’t just a library like jQuery or Knockout.js where you create the structure and call into the library as you see fit. With a framework like AngularJS it is the other way round and it calls into your code. This means you have to like the way it is designed but fortunately AngularJS is pretty flexible so that is not a big penalty to pay. In fact it is more of a benefit as it helps structure your application in a good way.

The simplest AngularJS application

Below is pretty much the simplest AngularJS application you can make. Maybe not very functional yet but is shows a few of the very important parts.

So what does it get to display a “2” on the screen? Well first of all the “2” isn’t a literal but actually a result of adding 1 + 1 together on the client. So this is already a “somewhat” dynamic HTML/JavaScript application. The complete code listing is below.

   1: <!DOCTYPE html>

   2: <html lang="en">

   3: <head>

   4:     <title>AngularJS Demo</title>

   5:     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

   6: </head>

   7:     <body ng-app>

   8:         {{1 + 1}}

   9:         <script src="Scripts/angular.js"></script>

  10:     </body>

  11: </html>

There are a few interesting things to note about this.

First of all there is the required script reference to angular.js. Either download this from the AngularJS site or use the NuGet package to add it to your Visual Studio 2012 project. No big new thing here.

Unlike with libraries like jQuery which we load using a similar script tag and then call the jQuery $() function whenever we want to things work a little different with AngularJS. In the case of a framework like AngularJS we let it do it’s work. With AngularJS we need to either do an automatic bootstrap or do so manually. The automatic process is by far the easiest and all we need to add for that is the ng-app attribute to some HTML element. In this case I added it to the <body> element so the whole page is an AngularJS application. If you prefer you can add it to a sub section of the page.

The last interesting part if the {{1 + 1}} part inside the body. The {{}} part is a data binding expression AngularJS will evaluate for us and display the result. In this case we are just adding two numbers but as we will see later we can do far more with this.

Making things interactive

The previous example is nice but I could just as well have hardcoded the value “2” in there. So lets make things a bit more interactive and have the user enter two numbers we can multiply.

The complete code needed for this is not much harder see below.

   1: <!DOCTYPE html>

   2: <html lang="en">

   3: <head>

   4:     <title>AngularJS Demo</title>

   5:     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

   6: </head>

   7:     <body ng-app>

   8:         <input type="text" ng-model="x"/>

   9:         *

  10:         <input type="text" ng-model="y"/>

  11:         = {{x * y}}

  12:         <script src="Scripts/angular.js"></script>

  13:     </body>

  14: </html>

Thenew thing in this example is that we have two <input> controls with an ng-model attribute. These ng-model attributes are used for two way data binding input controls with data used by AngularJS. In the expression below {{x * y}} we multiply the two numbers added. And with this interactive calculator we still had to write no JavaScript, the closest we came to writing code is a single data binding expression in the HTML.

Sweet :-)

Blog Post by: Maurice

Blog Post: FIX: Missing itinerary designer after installing BizTalk 2013

Syndicated AppFabric Author — Thu, 04 Apr 2013 21:06:00 GMT

This happened to me. I’m not sure if it will prove to be a common problem, or just something specific to me, but I put this post together to save time for others that may run into it.

Scenario: I did a clean install of BizTalk Sever 2013. When I went into Visual Studio 2012, I did not have the option to add ESB Toolkit itinerary designers to a BizTalk project.

Explanation: During the BizTalk 2013 beta the itinerary designer was distributed as a VSIX package. However, in the RTM version it is no longer there. I went into the registry and saw there were entries for the designer, implying it was installed, yet it was not in Visual Studio.

Turns out that VSIX installation step is now integrated into the ESB Toolkit installation (yeah!), which is why there was no longer a separate VSIX package.

Fix: go to a Visual Studio command prompt, and run “devenv.exe /setup”. This “Forces Visual Studio to merge the resource metadata that describes menus, toolbars, and command groups, from all available VSPackages. ” (see http://msdn.microsoft.com/en-us/library/ex6a2fad)

Blog Post by: Brian Loesgen

Blog Post: DotNed podcast: Neno Loje on Visual Studio ALM and Team Foundation Service 2012 new features

Syndicated AppFabric Author — Thu, 04 Apr 2013 17:31:00 GMT

In this podcast Hassan Fadili speaks with Neno Loje (VS ALM MVP) about some of the new features in Visual Studio ALM & Visual Studio Team Foundation Service 2012. Of course, Neno also talks about some of the success stories and other areas that might be interesting to anyone who has a passion for application life cycle management.

Links:

Neno TFS blog: www.tfsblog.com
The WHY book on TFS: Visual Studio Team Foundation Server 2012: Adopting Agile Software Practices: From Backlog to Continuous Feedback
The HOW book on TFS: Professional Team Foundation Server 2012
Scrum & TFS: Professional Scrum Developer (PSD) Program by Microsoft and scrum.org
Ready to use VM with VS + TFS 2012: http://aka.ms/VS11ALMVM
Submit and vote for ideas for Visual Studio: http://visualstudio.uservoice.com
A lot of good documentation on MSDN: Application Lifecycle Management with Visual Studio and Team Foundation Server

Blog Post by: Maurice

Blog Post: WCF Data Services and Web API with OData; choices, choices.

Syndicated AppFabric Author — Wed, 03 Apr 2013 03:13:00 GMT

Back in 2010, I wrote a course for Pluralsight on OData which covers the protocol in general and introduces the viewer to the client and server programming model. This year, Microsoft released updates to the ASP.NET Web API which includes support for OData in the controllers. Since this latest release, I’ve received several questions about the differences between these two toolsets for building services that support OData and some guidance on which to use. This is my attempt to answer those queries.

OData

OData is a protocol developed by Microsoft and others for data access using web protocols such as HTTP, ATOMPub and JSON. One of the benefits of OData is a consistent query experience, defined in the protocol, that enables rich querying using URI query string parameters. This consistent query syntax, much like ANSI SQL, provides a platform neutral API for working with data.

This means I might be able to write a query like this:

http://pluralsight.com/odata/Categories?$filter=Name eq 'OData'

There are a variety of query string options you can use to filter and identify the resource(s) you want to read or update. I can use this same pattern to apply filters to other OData services using their entity properties.

WCF Data Services

WCF Data Services is Microsoft’s library for building OData Services or writing OData clients. On the server side, the framework provides a very quick, simple model for exposing all or part of an Entity Framework model as an OData compatible service with little or no code. This service, scaffolded in minutes supports, if configured to allow it, read, insert, update and delete.

If you don’t have an Entity Framework model, you can expose a simple .NET object with IQueryable properties for read only access, or implement the IUpdateable interface and support update, insert and delete on any collection.

This framework provides the quickest way to get a service up and running when the data model is the primary focus of your application. You do have the ability to extend the service with functions that are exposed over the HTTP API as well. For example, at Pluralsight we could have a method to return the top 10 courses. This might be a convenience to save the client from having to compute this themselves, or it might be because the data needed to make that distinction isn’t exposed in the data available in the service therefore the client couldn’t compute or filter to get those same results.

On the client side, the WCF Data Services library provides a .NET interface over the OData protocol and exposes the query semantics as a LINQ provider. This enables .NET developers to access the data in an OData service as they would any other data source.

Microsoft has been moving some OData features into the OData Library to enable reuse in many different scenarios. This means you don’t have to accept the default WCF Data Services model, especially if you don’t have an EDM for your data source.

You can, obviously, use the client and service independently. That is, even if you develop your service using another framework, perhaps not even Microsoft, you can use the client library to access it.

ASP.NET Web API

The ASP.NET web API was introduced last year as a framework for building HTTP services; that is services that expose their functionality over HTTP (these may or may not be REST services). You build these services using controllers, much like ASP.NET MVC development for web applications. The services are most often focused on exposing certain resources and enabling various actions on those resources.

One of the features of ASP.NET Web API is content negotiation. This enables a client to request a resource, a Course for example, and indicate (using the HTTP accept header) they would like the response in JSON, XML, or any other format. If the server can support the response type, it does so, serializing the data appropriately.

It is only natural that customers would want OData JSON or ATOMPub as a format for exposing their resources, and would request support for the query syntax. The beauty of OData is that you don’t have to write umpteen methods for querying (GetCustomer, GetCustomersByCity, GetCustomersByRegion, etc.). So, using pieces of OData Lib, the Web API team enabled support of OData query syntax on an API controller method and enabling update semantics as well.

Making the decision

Having said all that, I would summarize as follows: WCF Data Services focuses on the data model and limits code, while Web API focuses on the controller/code and enables the formatting and query syntax of OData.

So, if you are looking to expose a data model (EDM or otherwise) quickly and don’t need a lot of code or business logic, WCF Data Services makes that REALLY easy and would be a good starting point.

If, however, you are building an API and simply want to expose some resources using either OData query syntax or formatting, then ASP.NET Web API is probably the best place to start.

I hope this is helpful and have fun writing your services no matter what toolset you choose.

Blog Post: How I saved the day with Windows Azure Websites

Syndicated AppFabric Author — Wed, 03 Apr 2013 03:01:00 GMT

My wife does a lot of work volunteering at our school. No, check that, she does a metric ton of work. The school was planning a silent auction to raise money for various programs. As part of this, the group decided to hold an online auction allowing people to bid on various activities offered by the teachers. The only technology available to the group was a CMS for creating web pages and HTML forms that would send email messages. My wife was planning to respond to email and update the web pages manually a few times each day.

Well, as a developer, that just didn’t sound right to me.

We worked together to quickly create a simple web application using ASP.NET Web API, jQuery, Knockout.js, SignalR, and Toastr to show the auction items and enable bidding. SignalR allowed all clients to get real time updates on the page. I was impressed with how quickly the site was functional and with great features thanks to these libraries.

The final problem was how to host this awesome website in a short amount of time? We didn’t need a huge amount of scale, or so I thought, but we needed to be able to handle whatever load we might get. Oh, and did I mention the whole point was to raise money? Even if we had a source of funds, we didn’t have time to get approval.

Since I had recently done a course for Pluralsight on Azure WebSites, I knew the perfect solution.

I was able to provision and deploy the site in minutes using the free offering to test and was ready to scale to the shared or reserved instance easily in the portal should the need arise.

The dashboard on the Azure management portal gave me quick insight into how close I was to any limits, how much traffic the site was receiving, and even when there were a few HTTP errors. Having the management portal on top of the deployment, plus the knowledge that the Windows Azure infrastructure was behind the site made everything run smooth, and put my mind at ease.

The best part? On the last day of the auction we got to watch a bidding war in the last five minutes. Hundreds of dollars of bids were processed in those last few minutes which made a big difference in the total amount of money raised for the school. That never would have happened with HTML forms and email.

Blog Post: BizTalk 2013 is now RTM

Syndicated AppFabric Author — Mon, 25 Mar 2013 15:32:00 GMT

BizTalk Server 2013 (the 8th release!) has released to manufacturing, and is available NOW for download at MSDN for MSDN subscribers.

You can read the team blog post at http://blogs.msdn.com/b/biztalk_server_team_blog/archive/2013/03/21/biztalk-server-2013-is-now-rtm.aspx

A list of enhancements can be found at http://blogs.msdn.com/b/biztalk_server_team_blog/archive/2012/11/06/announcing-biztalk-server-2013-beta.aspx

Enjoy!

Blog Post by: Brian Loesgen

Blog Post: DotNed podcast: Mads Kristensen on ASP.NET developer tooling in Visual Studio 2012 and beyond

Syndicated AppFabric Author — Fri, 15 Mar 2013 11:48:00 GMT

For a change an English language podcast :-)

In this podcast Maurice de Beijer speaks with Mads Kristensen about web tooling in Visual Studio 2012. Besides the standard build in tooling for web developer they also talk about Web Essentials 2012, the plugin Mads develops in his spare time to give web developers even more features and capabilities.

Links:

Blog: http://madskristensen.net/
Web Essentials 2012: http://vswebessentials.com/
Web Developer Checklist: http://webdevchecklist.com/asp.net/

Enjoy!

Blog Post by: Maurice

Blog Post: SignalR and camelCase data contracts

Syndicated AppFabric Author — Thu, 14 Mar 2013 20:09:00 GMT

I really like SignalR for its capability to do push notifications from the server to the client. But there are a few thing in SignalR I am not quite happy with. Fortunately SignalR is really pluggable and you can change it to suit your needs. :-)

PascalCase versus camelCase

One thing I am not really happy about is the fact that all data is send over the wire with a request as is. And with SignalR the server tends to be C# where the convention is to have methods and properties in PascalCase. The client side however is JavaScript where the usual convention is to have methods and properties in camelCase.

With functions defined on a SignalR Hub this is no problem. SignalR does the right thing and converts them from the server side PascalCase to the client side camelCase so everyone is happy.

However with the data passed as arguments this is not the case and they are passed as is. It turns out SignalR is using JSON.NET which is a really powerful JSON serializer that can do just that. All you need to do is start using the CamelCasePropertyNamesContractResolver and Bob is your uncle. Or is he?

Unfortunately things aren’t that simple. It turns out just using CamelCasePropertyNamesContractResolver will break the internal SignalR data contracts and that is not a good thing. But with a bit of help we can still get this to work.

The SignalRContractResolver that makes things work

The solution is the SignalRContractResolver found here.

public class SignalRContractResolver : IContractResolver

    private readonly Assembly _assembly;

    private readonly IContractResolver _camelCaseContractResolver;

    private readonly IContractResolver _defaultContractSerializer;

    public SignalRContractResolver()

        _defaultContractSerializer = new DefaultContractResolver();

        _camelCaseContractResolver = new CamelCasePropertyNamesContractResolver();

        _assembly = typeof(Connection).Assembly;

    public JsonContract ResolveContract(Type type)

        if (type.Assembly.Equals(_assembly))

            return _defaultContractSerializer.ResolveContract(type);

        return _camelCaseContractResolver.ResolveContract(type);

With this contract resolver the SignalR types are send as is and all your custom types are send using the camelCase properties the JavaScript client code is used to. Sweet right :-)

With the SignalRContractResolver in place all we need to do is register it with SignalR. Below is the code I use to do that.

public static void RegisterHubs()

    var serializerSettings = new JsonSerializerSettings

        ContractResolver = new SignalRContractResolver()

};

    var jsonNetSerializer = new JsonNetSerializer(serializerSettings);

    GlobalHost.DependencyResolver.Register(typeof (IJsonSerializer), () => jsonNetSerializer);

    RouteTable.Routes.MapHubs();

Enjoy!

Blog Post by: Maurice

Blog Post: WF Security Pack Update

Syndicated AppFabric Author — Wed, 13 Mar 2013 01:01:00 GMT

Quite a few folks have asked me about updating WF Security Pack to .NET 4.5 as WIF is now integrated into .NET 4.5. Today I manage to spare sometime to upgrade the WFSP to .NET 4.5/WIF 4.5. I have also pushed the updated source code to github which you can pull down from https://github.com/zamd/wfsp/ Please [...]
Blog Post by: zamd

Blog Post: Excellent rest met de WebAPI #TechDaysNL

Syndicated AppFabric Author — Mon, 11 Mar 2013 11:41:00 GMT

De PowerPoint slides

Excellent rest met de web api from Maurice Beijer

En hier staat de bron code.

Enjoy!

Blog Post by: Maurice

Blog Post: Creating Anonymous Apex REST APIs with Force.com

Syndicated AppFabric Author — Sun, 10 Mar 2013 21:23:00 GMT

The Force.com REST API lets you integration with Force.com applications using standard HTTP methods. This API provides a way to expose the data you have within your Force.com application to external applications – both mobile and non-mobile. A few useful bits of information related to these REST APIs: Use standard HTTP verbs: GET, POST, PUT,… Continue reading →
Blog Post by: Wade

Blog Post: A Few Tips on Getting Started with Salesforce.com

Syndicated AppFabric Author — Sat, 09 Mar 2013 00:59:00 GMT

Today I got the opportunity to attend a Salesforce.com “hack day” in San Francisco. Quite fun, and I learned a lot from Adam Seligman, Dave Carroll, Pat Patterson, and Akhilesh Gupta. This is a great team: extremely personable, clearly excited about their platform and the technology, and willing to pull up their sleeves and write… Continue reading →
Blog Post by: Wade