Web Development Blog

Run Microsoft Ajax Minifier from the Visual Studio Tools Menu

Microsoft have created a great tool, Ajax Minifier a free tool that you can use to minify your JavaScript and Cascading Style Sheet files. So far I have had no problems with the minified JavaScript. I have tried a few other tools which worked most of the time but not always.

The documentation is very good with plenty of examples and also including information on how to use the Microsoft Ajax Minifier as a Build Task  so that every time you perform a build in a Visual Studio ASP.NET project, you can minify all of your JavaScript and Cascading Style Sheet files automatically.

I wanted to run the program on individual files experimenting with the options. For this I preferred to integrate the Microsoft Ajax Minifier into the Visual Studio Tools menu. I wanted the Ajax Minifier to run against the file I currently had open and save the output as a copy in the format of filename.min.extension, for example Common.js gets saved a Common.min.js.
 



Command: C:\Program Files\Microsoft\Microsoft Ajax Minifier\AjaxMin.exe

Argument: $(ItemFileName)$(ItemExt)  -clobber -out $(ItemFileName).min$(ItemExt)

Initial Directory: $(ItemDir)

By ticking use output window you can see some minification stats or any problems if the program fails to execute. You will need to show all files to see the newly created file in the solution explorer. Using the -clobber option overwrites any existing file with the same file name so be careful you have -out argument correct.

I found this quite useful as I didn't want to minifiy everything in the project and typing in the command line each time would quickly become a drag.



How to debug Javascript, JSON and ASP.NET WebServices with Firebug

Writing a JavaScript client side interface backed by ASP.NET Web Services is a great way to create a rich responsive interface. A previous post on Client Side Binding Using Ajax Page Methods and jQuery demonstrates some of the first steps to do this. It can be a bit tricky when its not working figuring out what is wrong, is it the JavaScript the Web Service or something else. I thought I would extend the post to show how to debug with Firebug.

If you are familiar with Firebug, then this is probably all old news. In my opinion Firebug is hands down the best HTML and CSS web debugging tool you can have in your toolkit.

A quick summary

Some client side action on the web page takes place and requires some sort of server side action. For example retrieving and filling a drop down list with values based on a previous selection, a common way of selecting a category from a tree structure that is to large to render in a single drop down.

Debugging the client side JavaScript interacting with an ASP.NET Web Service

Attached to the button in this example is the JavaScript that queries the web service. You push the button and nothing happens. Open Firebug and select the console you will see the request to the Web Service has thrown an error 500 Internal. Select the HTML tab and you can see the error message returned by the Web Service. In this case its an easy fix, the Web Service class is missing the ScriptService attribute.



After fixing the Web Service I place a break point in the script section of Firebug immediately after the Web Service returns. I select the result variable and add it to the watch, after visually inspecting the JSON in the Watch panel, I can see the data structure is slightly different from what I was expected.
 


In the response section of Firebug you can see the data passed back from the Web Service.



After fixing the JavaScript it executes without error.



You can see with Firebug it is very easy to see exactly what is wrong.

The benefits of using a Web Service

Its always tempting to use ASP.NET Ajax to do this as it so easy and its still much beater than posting the whole page back to the server. You can achieve the same thing querying an ASP.NET Web Service and then doing something client side with the result. Using an ASP.NET web service to supply the data in JSON format allows you to easily manipulate the result directly in your client side JavaScript. Less data is transferred over the network and on the server side you are not running through the full page life cycle on each request.


How to use WSE 3 in Visual Studio 2010

Update for my last post on this topic How to use WSE 3 in Visual Studio 2008 , I have upgraded some projects to Visual Studio 2010, in the project I was using a WSE 3.0 web service. The project compiled fine but I found when I updated the web service I was using the proxy class that was generated did not work. The proxy class inherited from System.Web.Services.Protocols.SoapHttpClientProtocol instead of Microsoft.Web.Services3.WebServicesClientProtocol. This was quite a problem I didn't fancy having to manually recreate it each time  wanted to update the WSE 3.0 web service.

  1. Download and install WSE 3.0 but if you are reading this its probably installed. 
  2. Locate the Visual Studio 2005 add-in at following location C:\ProgramData\Microsoft\MSEnvShared\Addins
  3. At that location you find the file “WSESettingsVS3.Addin”.
  4. Open file in locate the section <Version>8.0</Version>  and change it to <Version>10.0</Version> and save
  5. Open the Visual Studio menu and select Tools –> Options –> Environments 
  6. If its not already listed add C:\ProgramData\Microsoft\MSEnvShared\Addins
  7. Restart Visual Studio.

That's it, I restarted Visual Studio and updated the web service and the WSE 3.0 proxy class and methods were generated.