Web API 2.0 – Attribute Routing

Web API routing has been pretty flexible using the convention based routing and custom Route Templates. We could specify custom routes, but things got verbose and disconnected for situations where we had to define routes for sub-resources, like for example if you had a list of Books and each book had more than one author, to fetch the authors for a book, you might want a route like http://myapp/api/books/{id}/authors

To do this, we had to define a route in the Route Table as follows

    name: “AuthorsForBook”,
    routeTemplate: “api/books/{id}/authors”,
    defaults: new { controller = “books”, action=“GetBookAuthors” }

Now this works but if we wanted another one, say for a list of Authors, select an author and then the books they have authored, the URL would be http://myapp/api/authors/{id}/books

AngularJS – Post data using the $resource Service in an ASP.NET MVC app

Last time we looked at how we could use the $resource service to make our code more compact when making HTTP calls. Today we will see how to post data to a server using the $resource service.

We’ll continue using the code from the previous article. So you can download the zip from here or fork it from Github.

Posting Data

In our previous article we re-organized our application to use the $resource service. However we were only using the query function. As we know the resource function can also do GET, POST, PUT etc. Following is the map of actions to the HTTP verbs

{ 'get':    {method:'GET'},
  'save':   {method:'POST'},
  'query':  {method:'GET', isArray:true},
  'remove': {method:'DELETE'},
  'delete': {method:'DELETE'} };

(Source: Angular JS Documentation)

Using AngularJS Modules and Services Feature in an ASP.NET MVC application

In our previous post, Hello AngularJS – Building a Tweet Reader we saw how to create a simple ASP.NET MVC application using AngularJS. We saw how the $scope and $http objects were injected in our app by Angular. We also saw how to do Templating and DataBinding. Today we will learn a few more constructs like the Modules and Services.

As with our demos we’ll walk with a code sample to see how the AngularJS features are used.

The Sample AngularJS Application - Recap

We’ll continue where we left off with the previous ASP.NET MVC sample where we built a Twitter reader.

The ASP.NET MVC Controller

To quickly recap, we have an ASP.NET MVC application with an MVC Controller. The controller has the Index action method. Here the LinqToTwitter framework first checks if user is Authenticated, if not, it redirects to Twitter and gets user to Authenticate.

Action Filters in ASP.NET MVC

Continuing with our MVC 101 series today we look at an important MVC feature, Filters. Filters in ASP.NET MVC are a way to apply cross-cutting logic at the controller level. Some examples of cross-cutting logic is Security and Logging.

Security is a cross cutting concern because, once enabled, we need to apply it for all incoming requests in the web Application. Imagine a world where you don’t have filters, in such case for every request that comes in, you Action method in controller will have to check if the user was Authorized to perform the action and view its result.

This not only violates single responsibility principle of the Action Method (it’s doing two things, evaluating security and computing the Action’s output) but is also an extremely verbose and repetitive work that we’ve to do irrespective of what the Action is supposed to do. Moreover, writing Authentication Code in action method cannot be guaranteed. There is no certainty that a developer may or may not miss out on implementing the code!

ASP.NET MVC - Using Resource Files to Manage String Constants

This article is from our ASP.NET MVC 101 Tutorial Series

Continuing with the MVC 101 series, today we explore how to save strings in Resource files instead of constants spread out all over the application or worse, hard coded in the source itself.
Mind you, we are not looking at cultures and Internationalization today.

It is very easy to start working on a project and continue adding string in a random, unstructured and adhoc mixture of inline strings and string constants. However, as soon as the marketing team starts to demo the product, you get one change request after the other to update the text/message and error notifications. This is when things go south and you wish you had a central place to store all your string constants.

Hello Resource Files!

Getting Started with NUnit in ASP.NET MVC

Visual Studio 2012 comes with a perfectly capable Unit Testing system in MS Test. However if your team’s skills require you to use alternate Testing frameworks like NUnit, Visual Studio is game to play along. In this article, we’ll see the how we can setup NUnit to work with Visual Studio’s Test Explorer and run Unit tests in our project.

Setting up NUnit

There are two parts to NUnit setup for use in Visual Studio. First part is to install the framework, we can do this in two ways.

1. Download the 2.6.2 (latest at the time of writing) msi installer from http://www.nunit.org. Ensure Visual Studio is not running while the installer is running. This installs NUnit globally along with the NUnit test runner. However the test runner needs .NET 3.5 to run.

2. Another way to include NUnit in your project is to download it using the following Nuget Package Manager command

PM> install-package NUnit

Second part is to setup the NUnit Test Adapter so that Visual Studio recognizes the Test Cases in our project and allows us to Run them from the Test Explorer.

Using Custom Directive in AngularJS to create reusable JavaScript components for your ASP.NET MVC app

In our previous three articles on Angular JS, we have seen how we could get started by building a small Twitter Client. We have explored the view model, Modules and Services in Angular JS and in our last article saw how to post data using the $resource Service.

Today we’ll see how to use a feature called Directives in Angular JS. Directives allow you to encapsulate custom behavior in an HTML element, attribute, classes and even comments. For example, the ng-app attribute that we use to define the scope of our Angular App is in fact a Directive, because there are no HTML5 attributes by that name! It’s Angular who interprets the attribute at runtime.

Apart from helping add custom attributes, directives can also be used to create the server side equivalent of ‘tag-libraries’ on the client. Those familiar with WebForms or JSP development will remember you could create server side components with custom Tags like <asp:GridView>…</asp:GridView> where the GridView rendering logic was encapsulated in a server component. Well, Directives allow you build such components, but on the client.

In fact today we’ll define a ‘Retweet’ button on our Tweet Reader that will enable us to encapsulate the function in a custom directive.

Angular JS: Routing to a SPA mode using ASP.NET MVC

In the beginning of the series I had mentioned that Single Page applications (SPA) were gaining popularity and that some of the ready SPA templates that come with ASP.NET MVC are rather opinionated, giving them a steep learning curve. We started with basics of Angular JS and slowly inched up learning bits of the framework. Till the third article we were mostly doing known things (data binding, templating, posting data) that other drop in libraries could do as well). The fourth article showed us how to do UI composition in form of directives and the seeds of a Single Page App were sown.

Today, we will look at routing (on the client side) and take the next step in realizing how a full blown Single Page Application framework functions.