evadicode

[evadicode]

MVC client validation after PartialView loaded via Ajax

I came across this scenario whereby my main View uses Ajax posts to retrieve PartialViews and delivers the markup of the PartialView into my View. I use the jQuery validation framework to implement client side unobstrusive validation.

When I tried to validate my form that had been loaded into the page via an Ajax call, the validation did not appear to be working, my form simply posted. As it turns out, the unobstrusive jQuery validator library parses the markup of a page after it has finished loading for all the validation rules on the page. The result is, jQuery doesn't know that the dynamically added markup has any validation rules resulting in no validation errors being thrown on post.

  Solution

Luckily there is a method that is publicly accessible in the unobstrusive jQuery library which you can call, which will force the parser to scan the markup you just loaded. To do this you need to add the following code to the PartialView (or other dynamically loaded content)

https://gist.github.com/evadi/2e00039c4cc9f76b9f3a

Then in your parent page you can handle the form submission and check the form is valid like this;

https://gist.github.com/evadi/cf40587b372ead0e38a0

And that is it!!

[evadicode]

Unit testing FormsAuthentication in ASP.Net MVC

I am going to assume that if you are reading this you are in a situation where you are trying to unit test a method that somewhere along it's operational path uses the FormsAuthentication static class? Good, in that case you are now probably aware that you can't mock the FormsAuthentication class because it is static. So what do you do?

In order for mocking frameworks to work, they need to be able to create instances of the class you are trying to test, therefore we need to give the mocking framework something to work with. Simply put, you need to create a wrapper in which the FormsAuthentication methods will be called;

https://gist.github.com/evadi/29f239656e802f88c6f9

IAuth can now be used in any controller that needs to call FormsAuthentication;

https://gist.github.com/evadi/0d7d3d7e80c4c054e0b4

I am assuming of course at this point that you implementing some form of dependancy injection whereby the correct instance of IAuth will be creating upon the contruction of the controller.

IAuth can now easily be mocked in a unit test and verify that the controller calls the expected methods on it. Remember you are not testing that FormsAuth works as it this simply delegates it's calls to FormsAuthentication which we know works as this is the responsibility of Microsoft. Golden rule of unit testing;

Don't test other people's frameworks, just your usage of them

  Download

I have made available an implementation of IAuth and FormsAuth as described in this blog. Feel free to download it, use or rip it apart for some other use. It is a simple wrapper for FormsAuthentication where the method names are replicas of FormsAuthentication.

Download

[evadicode]

Using setTimout effectively in javascript

I have used setTimeout numerous times in my work, but always for the same reason; to kick off some method after a specific period of time without recursion. But what is really happening and what should you know about setTimeout?

  What does setTimeout really do?

First of all we have to remember that javascript is a single threaded language, so every event you fire has to take it's place in a sequence of other operations. The best way to understand this is to think of driving down a road with one lane, so other traffic can't overtake you. Everything gets executed in the order they reach the end of the road.

If you were designated as a setTimeout operation then you would pull in to the side of the road and wait for the designated length of time. While you are waiting all other traffic passes you on their way to the end of the road. After you have waited the required amount of time you can rejoin the road. But as we know from our own driving experiences, you can't just pull back into the road, you have to wait until there is a gap (or the browser is not busy).

  Illustrative example of blocking

https://gist.github.com/evadi/45677be58397acc91a47

Demo

In this example we are blocking the main thread for a long period time meaning the span element on the page cannot be given it's initial value of 'Waiting...'. This means the first value that is given to the span element is 'finished', which is obviously no good to the user, as they needed to know before the operation started that they may need to wait a while.

  Illustrative example of solving blocking using setTimeout

https://gist.github.com/evadi/edc3b86aef3a29164773

Demo

In this example we wrapped the long operation in a setTimeout call which means the span element is updated with 'waiting...' before the long operation starts and then is updated with 'finished' when the long operation ends.

  What do I need to know about setTimeout?

It appears that the minimum delay setTimout would wait used to be 10ms, but in all HTML5 browsers this has been reduced to 4ms (as illustrated in my examples). 

Where you see developers using 0ms as a delay, HTML5 browsers will actually interpret this as 4ms and non HTML5 browsers 10ms, which i'm not sure if most developers are aware of. As long as the expected result is correct I'm not sure it matters.

Even after all that is said based on the information in the previous sections, you have probably realised that even by specifying a delay you are not guaranteed that the method will be executed after that exact delay. This is due to the nature of the single threaded environment and the returning of the method to the event queue. It has to renter the queue only when the browser is not busy with other operations.

So in other words the specified delay is only the minimum time it has to wait!

[evadicode]

Simple jQuery Plugin - Text Area Character Limit

I came across a need today to be able to restrict the number of characters entered into a text area. Like all developers I thought, why write this when there is almost certainly a plugin out there to do it. Not wanting to spend too much time looking I came across one or two plugins, but they all implemented it in the same way, which meant the user experience wasn't as I wanted it to be.

Most plugins seem to allow the character that causes the exceeding of the limit to be added to the text area before then removing it, causing a momentary glitch on the UI. They also allow adding the insertion of text in the middle, dropping characters from the end of the text as you type. I realised that this approach could be improved upon, which is where this plugin originated.

  What does it do?

Simply, the plugin forecasts the character limit breech before adding the character to the text area, and then stops the character being added if a breech is about to happen. As a result of this, characters cannot be inserted in the middle of the text area of the overall character count exceeds the limit (as you would expect right?).

  Implementation

https://gist.github.com/evadi/b9e4da5b4a05e7a1307a

By default the maxCharacters property is 100.

  Download / Demo

Version 0.1.0 - Demo

License

Any is free to use/modify/copy the source and use it in any system without the permission from me

[evadicode]

Organising Unit Tests in Visual Studio 2012 using Traits

It is one of those annoyances when writing unit tests that the appear in one long list with no possible way of finding the one you want, unless the name of the test is friendly enough to find. Visual Studio 2012 offers some relief to this problem, giving developers the ability to filter tests in various different ways;

FilePath

Project

etc..

Even with this useful filtering, we are left with filtering by things that we as developers cannot control easily. FilePath and Project are very rigid once they are setup. Wouldn't it be great if a developer could specify a tag against a unit tests that could then be used to filter? Well now you can.

Introducing Traits

A trait is simply a piece of meta data that is set against a unit tests that can then be used to group or filter unit tests. They are easy to assign/change at any point without causing any problems.

https://gist.github.com/evadi/b0da0c4e399d5824d8b5

After assigning these Trait attributes to your unit tests your Test Explorer will now look something like this (after you set Group By to Trait

And you can filter by Trait like this;

Very simple, yet very powerful.

[evadicode]

Blogging support for developers

I have been doing some research into Blogging engines and it appears that there are few that serve the developer community. Is it too much to ask to have a blogging engine that catered specifically for text based, code snippet posts that are styled in a modern, technology based theme, without cost? Don't they know developers are the worst designers?!

I was going to spend some time posting about the pros and cons of each blogging engine I have looked at so far, but the truth of the matter is; if you are that interested, you have probably already been through the same decision making process (pain) that I have.

I would be interested to know if anyone has actually found either a suitable blogging engine, or a theme which has pre installed "prettify" and looks the part.

[evadicode]

Phil Haack works at Github, and used to work for Microsoft. His blogs are not only useful for all things "code", but also witty.

[evadicode]

ScottGu, as he is known, works for Microsoft, and given that most of my work is done using .Net, I find Scott's blog to a useful source of information