Orcas Beta1 Golden Gem #1

So one of my new favorite features in Orcas is intellisense in javascript. I have always disliked typing things in blindly and hoping when I run the page all is well. Now I don’t have to do this since Microsoft has created this handy new feature. So let me show you a sample that demonstrates how this works.

So this sample is a new web project that has a default.aspx page and a simple “hello world” web service called AjaxWebService.asmx.

Ajax_intellisense_01

The code you will see is in a script block on the default.aspx page that has a ScriptManager control on it that has a servicereference that points to the AjaxWebService. The series of images below show how you can start with the main namespace and walk down to the method that you want to call in the web service.

 

Namespace Level

Ajax_intellisense_1

 

Class Level

Ajax_intellisense_2

Method and Properties Level

Ajax_intellisense_3

Method Call Level

Ajax_intellisense_4

 

So the cool thing about this is that Orcas figured out that my web service had the ScriptServices attribute applied to the class and that the HelloWorld method had the WebMethod attribute and knew what to do. It was like it just created a proxy in the background and then presented that proxy as a class that I could then use in javascript. The thing that made this possible was the ScriptManager control on the page and the web service in the servicereference (see below).

 

<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>

<Services>

<asp:ServiceReference Path=”AjaxWebService1.asmx” />

</Services>

</asp:ScriptManager>

 

Now my next great idea was to get intellisense working with a regular javascript file. So I created a javascript file called JScript1.js and added  the code below to it using the prototype format.

 

Type.registerNamespace(“Demo”);

Demo.Person = function(firstName, lastName, emailAddress) {

this._firstName = firstName;

this._lastName = lastName;

this._emailAddress = emailAddress;

}

Demo.Person.prototype = {

getFirstName: function() {

return this._firstName;

},

getLastName: function() {

return this._lastName;

},

getName: function() {

return this._firstName + ‘ ‘ + this._lastName;

},

dispose: function() {

alert(‘bye ‘ + this.getName());

}

}

Demo.Person.registerClass(‘Demo.Person’, null, Sys.IDisposable);

// Notify ScriptManager that this is the end of the script.

if (typeof(Sys) !== ‘undefined’) Sys.Application.notifyScriptLoaded();

 

I then thought great I should now get intellisense in my script block but NOOOO. I now had to add the script to the scriptreference in the ScriptManager before I could get things to work (see below).

 

<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>

<Services>

<asp:ServiceReference Path=”AjaxWebService1.asmx” />

</Services>

<Scripts>

<asp:ScriptReference path=”JScript1.js” />

</Scripts>

</asp:ScriptManager>

 

Now once I did this the Demo namespace came up (see below) and I could work with the person class.

Namespace Level

Ajax_intellisense_6

Class Level (you know the drill now…)

Ajax_intellisense_7

 

I hope this was helpful in seeing how all of this new intellisense stuff works and if anyone has any other things they have seen please feel free to add to the comments of this blog. I have also included the sample application I used for this to help in following along. The next thing I have to show off is debugging. You will absolutely freak on this one!

Leave a Reply

Your email address will not be published. Required fields are marked *