JavaScript MVC + ASP.NET MVC

I've been always interested in how to mix ASP.NET MVC and Object Oriented JavaScript. My approach has been to use ASP.NET MVC to expose services and build the client (views/UI) with 100% OO JS code, but I wonder if there's a way to build most of the application (including views) on the server side and still keep using OO JavaScript.

Here's an interesting article that explains a double MVC architecture. You'll need a little background on JavaScript MVC to understand it http://blog.javascriptmvc.com/?p=68

JavaScript gotcha

If you are using arrays of objects, make sure the last parameter doesn't end with a coma, for example:

test : [

{ myvar: 1},

{ myvar: 2},

{ myvar: 3},

]

This will work fine on Chrome and Firefox, but IE will consider the array to have an extra object . If your code uses the length of the array then it will crash because the last object will be null. How did I figure it out? The hard way...

Cross domain XMLHttpRequest

It's not possible to use the ArcGIS Server REST API if your parameters have more than 2048 characters and you select HTTP GET. Of course, the REST API UI provides you the option to do an HTTP POST. But how do you do this programmatically?

You use a proxy!! ArcGIS Server provides you one here. More information oh how a proxy works can be found on the Yahoo Developer Network.

I named this post Cross domain XMLHttpRequest because in the context of ExtJS, the ScriptTagProxy doesn't support HTTP POST calls. Therefore, you would use HttpProxy (with a POST method) to access the proxy on the local server. Remember to pass the parameters as properties (instead of concatenating them to the URL).

Concatenating, Minifying and Optimizing JavaScript

Doing this is as important as making sure your code compiles :). I've been reading several articles on how to do this, and they all present different approaches, this is what worked for me:

1) Concatenate the .js files: I use the copy command; however, it adds some extra characters that later need to be removed for YUI Compressor to work. It does the trick for now though.

2) Compress the files: YUI Compressor is the best choice. For it to work correctly I had to use the --charset flag.

3) Set the content expiration date (using IIS). In my case I set it to expire after 20 days.

4) Finally, enable gzip compression. At first I thought I would need to gzip the files, but it turns out that II5 does this for you. Setting it up is not really straight-forward, check out the section Scenario 1 of this article for IIS 5.0 instructions.

Maintainable JavaScript

This is a great screencast on best practices to write maintainable JavaScript code, check it out!

ExtJS combo doesn't allow empty text

The combo that I was using didn't allow an empty selection after picking a value from the list. Pretty strange, because another combo in the same page was working correctly. It turns out that the data store items need to have an ID greater than 1 because it seems emptyText uses ID=0.

So next time you use emptyText, make sure none of the items in your data store use an ID=0.

JavaScript Unit Testing

YUI Test is probably the best JavaScript testing framework I've found so far. Check it out here.

I have still yet to find a way to call YUI test from a Continuous Integration environment. The default way to call it is by running the website to be tested, but there should be a way to call it remotely and make sure the test passed.

esri.layers.FeatureLayer is not a constructor

I received this error when using the ArcGIS JavaScript API. After doing some digging, it turned out that esri.layers.FeatureLayer was undefined (because the API was not loaded) when I was calling it.

Al the API examples show that dojo.addOnLoad should be used but I was using Ext.onReady (another JS API). This was causing the problem because when Ext.onReady was executed the AGS JS API was not loaded. I had to use dojo.addOnLoad to make sure that when I call esri.layers.FeatureLayer it is actually loaded.

JavaScript MVC

This article provides a great start to implement the MVC pattern. I would argue, however, that it can be improved because it doesn't match the definition of MVC from Wikipedia.

One of the problems with the article below is that the View knows about the Controller and the Model, when it should only know about the Model. Although there is at least another problem (hint: the controller doesn't know about the View), it is very easy to fix and you get a perfect implementation of JavaScript MVC.

I am doing this with ExtJS, I'll post some code after I get it to work.

Cross domain HTTP Request using JavaScript

My first choice was to use JQuery. You can use jQuery.ajax with dataType="jsonp". However, this won't work unless the servers supports jsonp (http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/). Cross domain HTTP requests are a really interesting topic.

After several tries, I decided to do this using ASP.NET (in the code-behind page):

Uri uri = new Uri("http://192.168.0.1/default/query");

if (uri.Scheme == Uri.UriSchemeHttp)

{

WebRequest request = HttpWebRequest.Create(uri);

request.Method = WebRequestMethods.Http.Get;

WebResponse response = request.GetResponse();

StreamReader reader = new StreamReader(response.GetResponseStream());

return reader.ReadToEnd();

}

JayRock vs AjaxPro

Personally, I prefer AjaxPro. It gives you the flexibility of passing a dataset, and it also provides you a cleaner way to wrap the data you want to pass around. Check out AjaxPro here.