Instance Of An Object

Go from Multi-Page to a Single-Page Web App

Thu, 22 Oct 2015 00:00:00 +0000

The problem

You have your nice classic multi-page web application and you want to move to the new Single-Page (SPA) paradigm.

I’ll leave the why so and why not to “SPA” to another post. I’m assuming you’ve made up your mind and that you already chose your technology, lets say AngularJS 1.x or AngularJS 2.x, but you’re still asking yourself:

What skills do I need to have in the team?
What should I be aware?
From where should I start?
What would be the best approach?
How do I estimate the necessary time?

I’ve been there several times so I’ve decided to share my experience and hopefully save someone else’s time and patience.

Train your team

If I would have to choose the most important thing for the success of this migration process I would say: Train your team!!.
Really, I can’t stress this enough.

If your team is not completely aligned regarding knowledge and processes, this will fail, badly.
The core knowledge needed is not only on AngularJS (or any other framework), you need to have a deep and solid understanding of Javascript itself.

Here’s my preferred list of resources I usually propose to my teams and trainees:

Books

Video content
Search by Angular and Javascript on these sites and you’ll find a lot of awesome material.
I won’t point to any specific training because they keep putting more up to date content so it’s better if you just search!

Define a strategy

In everything we do we should define a strategy, even if it’s a shallow one, something is always better than nothing.

In this specific case, is very important that you don’t start changing code all over the place otherwise you’ll end up with an uncontrolled amount of regressions and frustration will kill you.

Do things incrementally and you’ll even be able to keep adding features to your app along side with this migration process.
This is a very important selling point when you need to do this migration as part of a technical task and the business sees no real added value upfront.
It’s very important that you don’t stall the new features implementation flow and keep giving them the added value the product owner requested plus the performance boost and user-friendly features a SPA allows.

Of course, there’s a bit of a compromise here, and you won’t be able to fit as many features in your sprint but don’t stop it completely.

Here’s the approach I like to follow:

Phase 1: Split the controllers

One good way is to keep the single-page paradigm aside at first and migrate the views, one by one to Angular.
Doing it like this, the pages will keep being delivered by as usual from server-side but all the dynamic elements will be rendered with Angular. The site will keep on working and some views will be Angular others are legacy code and changing views will still trigger a full page refresh.

MVC in the back-end?

During this process, you’ll be “forced” to clean-up your server-side controllers and make new ones that return JSON instead of HTML. These will be the AJAX endpoints of you angular service that will handle all the $http requests. You’ll end up with one controller method to deliver the HTML view and a bunch of other methods that implement the necessary CRUD. I advise to prefix all the CRUD routes with /api/…, this will help you isolate the routes that return JSON from the ones that return HTML.
No pressure, take your time. Meanwhile, new screens and improvements that you have in the pipeline should be done directly in Angular.

No MVC in the back-end?

If you’re not using MVC on the back-end, the process should be more or less the same as described above anyway with the exception that you might want to use another technology to handle your AJAX requests.

Here are some options depending on your server-side technology:

.Net Framework: Web API
JAVA: RESTEasy
PHP: Slim
…

The list goes on, and each platform has multiple options; choose your own!

Phase 2: Start managing state with Angular

This will take you some time to figure out and debug.
Basically, you’ll need to move all the user state to Angular, more specifically into a separate angular service/factory that will be used by all Angular controllers.
It’s this mechanism that will allow you later to hit F5 in the browser and still get the needed logged in user information and permissions.
You achieve this by adding a controller on the server that you can do an AJAX call and retrieve this information.

Phase 3: Add ng-route

Once all the views are converted and are able to manage their state, it’s time to add ng-route to the mix.
It’s not mandatory, but this should ideally be a one shot mission for all views. If all the above is completed, it won’t take you that long.
What you need to do here is to drop all the controller methods that render HTML leaving only one that delivers the main page.
Move all your views routing logic to Angular leaving only the API routes on the back-end (if you prefix them like I said above, they will be easy to identify.

In all this, I never mentioned the login page and it was on purpose.
You can leave this one to the end because doing a full page refresh every time you login/logout will be useful to clean up some nasty global and badly written javascript you might have.
Moving the login page into the single-page paradigm means that you don’t do a form post to login, you do it by ajax request and you need to populate your previously prepared state service (Phase 2).
You also have to clean this info once you logout or you get a 401 from the server and redirect to the login view.

The pitfalls list

During the process described above, you’ll face a lot of challenges.
Each time I had to do this exercise I kept aside a list of the problems I encountered and how I solved them.
Bellow you’ll find this list. I’ll try to keep it up-to-date and you are also welcome to message me if you have other experiences you want to share.

PF1: Converting the page javascript file into a controller

Of course, you’re already using javascript in your site, so what should you do with it?

If you already use RequireJS or any other AMD mechanism then it’s easy because you already have your dependencies and encapsulation figured out.
Each RequireJS module represents either a Controller or a Factory or Service in the Angular world so all you need is to slightly change the way you declare it.

On the other hand, if you didn’t pay the appropriate attention to the way you handle your Javascript then this will be a harder task.

The time you’ll spend migrating each page into an AngularJS view will greatly depend on how well structured your current Javascript is.

PF2: Splitting code into factories

All reusable code should, or better, must be moved into a Factory or Directive.
Good examples of this are state or data related methods or code for popups that are used in multiple views.

PF3: Think when it’s a good idea to split functionalities into several modules

Modules in AngularJS are a great way to encapsulate logic or even to abstract enterprise level logic that can later on be reused in other applications.
This way you can easily decouple dependencies and reuse the code later on.
Thinking this ahead is a good idea, it won’t slow you down and will save you big refactorings later.

PF4: Be aware of library version conflicts

I recall this problem related to jQueryUI based FileUpload widget. We were using this JQueryUI widget that needed a jQueryUI version higher than the rest of our controls.
I agree this is a bad thing to have as it is, but this was a legacy site and the client had implemented this upload functionality on a separate page and didn’t want to update the other pages.
All of the sudden, we were overriding one version of JQueryUI with another and breaking the whole site.

Another similar problem I also had with another site was with JQuery itself. Different versions of JQuery were being loaded by different components.

In the Multi-Page world, this is a bad practice but hardly a breaking problem, but as we moved to single-page we had a conflict because the main page itself never changes.

Be aware of this and enforce one single version for your components across the whole application.

PF5: jQuery events bound to the document

This is a JQuery best-practice that will make you lose some time.
The problem is that, in a multi-page web application, each time you change page, you start on a clean plate.
In a single-page scenario, the document is always the same, events bound to it will remain there even when the view changes.

If we come to a view the event binds are set, lets say for a click of a button, moving to another page and coming back will make the events to be bound again resulting in multiple event handlers for the same event.

Example:

$(document).on('click', '#btnNext', function(){ ... });

Solution:
Use ng-click and handle your code in the controller. This is the correct way to do it and should always be the preferred solution.

Now there might be cases where you want to just postpone conversion to ng-click so here are some temporary solutions:

Temporary Solution 1
If the event handler can actually be bound directly to the element… do it.

Temporary Solution 2
If we need to make a delegate event handler, wrap each view with a div.
Move the event handlers from the document to this wrapper div.

Temporary Solution 3
Some times the same view/controller can be used in more than one parent view.
A good example of this is popups and the correct solution is to wrap them in Directives but, if for some edge reason at the moment you can’t…

In this case we can’t use the main view wrapper div because it’s not always the same, so for these edge cases we remove the handler before adding it again:

var gotoNextPage = function(){ /* do your stuff */ };
$(document).off('click', '#btnNext', gotoNextPage);
$(document).on('click', '#btnNext', gotoNextPage);

Avoid this and any of the above temporary solutions if you can.

PF6: jQuery based controls/widgets will be a pain in the… neck

Most of them will fail to work properly, especially due to event-related problems. Reserve some substantial amount of time for this if you use a lot of these things. Honor mentions to DatePicker, Dialog, jqGrid…

A lot of alternatives already exist for most of them and you’ll see that wrapping them yourself with a Directive is also usually not a bad alternative.

So before starting the migration process, identify all your controls that might need to be worked out.
If you work on them before starting a page migration, you’ll feel much more confident estimating the effort.

This will require a lot of refactoring, rewriting and rethinking.

Here’s a small list of pain-points:

Hiding the menus and everything else while you’re in the login page
Correctly redirecting/refreshing the view when you login/logout
Handling the session information when you login/logout and press F5
- Rethink everything related to the session data that was being handled server-side like user information, authorization, contextual data, etc…
Security, Some views will need to be requested from the server without security validation
- The main change in the paradigm will be that you really need to stop concerning about hiding pages from the user. Your main concern is to secure data, not the HTML and data is still coming and going to the server, secure it there!
Make sure that all the state is rebuilt client-side if the user presses F5.
- This often requires a separate AJAX call to get the user extra information based on the cookie that you already have.
Move code into a security factory
- Make sure all this code is “grouped” in a single reusable factory that is shared across all views.

PF8: Slowly start to get rid of all jQuery selectors

This is kind of the end of the line for me. When you have the view fully working but jQuery is still being used inside your Angular Controllers.
Take the extra time to get rid of them. You should not have any jQuery selector inside a Controller. Either replace them with native Directives and Services or create your own.

Things like $.ajax({}) or $('#mybutton').on('click', function(){}); must be banned from your code and replaced by $http and ngClick respectively.

Final notes

I’m not addressing any migration considerations here specific to Angular 2.0 but, apart from syntax changes, the overall considerations remain the same.

This article was based on my personal experience and I’m sure many other challenges are missing here. If you happen to have something to add, please drop me a line and I’ll be happy to enrich this knowledge base.

I’m a regular contributor on Experts-Exchange and recently I’ve also answered a question regarding this topic.

Verify country Google block

Mon, 12 Oct 2015 00:00:00 +0000

The problem

Countries like China block web traffic from certain domains.

So what?

So what if our website depends on some Google API and we don’t want it to break if it’s not available?

There are two main approaches to try to by-pass this:

Resolving the Country by the request IP
Same as above but directly querying an IP database

These are valid options as long as the IP gets well resolved, but nothing actually keeps you from:

blocking users that might not be affected by the content blockage
taking a bad decision if the IP country is unknown

Also these API’s have some usage thresholds and PRO subscriptions can become expensive.

Test the functionality instead of the country!

Don’t bother trying to identify the country your using is accessing from, try to verify if Google is available instead by grabbing a resource that is hosted under a Google domain or sub-domain!

For instance, Google Drive lets us store images and make them publically available.
If we try to access this image from our website and the load fails, then we are sure that the content is blocked!

Configuring Google Drive

You can point to an image shared in Google Drive, but there’s a small “trick” that you need to be aware of.

By default, a shared image URL looks like the following (fake link):
https://drive.google.com/file/d/xxxxxxxxxxxxxxxxxxxxxxxxxxxx/view?pli=1

The problem is that this kind of link will open your file in Google Drive viewer which is useless for us.
To get a pointer to the image directly we need to use a slightly different URL structure: https://drive.google.com/uc?id=xxxxxxxxxxxxxxxxxxxxxxxxxxxx

The id argument must be exactly the same as the represented by xxxxxxxxxxxxxxxxxxxxxxxxxxxx in the previous link

Javascript

Bellow is the code you must use in your pages:

(function(){

    var body = document.getElementsByTagName('body')[0],
       	img = document.createElement('img'),
       	timestamp = new Date()*1;
    
    // a timestamp is added to avoid browser cache
    img.src = 
        'https://drive.google.com/uc?id=xxxxxxxxxxxxxxxxxxxxxxxxxxxx&_=' 
        + timestamp;
    
    img.onload = function(){
        // put your success code here
        alert('all good!'); 
    };
    
    img.onerror = function(){ 
        // put your error code here
        alert('something went wrong!'); 
    };
    
    body.appendChild(img);
    
})();

Additional resources

Resolve IP to Country APIs and DBs

Verify China domain blockage

ViewDNS

Welcome to Jekyll!

Sun, 05 Jul 2015 14:41:08 +0000

Some time back, I decided to take my blog out of Blogger.
I’m not happy with it (I never was actually), so my first idea was to build my own blogging engine as a process for learning a new language.
And so I did… Too many times :)
I built it with NodeJS, AngularJS, React… played with several NoSql DB’s, whatever…
The outcome was always a workable playground but I never had the time to make them good enough for production.

Meanwhile I also tried existing blogging platforms and now I finally decided to use Jekyll and host it on GitHub.
I’ll be using this page to document my experience and maybe help someone else.

Why Jekyll?

My first option was Ghost.
For whoever doesn’t know about it, Ghost is a publishing platform based on node.js and (Express)[http://expressjs.com/]. The community is very active and the product features are pretty impressive.
The problem is that I don’t intend to collaborate or do anything else other than put some words out there. Most of all, I didn’t want to have a database to store static content.

I want to write, publish and go on with my life.

That’s when I found Jekyll.
To put it correctly, I found it through Github when I was reading about what it supports as publising platforms for project and user pages.

Jekyll itself is not a blogging platform, is “simply” an HTML generator.
What you get as a publisher is a set of static HTML files that you can just deploy wherever you want.
In my case I’m using Github pages and it works just fine.
If Github turns out not to be the best hosting option, moving everything somewhere else requires no additional effort.

Plugins

Plugins under GitHub Pages

Due to security restrictions, GitHub only supports a (very) limited number of Jekyll plugins.
Everything else zou might have in zour _plugins folder will be ignored.

This means that everything works fine on your dev machine but once you deploy do GitHub Pages you’ll loose functionality.
To solve this I decided to take advantage of git branches and the .nojekyll file.

What I ended up doing was:

create a ‘dev’ branch where I have the full Jekyll project
empty the ‘master’ branch and copy the contents of the dev branch _site folder
add the .nojekyll file in the root of the ‘master’ branch to tell GitHub that this is not a Jekyll site and that’s it.

To automate things I’ve created a deploy.sh bash file in the ‘dev’ branch.

This is a user site. In case you have a repository site, do the same but for the gh-pages branch.

Taking the most out of Tags

I like to tag my posts but Jekyll doesn’t support that out of the box.

I found a nice solution for tags on this post.

Knowing that Jekyll performs no operation at runtime other that displaying static HTML, tags are no exception. This means that if you want to filter by a certain tag, the filtered HTML page have to be rendered at build time, not when the user requests it.

This is a big paradigm change for most developers but the end, as there are no db queries to be done, the result is a super fast user experience.

Here’s the link to my repository

Redirecting old Blogger URL’s

One thing I absolutely had to support is the redirection from the old Blogger URL structure.
As Jekyll has a different document structure and I also wanted to do some cleanup my previous articles now live in a different URL to which I need to point if someone still points to the old ones.

To accomplish this I decided to use the 404.html page and add some javascript in there.
Here’s a small code snippet but you can refer to the whole file here.

(function(){
	var url = window.location,
        path = url.pathname;

	// handle old blogger urls
	switch(path){
		case '/2013/02/fix-ssrs-report-showing-blank-pages.html':
			window.location.href = '/blog/2013/02/19/fix-ssrs-report-showing-blank-pages-when-exporting-to-pdf.html';
			break;
		case '/2012/08/windows-7-2008-r2-as-internet-hot-spot.html':
			window.location.href = '/blog/2012/08/05/windows-as-internet-hotspot.html';
			break;
        
        /* ... and so on ... */
        
	}
})();

Using Jekyll on Cloud9

C9 is a great way to edit your GitHub pages Jekyll site.
Basically you just login with your github account, clone to repository and start editing.

Here I’ll log the issues and solutions I’ll be facing.

Start serving Jekyll from C9

To start serving Jekyll locally we usually use: jekyll serve
Under C9 we have to be a bit more specific and specify the host and port:

bash jekyll serve --host $IP --port $PORT --baseurl ''

If it complains that the port 8080 is already in use, chances are that Apache server took it for himself.
Execute this to make sure:

bash lsof -i:8080

If it’s in fact Apache, execute the following to stop the process:

bash sudo /etc/init.d/apache2 stop

After this, try starting jekyll again, it will work.

IFrame Orchestrator

Sun, 24 May 2015 00:00:00 +0000

Github Repository

Description

Orchestrates messages between an IFrame and its parent page, as well as between IFrames on the same page. The Iframes can even reside on different domains!

Hop on to the Github page to get everything you need to get started.

Why?

I realize this looks a bit outdated functionally; after all, who uses IFrames anyway right!?

Well if you’re asking yourself that question, clearly you’re not a SharePoint developer (neither am I). In SharePoint 2013, Provider Hosted Apps are rendered inside of IFrames that are rendered inside your site.

If you’re planning to do, lets say, a single-page-app (SPA) to be delivered in this model, you’ll need to interact with the “world” outside your IFrame.

What does this do?

This tool will allow you to establish a communication pipeline between each IFrame and its parent, easing a lot of pain.

To take this a bit further, you’ll also be able to pass messages and trigger events between IFrames.

Where can this be used?

The motivation behind this tool was for complex SharePoint Provider Hosted App, but there’s no dependency whatsoever with SharePoint.

CSS Sprite Generator

Wed, 18 Dec 2013 12:24:00 +0000

Github Repository

New v2.0

I decided to increment the major version of this tool as it implements new core features and actually brakes background compatibility with the previous command line commands.

So... what's new?

3 Bin Packing algorithms to choose from that optimize the sprite image size
New and refactored command line commands to let you automate the generation process
Support for inner folders
Allow setting the output file names

Introduction

Image Sprites are a very good way to feed your application some images. Basically, it consists of combining a set of images in a larger one and then just caching it. When you need one of the small images, all you have to know are the coordinates of it on the large one. With this technique, you just need to load one image for the entire application and reuse it, instead of loading each image at a time.

Here, I'll be covering the implementation with CSS used on WebSites, but you can use this technique wherever you want.

Why This?

Sure you can Google it and find a lot of matches telling you how to use sprites and CSS but where's the "no pain" way of building them and their CSS? All of them will tell you to use Photoshop of any other photo editing tool but this will always take a lot of time. That's when this cute little application comes in. It will generate the sprite image and its CSS in no time, and you can add images later and regenerate it without having to worry about breaking your code!

Using the Code

On the package, you'll find a compiled version and its source code.

Just drop the SpriteCreator.exe file on the folder that has the images to be included on the sprite and run it. DONE!

Assumptions, Limitations and Functionality

All image files on the folder will be added to the sprite no matter the size.
All the images on the folder will be included on the sprite.
Only jpg, jpeg, png & bmp extensions are supported.
The name of the images is used on the CSS class name.
The spaces on images file name will be replaced with -
The result 3 files, one *.png (the sprite), *.css and *.html (the demo usage page) where * is the name you specified or a random GUID.
CSS file includes a class that applies the background image to the element
Images are ordered using 3 different algorithms (more about them bellow).

Bin Packing Algorithms

To optimize the distribution of the images on the sprite I used the code from here: Nuclex Game

The Bin packing algorithms are very well documented on their page.

All Bin Packing Algorithm credits must be given to these guys that saved me a lot of time by perfectly implementing these three good bin packing algorithms in C#. On my side I only removed the XNA dependencies and replaced them with pure System.Drawing objects.

Options

This is a console application so you can pass some customization arguments.

/h, /?, /help :: Help
/s :: Specify the images source directory path
/d :: Destination dir path
/D :: Same as /d but creates the directory if it doesn't exist
/f :: Destination file name
/F :: Same as /f but overrides the files if they already exist
/cp :: CSS class name prefix
/pl :: Specify the Bin Packaging Level (1, 2 (default) or 3)

Ex: SpriteCreator.exe /s Images /F SiteImages /cp "app-ui-"

History

v1.0 - The very beginning
v1.1 - Support for images of different sizes and small improvements.
v2.0 - Arguments refactoring and Bin Packing Algorithm usage.

Fix SSRS PDF Blank Pages

Tue, 19 Feb 2013 17:29:00 +0000

The problem

You’re designing a report on SSRS. Everything looks good until you export it to PDF and you realize that every other page appears blank.

If this is your problem, read on!

The solution

The solution is plain simple and rational but if you’re already dealing with a complex report maybe you already switched off your rational part of the brain.

The idea basically is:

[Body width] <= [Report Width]-[Report Left Margin]-[Report Right Margin]

So do the following:

Go to Report properties
Take note of the Width and the left and right margin values
Go to the design view and select Body
Take note of the Body width
Do your math with the above formula, adjust as needed and it should be fine!

Cheers!

Windows 7/8/2008r2 As Internet Hot Spot!

Sun, 05 Aug 2012 00:20:00 +0000

Have you ever needed to share your internet connection wirelessly and found that the Windows ways are a bit hard?

This is vacations time and if you buy a USB pen you probably could use the hability to share your internet with everybody in the house instead of having to share the USB Pen itself!

Usually you think about a hardware router that supports USB pens but that’s usually too expensive, or at least more expensive than FREE! :)

The solution is to use Virtual Router.

As you can see the configuration is straight forward:

Set the name of the Network (this is what will be visible to other computers)
Set the password used to connect to this network
Select the connection you want to share
Finally click Start Virtual Router

So after this, no more sharing your USB pen… Share the connection!!! :) Have fun!

Include Javascript And CSS On Your MasterPage

Thu, 14 Jun 2012 23:24:00 +0000

This is a quick one.

On the web I see a lot of tricks on how to do this but in fact it’s quite easy.

The Problem

When you reference a script or a css file on your masterpage it takes the relative path of that file according to the MasterPage location. The problem is that the MasterPage isn’t the one that it’s going to be shown, it will be the actual ASPX page the inherits from it.
This said, if your ASPX files are in other location than the MasterPage then the references script files path won’t be resolved.

There’s also the problem when your site can either run on a virtual folder or as a site on IIS.

The Solution

There are a lot of ways to handle this, but most rely on specific ASPX locations.
I like to have my ASPXs well organized on a convenient way, sometimes in the same folder but most of the times on separated folders.
I don’t want to be forced to put all pages on the same folder just because of this.

So the idea is to put all the script and CSS references on the MasterPage <head>, make use of the server-side tilde (~) and write the correct paths on Page_Init.

If you need to reference jquery and jqueryUI your MasterPage <head> should look similar as the following:

<head runat="server">
    <title></title>

 <link href="<%# ResolveUrl("~/") %>css/custom-theme/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />

 <script src="<%# ResolveUrl("~/") %>Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
 <script src="<%# ResolveUrl("~/") %>Scripts/jquery-ui-1.8.20.min.js" type="text/javascript"></script>

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

Now, on the MasterPage CodeBehind you should include the following code:

protected override void OnLoad(EventArgs e)
{
 base.OnLoad(e);
 Page.Header.DataBind();
}

DONE!

Keep in mind that the script and css references paths must be relative to he root of your site.

This way, everywhere the MasterPage is used the paths to the resources will always be correct.

Cheers!

Advanced ASP.net Generic Handler

Sat, 24 Mar 2012 12:24:00 +0000

Github Repository

Disclaimer

This is a project I did some years back but never took much care maintaining or writing proper automated tests.
Although this has been used in multiple production applications, I suggest to take your time to understand it properly.

On CodeProject there’s also a nice discusison about this approach over WebAPI.

Description

In ASP.NET, we have something that is usually overlooked that is called Generic Handlers.

This is an completely worked out Generic Handler that truly knows how to handle your http (AJAX and not) requests.

For now, for a detailed explanation, please look at the original CodeProject article

Why not WebAPI or MVC?

When I wrote this, WebAPI was not available yet.

Although Generic Handlers still have their meaning, probably you’ll find WebAPI a good match for most of your needs.

ASP.net MVC Controllers can also be used, specially if you’re already using it in your application.

Advanced Generic Handler ASHX

Sat, 24 Mar 2012 01:09:00 +0000

Introduction

In ASP.net we have something that is usually overlloked that is called Generic Handlers.
I see a lot o f people using pages to process AJAX requests when we can use this much less expensive endpont.
This is an completelly worked out Generic Handler that trully knows how to handle your http (AJAX and not) requests.

Sample code

Background

For a long time I used plain Generic Handlers (ASHX files) to handle my AJAX requests but it felt stupid and painful.
I mean, the functionality was there but the whole process of handling the requests wasn’t straight forward.
So I made a list of the things I would like to have on and handler:

Standard way to parse the query string
Transparently handle multiple methods within the same handler
Support methods with multiple typed arguments, not just strings
Support Methods that receive lists as an argument
Support passing less arguments than the method is expecting (like optional parameters)
Transparently reply eather POSTs or GETs
Support default object serialization to JSON but still let me override it on each method
Return application/json by default but still let me override it on each method
Support JQuery $.ajax request
Support request by query string (url right on the browser)
A way to visualize the methods the hadler supports (like webservices do)
Extensible

And that’s it…

I can tell you in advance that it already does all this and more.

Using The Code

List the Handler methods

I’ve provided a very basic way of listing the methods the Handler exposes.
This is specially useful to test if the handler is working correctly (like on webservices) Do do so just append ?help at the end of the handler URL:

http://localhost/mydemohandler.ashx?help

Calling the Handler from the browser URL

Using this handler is very simple:

Create a new Generic Handler
Clear everything inside the handler class
Inherit from my Handler class

DONE! Now you only need to add your methods.

Lets create a very simple example that receives a name and returns a string (see on the project).

public class MyFirstHandler : BaseHandler
  {
    // I don't bother specifying the return type, it'll be serialized anyway
    public object GreetMe(string name) 
    {
      return string.Format("Hello {0}!", name);
    }
}

To call this method through a URL use:
MyFirstHandler.ashx?method=GreetMe&name=AlexCode

AJAX Request using JQuery

If you want to use JQuery AJAX method you just need to know the object the handler is expecting to get.
On the data property of the $.ajax request you must pass something like:

{ 
  "method": "mymethod", 
  "args": {
    "name": "Alex",
    "country": "CH"
  } 
}

Be aware that everything is case sensitive!

$.ajax({
 url: 'MyFirstHandler.ashx',
 type: 'GET',
 data: { method: 'GreetMe', args: { name: 'AlexCode'} },
 success: function (data) {
  alert(data);
 }
});

Writing a method that returns HTML

Like I said on my intention points above, I need to have some methods that return whatever I want like HTML, XML, images, files, etc…
The default behavior of the handler is to return JSON so, by method, we need to explicitly say that we want to handle things our way.
For that just use these lines anywhere within the method:

SkipContentTypeEvaluation = true; 
SkipDefaultSerialization = true;

// you can specify the response content type as follows
context.Response.ContentType = "text/html";

Lets see an example on how we could write a method on the handler that returns HTML:

public object GiveMeSomeHTML(string text)
{
 StringBuilder sb = new StringBuilder();
 sb.Append("<head><title>My Handler!</title></head>");
 sb.Append("<body>");
 sb.Append("This is a HTML page returned from the Handler");
 sb.Append("The text passed was: " + text);
 sb.Append("</body>");

 context.Response.ContentType = "text/html";
 SkipContentTypeEvaluation = true;
 SkipDefaultSerialization = true;

 return sb.ToString();
}

Optional Parameters and nullable types

All parameters in the methods are optional. If they’re not passed their default value is assigned.
Also all parameters can be nullable. In this case the default value will be null.

Please have a look at the attached code sample for more examples.

Points Of Interest

I can say that this handler already saved me a good amount of development and maintenance hours. Currently all my AJAX requests point to a method on an handler like this.

History

v1.0 - The first wide open version
This is a work in progress, I keep improving it regularly.
I have no doubt that you’ll try to use this in scenarios I haven’t predicted.
Please send me your requests and desires, I’ll do my best to implement them.

Instance Of An Object

Go from Multi-Page to a Single-Page Web App

The problem

Train your team

Define a strategy

Phase 1: Split the controllers

MVC in the back-end?

No MVC in the back-end?

Phase 2: Start managing state with Angular

Phase 3: Add ng-route

Phase 4: The login page

The pitfalls list

PF1: Converting the page javascript file into a controller

PF2: Splitting code into factories

PF3: Think when it’s a good idea to split functionalities into several modules

PF4: Be aware of library version conflicts

PF5: jQuery events bound to the document

PF6: jQuery based controls/widgets will be a pain in the… neck

PF7: The Login page is still a separate page?

PF8: Slowly start to get rid of all jQuery selectors

Final notes

Verify country Google block

The problem

So what?

Test the functionality instead of the country!

Configuring Google Drive

Javascript

Additional resources

Welcome to Jekyll!

Why Jekyll?

Plugins

Plugins under GitHub Pages

Taking the most out of Tags

Redirecting old Blogger URL’s

Using Jekyll on Cloud9

Start serving Jekyll from C9

IFrame Orchestrator

Description

Why?

What does this do?

Where can this be used?

CSS Sprite Generator

New v2.0

Introduction

Why This?

Using the Code

Assumptions, Limitations and Functionality

Bin Packing Algorithms

Options

History

Fix SSRS PDF Blank Pages

The problem

The solution

Windows 7/8/2008r2 As Internet Hot Spot!

Include Javascript And CSS On Your MasterPage

The Problem

The Solution

Advanced ASP.net Generic Handler

Disclaimer

Description

Why not WebAPI or MVC?

Advanced Generic Handler ASHX

Introduction

Background

Using The Code

List the Handler methods

Calling the Handler from the browser URL

AJAX Request using JQuery

Writing a method that returns HTML

Optional Parameters and nullable types

Points Of Interest

History