Tag Archive: javascript


How to setup intellisense for javascript files (like JQuery) in Visual Studio 2008

Visual Studio 2008 already shows intellisense for javascript if you have the javascript embedded in the page, but if you want to get intellisense on javascript in js files referenced in your master page, you’ll need to make some mods. In the four steps detailed below, you’ll get javascript intellisense for external js files like jquery.

Making the mods

First, you’ll need to install SP1 for Visual Studio 2008 from here: http://www.microsoft.com/downloads/details.aspx?FamilyId=FBEE1648-7106-44A7-9649-6D9F6D58056E&displaylang=en . This service pack adds a lot of enhancements to intellisense and other features of visual studio, so it’s useful even if you don’t want js file intellisense.

Then you need to install Microsoft’s hotfix for Visual Studio 2008 from here: http://code.msdn.microsoft.com/KB958502 . This hotfix makes Visual Studio automatically load vs-doc.js files as long as they are in the same folder as the dependent js file.
Place any vs-doc.js files in the same folder as their dependent js file, if you don’t have the vs-doc file for jquery, you can download it here: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2-vsdoc2.js (you’ll need to remove the 2 at the end of the file name or Visual Studio won’t see it). For example, if you are using jquery-1.3.2.js, be sure to have the jquery-1.3.2-vsdoc.js file in the same folder. But if you’re using jquery-1.3.2.min.js, you’ll need the jquery-1.3.2.min-vsdoc.js file instead.
So far, pretty straightforward. Here’s the hacky part: You’ll need to put this code block into your Site.Master and any other master page you want to derive from and get javascript intellisense:

<!--Load javascript into intellisense, but do not render it on the user page. 
Note: this must be in the master page, not an include file, and it must use absolute reference, not dynamic Url.Content. 
Only some js files will load in intellisense; 
some js files cause all the js files to fail to load into intellisense. --->
<!--if (false){-->
<script src="~/Assets/JavaScript/jquery-1.3.2.js" type="text/javascript"></script>
<script src="~/Assets/JavaScript/jquery.blockUI.js" type="text/javascript"></script>
<script src="~/Assets/JavaScript/json2.js" type="text/javascript"></script>
<!---->

Here’s why: The Visual Studio hotfix won’t see the intellisense info for your js files in an MVC environment because of the way we need to dynamically fetch the runtime url. You will need to add an absolute url reference, which is why we can’t use the MVC Url.Content method. Additionally, you don’t want that reference to get rendered to the client, hence the “if false” clause the always prevents it from rendering on the client, but tricks Visual Studio into seeing the reference for intellisense. Furthermore, VS2008 won’t see js file references in include files like MasterHeadElement.ascx, it only sees the ref if it is in the master page itself.

One warning: I found that some of the js file references fry the system and prevent all of the js files from loading into intellisense. I’m not sure why, but so far I know that jquery, jquery.blockUI, and json2 always work, but some other js files don’t.

Easy way to setup default error handling for your JQuery ajax calls

If you don’t want to keep copy/pasting the same error function for your jquery ajax calls over and over again, here’s a quick way to set up error handling in one place.
Add this javascript block below your jquery library links (such as in your MasterHeadElement.ascx control or master pages):

<script type="text/javascript">
// THIS MUST BE LEFT AT THE BOTTOM OF THE HEAD ELEMENT...the code below needs to have the jquery libraries loaded
// setup all jquery ajax calls to use this error function by default (this can be overridden simply by specifying the error property as normal in the ajax call).
$().ready(function() {
    $.ajaxSetup({
        // put your favorite error function here:
        error: 
            function(XMLHttpRequest, textStatus, errorThrown) {
                // release any existing ui blocks
                $.unblockUI;
                var errorObj = JSON.parse(XMLHttpRequest.responseText);
                // send the user to the system error page if system error, otherwise popup the user error div
                if (!errorObj.Success) {
                    if (errorObj.ErrorType != "system") {
                        $('#UserError').html(errorObj.Message);
                        $.blockUI({ message: $('#UserErrorWrapper'), 
                        css: { width: '400px', height: '300px', overflow: 'scroll' }
                     });
                }
                else {
                    window.location = errorObj.ErrorPageUrl;
                }
            }
        }
    });
});
</script>

Now all ajax calls in your app will default to this error function. All you have to do is leave out the error delegate in your ajax calls (i.e. include the url, success, datatype, and other properties on your $.ajax call, but leave out the error property). Like this:

$.ajax({
    url: // some link,
    success: function(data){
        // do something
    },
    dataType: 'json'
});

If you want to use a different error function on an ajax call, simply write in the error function into that ajax call as normal, the global default error function will be ignored. Like this:

$.ajax({
    url: // some link,
    success: function(data){
        // do something},
    dataType: 'json',
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("Oh noes!");
    }
});

Here’s an easy way to get the MVC root path in JavaScript Js files. Since Js files don’t let you run embedded C# code, and you don’t want to hard code a URL path because the dev and production environments have different root paths, so it’s hard to get properly resolved URLs for JavaScript in MVC. One way to solve this is to create an extension method (JavaScript calls it a prototype) to a global variable in your Site.Master page that automatically converts any reference to “~/” to your MVC root path.
Place this JavaScript block above your links and script references in your Site.Master page (for example, right underneath the head tag).

// THIS MUST BE LEFT AT THE TOP OF THE PAGE...all links and scripts below will need this extension method
// Create an extension method ("resolve") 
that returns the correct server path of the server, whether the server is virtual directory or root
Url = 
function() { }
Url.prototype ={
_relativeRoot: '<%= ResolveUrl("~/") %>',
// create an extension method called "resolve"
resolve: function(relative) {
var resolved = relative;
if (relative.charAt(0) == '~') 
resolved = this._relativeRoot + relative.substring(2);
return resolved;
}
}
$Url = new Url();

Now in any js file in JavaScript that requires an MVC path resolution, just use:

var imageUrl = $Url.resolve("~/mypic.gif");  //’resolve’ is an extension method created in Site.Master
© 2018 Robert Corvus