lancefisher.net

Visual Studio 2008 Intellisense for jQuery 1.2.5

Lance — Wed, 21 May 2008 19:33:55 GMT

Yesterday's release of jQuery 1.2.4 was a bad build. That is part of the reason it was so easy to update the intellisense comments. There just weren't many changes from 1.2.3 to 1.2.4. So just one day later, the jQuery team has released jQuery 1.2.5. It looks like the full Dimensions plugin is now rolled into jQuery. Not just four methods as in the 1.2.4 release.

I went through it, and added the XML comments for intellisense. Again, WinMerge made this relatively painless. If you use it, get to know the alt-arrow key shortcuts:

alt-down navigates to the next difference
alt-up navigates to the previous difference
alt-right moves the content on the left to the right
alt-left moves the content on the right to the left.

There are some new functions, and some of the old ones that were not working with intellisense are now fixed. You should get intellisense on every function. Some of these are pretty large since the intellisense hint needs to apply to several functions. For instance, if you pull up the appendTo() hint, you'll see that it covers five functions. That is because all these functions share the same code in the jQuery library.

You might also be interested in trying out Brennan Stehling's or James Hart's jQuery intellisense stubs. They are different than this implementation in that they are not working jQuery JavaScript files. They are built with function stubs to enable intellisense in Visual Studio, but your pages use the actual jQuery JavaScript. What I've published here is the full jQuery 1.2.5 source code with the XML comments added in. It should behave exactly as jQuery does. You will probably want to deploy the minimized version of jQuery rather than this to save on bandwidth and page load times.

I'm still not sure whether a full copy of the library or the stub approach is better. There are advantages of both. What do you think? Also, what do you think of moving this to a CodePlex project?

Let me know if you run into any problems with this release. I'll try and fix it and update this post. Good luck!

Visual Studio 2008 Intellisense for jQuery 1.2.4

Lance — Wed, 21 May 2008 00:49:06 GMT

Important Update

jQuery 1.2.4 was a bad build. The jQuery team released jQuery 1.2.5 today. I made a new post for jQuery 1.2.5 with Intellisnse.

Download: jquery-1.2.4-intellisense.js

jQuery 1.2.4 was released yesterday, so I wanted to update the jQuery Intellisense file I built for jQuery 1.2.3. This is the full jQuery library with XML comments added to it so that Visual Studio will display intellisense hints for you.

To use the intellisense verison of jQuery, just include the jquery-1.2.4-intellisense.js file in your project, and drag it from the Solution Explorer into your JavaScript file. This will add a comment to the top of your .js file:

Also, you must have the Visual Studio 2008 Hot Fix Roll Up Patch installed.

From looking at the source, there isn't a lot of new code in the update. They've added four functions from the jQuery Dimensions plugin: innerHeight(), innerWidth(), outerHeight(), and outerWidth(). Other than that, there are a few changes to a few lines which I assume fix bugs. For details you can read the jQuery 1.2.4 release notes.

It was really quick to update the library with the XML comments. Using WinMerge, I loaded the jquery-1.2.3-intellisense.js file into the left side, and the new jquery-1.2.4.js file into the right side. Then, I just went through the differences, and merged the XML comments from 1.2.3 to 1.2.4. As far as I know the only API changes were the addition of the four functions from dimensions. For these I used the documentation from the dimensions page since I couldn't find them in the jQuery documentation. It actually took longer to write this post than to make the updates.

If you run into any problems with the update, let me know and I'll fix it and post it. Good luck!

LINQ To SQL - CASE Statements

Lance — Wed, 07 May 2008 23:40:07 GMT

In today's post we'll see how to make LINQ to SQL generate SQL CASE statements for us.

Even though some people describe the SQL CASE statement as obscure or an edge case, I tend to use it quite a bit. It's true that if you are dealing with a nicely designed database you can probably avoid it, but the sad fact is that I'm often not dealing with a nicely designed database. Maybe you have this headache too. Third-party vendors have a habit of making their databases ugly.

One use for the CASE statement is displaying a description instead of a code when there isn't a lookup table. Suppose there is a yes/no field that stores values as 1/0 in the database. You can use a CASE statement to return yes or no instead of 1 or 0 like this:

That's the easy example. Often I'll find myself writing longer CASE statements to get around more difficult problems like this:

It can get much worse, but let's not get into that.

I've been converting some of my data access over to LINQ in an effort to get rid of some stored procedures. I want to simplify deployment, and I'd rather not put stored procedures in a third-party database. A nice side effect of this work is that the LINQ turns out to be much more readable than the piles of T-SQL.

One problem that I've seen people run into is how to write these CASE statements in LINQ. There is no direct equivalent like "select", "from", and "orderby". However, it is possible using C# language features. In particular the ternary operator. You may know it as the "?:" operator.

The ternary operator takes the "if" statement and turns it into an expression. Here's an example:

The syntax is <condition> ? <true value> : <false value>

For this example we'll make a table in a SQL Server database and add some rows to it. This will be a Plants table that contains rows of various plants and whether or not they are edible. Create the table and data using the following commands:

Before we start writing our LINQ code, go get the LINQ to SQL Debug Visualizer. This will allow you to easily see the SQL that is being generated from your LINQ statement. Scott Guthrie has the download on his blog as well as instructions on how to install and use it.

Create a new project, and add a "LINQ to SQL Classes" dbml file. We'll call it Plants.dbml. From the Server Explorer, navigate to the table you created and drag it over to the dbml designer canvas to create the LINQ to SQL code for that table. (For more on using LINQ to SQL be sure to read through Scott's series)

Now that we have the LINQ classes created, let's write some code to pull data from the table using LINQ. Add a new class to your project. We'll call it PlantsTest.cs. I made this into an MbUnit TestFixture. That allows us to easily run methods from it using TestDriven.net. For this demo, that's all we care to do. There will be no UI, just some code to debug.

After you've created the class and marked it as a test fixture, add a method where we can write the LINQ code. To start off, we'll just get all the data from the Plants table as is. Here is the new class with the initial LINQ query. I'm running it with the debugger using TestDriven.net. You can see the SQL that is generated is pretty straight-forward.

Now, let's add a basic case statement. This will return the text "This is poisonous!" for plants with a 0 in the edible field, and "Okay to eat" otherwise. By looking at the generated SQL using the debug visualizer, we can see that a CASE statement is in fact being generated.

Now the question will come up, "what if I want to have more than just one WHEN and an ELSE". In other words, how do I add more cases. Here's the trick:

By replacing the "if false" value of the ternary expression with another ternary expression we logically create the same effect as a SQL CASE statement. Unlike the switch statement, this is an expression, and can be used on the right had side of the assignment operator. LINQ to SQL is smart about handling this too. It creates additional WHEN clauses inside of one CASE statement. Just like you would if you were writing the SQL yourself. The C# syntax forces you to have an ELSE clause. That's a good thing.

Some people might opt for writing in extra parenthesis to clearly show each ternary expression. I think writing the statements without the parenthesis more clearly shows our intent, that is, making a CASE statement.

Download the source code

ASP.NET MVC Is POSHer than ASP.NET

Lance — Wed, 16 Apr 2008 07:42:58 GMT

Over the last couple of years, I've started to develop something of an obession with web standards. Perhaps it's unhealthy for an ASP.NET developer. I'm not quite ready to call myself a "standarista", that's a little too metro for me, and I still have some bad habits lingering around. I'll often leave off title attributes for images or set the alt attribute to nothing. That's not so bad is it? However, I do see the importance of having semantic markup (can you bring yourself to call it POSH?). It is easier to maintain, better for SEO and screen readers.

One of the reasons I'm so excited about the new ASP.NET MVC Framework, is that you have total control over your markup. I can use ids on the client again! With traditional ASP.NET. You lost control over the ids as soon as you used a master page or user control, and who's going to try and build a site without those? ASP.NET does its best to protect you from having duplicate ids in your rendered markup so it adds on a bunch of prefixes to help you out (that and it's own selfish purposes like maintaining state). As it turns out, I'd rather if the framework didn't worry about it. I can handle that myself, thank you.

So, after shedding the bagagge of a stateful framework, I'm coming back to what building websites is really about. HTML, CSS, and JavaScript. Not <asp:textbox />, but <input type="test">; not <asp:button>, but <input type="submit">; etc. It really is liberating in a geeky, "the cruft of the web is dragging me down", sort-of way. It's good to know your HTML elements - all of them. Use the right one for the job, that's semantic markup. Don't just use a bunch of divs.

While we were making ASP.NET Themes and AJAX server controls, developers on other platforms were building all kinds of great JavaScript frameworks and pioneering great practices with CSS. Ideas like not putting JavaScipt in your markup:

"One of the most wicked defilers of beautiful markup is inline JavaScript. This makes the markup all but impossible to read, and provides lots of little dark corners for bugs to hide."

Ideas like CSS belongs in a different file. Then it's easier to participate in CSS Naked Day.

Yeah, beautiful markup is important. Yep, it's true.

One technique that stuck with me and has helped out quite a bit in my day-to-day CSS work is writing all the CSS attributes on one line. I used to put each little attribute on its own line. They deserve their own lines write? Nope. Suprisingly enough, these little attributes are social creatures that like to travel around in packs.

Consider the following CSS snippet:


#header {margin: 0 auto; width: 889px; position: relative;}
#header h1 {background: url(img/header.png) no-repeat; width: 889px; height: 146px; position: relative;}
#header h1 a {margin-top: -100px; display: block; height: 250px; width: 257px; position: absolute;}
#header ul#topnav {position: absolute; top: 29px; left: 274px; width: 604px; height: 30px; list-style: none;}
#header ul#topnav li {width: 33% ; float: left; text-align: center;}

That's 5 lines. That's only a portion of the CSS for a website. It's easy to scan and find what elements I have assigned style to. Then I can look for for the styles I've applied. Had I put a line-break after each attribute, selector, and curly brace, I'd be up to 36 lines. Go format it yourself and see. For a whole site, that can easily become more pages than you want to scroll through.

I'll often over-specify the element I'm selecting. It might have been okay to just use "a" rather than "#header h1 a" in the CSS above, but then if I decide to style an anchor elsewhere in the page, I'd have to go back and undo what I've already done. Either by appling more selectors, or overriding the style. It's much easier to over-specify from the start. Plus it makes it easier to find things in your CSS.

Often you'll want to have different styles in different pages on your website. Nothing too wild, but maybe on your home page you want the headers to be a little bit bigger. Perhaps you want an additional column on the home page, but on your article pages you get rid of a column and widen your main content area. There are all kinds of possibilities. In this scenario, it can be convient to add an id to your body. Why, you say? Well, you can have more than one body element... In a website. It's nice to keep all your CSS in one file (so long as it doesn't become too ridiculous). So if I wanted h2s on my homepage to be 2 ems while on an article page I wanted them to be only 1.5 ems I could do this:


#home h2 {font-size: 2em;}
#article h2 {font-size: 1.5em;}

So how can we do this in ASP.NET MVC? With CTP2, if you create a new project, you get a master page by default. Then, when you add a view, you can add an MVC Content View Page. Unfortunately, it is terribly difficult to reach back up to the master page and set the body ID within the content view page. I haven't figured out a way to do it. Maybe you can. There is another way to go about it though. You can set the body id in your controller right before you render the view. This may make more sense anyway, since you may render the same view from multiple controller actions.

The first step, is to modify the Site.Master page. Open it and change the body element like this:


<body id="<%= ViewData["BodyId"] %>">

Then in the controller, right before you render the view, set the view data:


public void Index()
{
	ViewData["BodyId"] = "home";
	RenderView("Index");
}

If you want to get even more fancy/automatic, you could set the body id using the controller and action names:


public void Index()
{
	ViewData["BodyId"] = RouteData.Values["controller"] + "_" + RouteData.Values["action"];
	RenderView("About");
}

That line could then be refactored in to a function, or into your very own view engine. Just watch out if you are going to be using typed views. In that case, you might want to look into the TempData Dictionary.

For more great reading on Semantic HTML, CSS, and JavaScript be sure to check out the following sites:

http://www.alistapart.com/
http://www.456bereastreet.com/
http://snook.ca/jonathan/
http://mezzoblue.com/

Tired of Visual Studio Telling You "The class or CssClass value is not defined"?

Lance — Sun, 23 Mar 2008 10:32:14 GMT

Sometimes you have classes in your HTML that are not in your CSS for one reason or another. Maybe they are only used in your JavaScript. If you are tired of Visual Studio giving you the warning "The class or CssClass value is not defined," there is a way to suppress it. Here's my solution:

First, add the following to the head element in your HTML document:


<head runat="server">
  <title>The Page</title>
  <asp:Literal Visible="false" runat="server">
    <link href="~/Content/SuppressCssWarnings.css" rel="stylesheet" type="text/css" />
  </asp:Literal>
  <!-- You probably have more here... -->
</head>

Notice, a few things here. First, that there is a runat="server" in the head. This is important for the ~ to work correctly. I also think you need it in order to have any <asp: ...> control in the head. The next thing to notice is the css file that has been added. This is where you add all the classes that Visual Studio is warning you about. Just cut and paste, it's not that bad. Finally, see how the link to your stylesheet is inside the asp Literal control? That keeps it from showing up in your rendered page.

Inside the SuppressCssWarnings.css file is just a list of your classes like so:


/* The whole point of this css is to get VS off my back.  I'm sick of its "The class or CssClass value is not defined." */
.yui-skin-sam {}
.yuimenubar {}
.yuimenubarnav {}
.bd {}
.yuimenubaritem {}
.first-of-type {}
.yuimenubaritemlabel {}
.yuimenu {}
.yuimenuitem {}

And that's it! Good luck! As you can see I've been working with YUI recently. Check it out, it's a good JavaScript library, and it should work especially well the the ASP.NET MVC Framework.

I'm an Official Roadie!

Lance — Tue, 18 Mar 2008 07:15:17 GMT

It's true. The Code Trip made me a roadie. I even have a driver's license. The Code Trip is a few Microsoft developers (and whoever else wants to jump on the bus) driving around the western U.S. programming and meeting developers along the way. I met up with them down at Boise Code Camp, and a few days later they came through Missoula where I live. Check out my post over on The Code Trip site.

I really wish I would have hopped on the bus to get back to Missoula from Code Camp. I ended up taking the plane home Sunday night since I had already been gone from my wife and six-month-old son since Thursday. The Code Trip came through Missoula on Wednesday. It was great. Hopefully they do another trip, or come back to visit our .NET Users Group.

Referencing JavaScript in ASP.NET MVC Master Pages

Lance — Sun, 16 Mar 2008 10:26:24 GMT

Here's a quick tip on including JavaScript files in your MVC master page views. First off, put your .js file in the Content folder (or a sub-folder of it). This folder is available directly over the web. Next you need to reference the file in your master page. In the head element use the following:

<script src="Content/js/jquery-1.2.3.min.js" type="text/javascript"></script>

But wait! there's a problem with this. Depending on what route has led to your view, the directory may be incorrect. For example, "http://mymvcsite.com/about" will find the js just fine since the Content folder is a sibling folder to the about folder. However, if your route was "http://mymvcsite.com/about/someaction", the script reference in your page will be looking for the file here: "http://mymvcsite.com/about/Content/jquery-1.2.3.min.js" and so your js won't work. This problem doesn't seem to happen for css files. The MVC rewrites the href to point to the correct place.

There is a simple fix though. Instead of specifying the js file directly, use the Url.Content() function. For example:

<script src="<%= Url.Content("~/Content/js/jquery-1.2.3.min.js") %>" type="text/javascript"></script>

Also note that the "~" will work in link elements to reference css, but not in script elements referencing JavaScript. It would be nice if this is fixed in the next CTP.

Upgrading ASP.NET MVC CTP1 to CTP2

Lance — Tue, 11 Mar 2008 23:07:15 GMT

With the recent update to the ASP.NET MVC Framework, you may have applications that you've built with the first CTP that you'd like to upgrade to the new CTP2. Microsoft has posted instructions on how to upgrade your project.

I followed the instuctions, but I was noticing that when I tried to add new items to my project such as a new View Content Page, etc. the Add New Item dialog wasn't listing the MVC project items. One of the changes in the new CTP has put the MVC project items into their own grouping in the dialog, which is very handy. However, they weren't showing up in the upgraded project. They should be under Web | MVC.

In order to see the MVC project items you have to update the <ProjectTypeGuids> element in your .csproj file. The new values should be:


<ProjectTypeGuids>
  {603c0e0b-db56-11dc-be95-000d561079b0};
  {349c5851-65df-11da-9384-00065b846f21};
  {fae04ec0-301f-11d3-bf4b-00c04f79efbc}
</ProjectTypeGuids>

Note that I've written it here on several lines for readability, but in your .csproj file it must be all on one line like this:


<ProjectTypeGuids>{603c0e0b-db56-11dc-be95-000d561079b0};{349c5851-65df-11da-9384-00065b846f21};{fae04ec0-301f-11d3-bf4b-00c04f79efbc}</ProjectTypeGuids>

That lets the designer know to give you the correct items types in your Add New Item dialog. Thanks to Andrew for the help in getting this working.

Boise Code Camp 2008

Lance — Sun, 09 Mar 2008 04:56:44 GMT

Thanks to everyone who attended my jQuery and ASP.NET session at Boise Code Camp. I hope to post a little tutorial in the next few days to cover what I wasn't able to get to in my demo. Sorry for the projector problems.

In the meantime, here is the slideshow and code. The slide show is the default.htm file in the Slideshow folder. To go to the next slide hit Shift+k. To go to the previous slide hit Shift+j. Shift+h will take you to the first slide. The slideshow is actually built with HTML, jQuery, and a jQuery hotkeys plugin. Check it out for some more jQuery code examples.

Intellisense for jQuery in Visual Studio 2008

Lance — Tue, 12 Feb 2008 17:49:36 GMT

If you just want the annotated jQuery file download it here: jQuery with Intellisense comments. For more about it, read on!

I really like jQuery. I might even say that I love jQuery. It is a simple and elegant JavaScript framework. The genius is that it realizes that what most people want to do with JavaScript is manipulate the DOM, and it makes doing that fun. Look at this example from the jQuery home page:


$("p.surprise").addClass("ohmy").show("slow");

That will get all the p elements with the class surprise, add the class "ohmy", and then change the display to "block" with a slow animation. Go run it on the jQuery homepage. Nice, eh? The dollar function is magical. You just give it a CSS selector, and it returns jQuery objects that you can do all kinds of cool things with. Also, almost all the functions in the framework return this same jQuery object, so they are chainable like you see above.

Now, I also really like ASP.NET, and with the new ASP.NET MVC Framework coming out, I might even say that I love ASP.NET. I would really like to use jQuery in my ASP.NET projects, but it has never worked too well. The JavaScript intellisense features of VS 2008 wouldn't work right. When Visual Studio 2008 was released, it came with better support for JavaScript. Unfortunately, it did not work with jQuery, but after only a few months, Microsoft released a "Hot-Fix Roll-Up" patch. This will make the intellisense work with jQuery, and fix some other things.

In order for you to get all the great hints in intellisense, you need to have XML comments in your JavaScript. So I spent yesterday afternoon commenting jQuery, and it is awesome! Download it yourself.

All you have to do to use it is include it in a script reference in your page, and add a reference comment in your .js file. So in your HTML you'll have this under the head element:


  <script src="jquery-1.2.3-intellisense.js" type="text/javascript"></script>
  <script src="your.js" type="text/javascript"></script>

Then in your.js you'll need to tell VS about the jquery-1.2.3-intellisense.js file like so:


/// <reference path="jquery-1.2.3-intellisense.js" />

Now you'll have all the intellisense goodness for jQuery available in your.js. You won't want to deploy the jquery-1.2.3-intellisense to production since it is quite a bit larger than the minified version, but for development it should work the same as jquery-1.2.3. I didn't change any of the code, although in some cases it would have made for better intellisense. Which brings me to my next point.

I couldn't get everything to work due to the way the library is written, and the JavaScript comments work. For instance, some functions like append() in jQuery don't have parameters specified. The functions still expect arguments, they just use the "arguments" array instead of formal parameters. Another problem was that for serveral API functions, only one implemention is used. For example the event helpers such as blur(), click(), focus(), etc. that fire events are the same function in jQuery. For these, I've just written a generic XML comment.

I'll be speaking at Boise Code Camp on March 8th about using jQuery with ASP.NET. It will be mostly an introduction, with a walk-through on changing a plain old contact form, into a fancy-schmancy AJAX one using jQuery. So if you're around stop by and say hi. This was my first blog post, and Code Camp will be my first speaking engagement so some things may still be a little rough around the edges. The nice thing about Code Camp is that you don't have to be invited to speak :)

Update 5/20/2008

jQuery 1.2.4 was released yesterday. I just posted the updated jquery-1.2.4-intellisense file.

Update 5/21/2008

jQuery 1.2.5 was released today. jQuery 1.2.4 was a bad build. I just posted the updated jquery-1.2.5-intellisense file.