As most of you know by now Microsoft has added JavaScript Intellisenseto Visual Studio 2008 which makes programming in JavaScript a lot better but most of the samples have everything in the same page. What I wanted to do is have an external script file for my page that I could add all of my JavaScript code to and have a clear separation between my UI and my code. To add to this, I was using ASP.NET Ajax and I wanted to use the features of the framework and reference web service proxies and have intellisense appear for everything while I was coding. Here are the steps I went through in order to get all of this to work.
1. Add the ScriptManager (or ScriptManagerProxy) to your page
The first thing you need to do is add the ScriptManager or ScriptManagerProxy to your page. This will be the main registration mechanism for you as you add script files and web services for your page to use.
<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”JavaScriptIntellisenseDemo._Default” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>Untitled Page</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
</asp:ScriptManager>
</div>
</form>
</body>
</html>
2. Create an External JavaScript File and reference your page
This is the key to getting intellisense to work with your JavaScript file. What happens once you do this is all of the functionality of the ASP.NET Ajax framework appears in intellisense. You can add this reference statement two way (1) by typing it and (2) by dragging the aspx file onto the script file as you have it open in the editor.
/// <reference path=”Default.aspx” />
Working with Web Service Proxies and Additional Script Files
Now that you have your JavaScript file associated with your page working with web services and additional script files is easy. If you want to work with a web service, just add the service to the services collection in the ScriptManager.
…
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
<Services>
<asp:ServiceReference Path=”~/Service1.svc” />
</Services>
</asp:ScriptManager>
…
Now in your JavaScript file you access the proxy will full intellisense.
Another common situation you run into is needing functionality that is contained in another JavaScript file. All that you have to do here is register that JavaScript file (common.js in our case) with the ScriptManager and it will become available (for intellisense) in your script file for your page (default.js).
ScriptManager Registration
…
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
<Scripts>
<asp:ScriptReference Path=”~/default.js” />
<asp:ScriptReference Path=”~/common.js” />
</Scripts>
<Services>
<asp:ServiceReference Path=”~/Service1.svc” />
</Services>
</asp:ScriptManager>
…
JavaScript File Fragment for Reference
//common.js
function formatErrorMessage(message)
{
return “The following error has occured during your web service call\n ” + message;
}
Accessing method in default.js
Summary
In this approach we use the ScriptManager for two purposes (1) to register our scripts and web service proxies and (2) to combine all of our external references for our script file that supports our page. This is just one of many approaches that are possible but the thing I like about this approach is that is works off of things I already have to do for my page to work anyway. One thing to note is that you will probably have to compile as you add new things to the ScriptManger. It seems that this is the only way to get intellisense updated.