Hello AngularJS – Building a Tweet Reader

Single Page applications using client side JavaScript frameworks are getting popular and with the latest Web Update for Visual Studio 2012, quite a few SPA templates have been released by Microsoft and prominent Community members like John Papa. We have covered these templates in the past over here.

However these SPA templates are rather opinionated on the usage of the underlying frameworks and may not be the best starting point if we are trying to understand the framework under the hood. So today, we will look at AngularJS in a plain vanilla ASP.NET MVC app. We’ll start with an empty project and go ground up.

What is Angular JS?

Angular JS is (another) client side MVC framework in JavaScript. It was created by a group of developers at Google when they realized that their project (Feedback) had become too unwieldy and needed a cleanup. The three weeks effort at that cleanup lay seed to what we now know as AngularJS. Of course AngularJS was thrown open to community and since then had garnered a pretty vibrant community and a boat load of features.

Customizing Routes in ASP.NET MVC – Custom RouteBase implementations

MVC Routing is pretty flexible in itself and as we recently saw in Friendly URLs in ASP.NET Web Forms , we can mix and match old web forms style URLs with modern friendly URLs even keeping both side by side. However, there are often quirks of implementation that need us to dig a little deeper for a solution.

A quick search on the interwebs reveals the fact that people have very specific reasons from MultiTenancy to Custom paths not possible with the out of the box routing mechanisms.
Today we’ll pick an easy and superfluous one to demonstrate how to do a custom RouteBase implementation. We will see how we can re-direct non-standard URLs like html/asp and aspx files to a cleaner ‘Friendly Url’ format.

The Requirement

Handle extensions like html/pdf and redirect to Friendly URLs that ‘look like’ MVC generated URLs.

Async Await and ASP.NET MVC

.NET 4.5 introduced the Async and Await keywords to make Task based asynchronous programming more linear and easier to understand. Today we take a quick look at doing async actions in ASP.NET MVC and how these can potentially end up improving the server side performance of your MVC Application.

Benefits of Asynchronous Model

As we know, ASP.NET has a max number of threads that it can pick up from its thread pool. When all the threads are busy, a new request is queued and has to wait till a thread is available to service the request. Thus in ASP.NET, one surefire way to gain better scale is to ensure that your requests don’t wait on threads unnecessarily. If you are thinking sure enough I’ll fire off a background thread and be done with it, you are wrong, don’t do it. Background thread is still a ‘thread’ and you are not gaining anything; uncontrolled background thread creation will only exhaust your thread pool faster. Key to ASP.NET scaling is letting go of a thread as-soon-as-possible.

Creating Editable HTML Table for CRUD operations using Knockout Framework and WEB API

New generation of web applications developed using ASP.NET and ASP.NET MVC can provide excellent user experience with the help of client-side frameworks and libraries like jQuery, Knockout.js. Recently I came across a requirement where we had to implement inline editing and CRUD operations on Tabular data.

The requirement was to display all records in an HTML table, and allow users to add a new row as well as Edit and Delete records. In essence, functionality similar to like what we used to do earlier in ASP.NET GridView, but it had to be done in an ASP.NET MVC application preferably without un-necessary postbacks.

In this sample today, we’ll look at how we can implement this behavior in an MVC 4 application.

Friendly URLs in ASP.NET Web Forms

When ASP.NET MVC was introduced, it did away with the concept of tying the physical location of a Web Page page to the actual URL that’s seen in the browser, as was the norm earlier in ASP.NET WebForms based applications. As a result, in MVC, URLs like http://myapp.com/blog/my-new-blog-post were easier to setup instead of http://myapp.com/blog?postid. These were colloquially referred to as ‘Friendly Urls’ as in User Friendly as well as Search Engine Friendly.

This was thanks to the Routing feature implemented in ASP.NET. Note the Routing feature is built outside MVC, it’s a part of core ASP.NET and as a result easily available for WebForms as well.
Leveraging the routing framework, Microsoft recently released the FriendlyUrls package via Nuget that helps achieve FriendlyUrls in ASP.NET WebForms applications without too much of manual Route Table setup. If you have Visual Studio 2012 and upgraded to the latest Web Update 2012.2, then you are in luck and any new Web Forms project you create will pull in the required packages and you have FriendlyUrls enabled by default.

Thanks to Sumit Maitra for his help with this article

Building an Image Flip Viewer as an ASP.NET Web API Service using Knockout JS

Windows 8 introduced a nice component that flips through images using two buttons to the left and right of the control. You can see it the Windows 8 Store when looking at screenshots presented by an app as seen below.



I wanted to build one using JavaScript with one requirement that is it shouldn’t load all images at the same time because if you use big images, it kills the page load performance.

With this goal and an ASP.NET Web API backend in mind, I set about building my ‘FlipView’ component in JavaScript.

Bundling and Minification in ASP.NET MVC

Richness of Web Content has been growing at a phenomenal pace and thanks to Modern browsers supporting HTML5 and CSS3, with a little work, a Web Application can be made almost as rich as Native applications. Yes, they are still a little behind but Web today is unrecognizable from web 5 years ago.

This rich-ness of behavior on the web, is all thanks to the power of JavaScript frameworks, libraries and plugins, whereas the rich user experience comes from effective use of graphics and CSS3.

However all this has a cost. If we look at a plain vanilla ASP.NET Web Template in Visual Studio, it has a total of eight (8) JavaScript files and sixteen (16) css files. Now most of these are loaded in the _Layout page. Some are loaded as required in Forms Pages. But how does the loading of these many artifacts affect the performance of your web site? Let’s find out.

Uploading Multiple Files through an ASP.NET Web API Service

I had written a post on DotNetCurry on how to upload multiple-files to an Azure Blob through an ASP.NET MVC Web Application. Today we’ll see how we can do the same but store it in a file system instead and use a Web API controller instead, so that the upload service can be hosted anywhere we want. For brevity, we’ll build our Web API sample to use ASP.NET/IIS host.

The API Controller

Step 1: We start off with a Basic Web Application Template and add an empty API Controller to it.

Step 2: Next we add an Upload method to which the Files will be posted. The complete method is as follows: