Now I’ve Heard of Vendors Not Playing Nicely Together…

…but this is ridiculous!

This is what happens to a can of Pepsi if you put it in a portable Coke refrigerator:

The Pepsi can exploded behind me in my office.  It blew the door open on the fridge and sprayed all over the contents of the cooler, the latch mechanism and the into the seals.  The carpet had nearly a full can of Pespi soaked into it in about 2 seconds.  The fridge door is now quite hard to open, even after repeated washings.  I even used soap.

Embarrassingly enough, I nearly ended up flat on my back on the floor.  I was startled (it was a lot louder than you would think) and I nearly rolled off the exercise ball I use as a chair.

What made the Coca-Cola refrigerator detonate a can of Pepsi? Was it malicious anti-competitive measures?

Well, that would certainly be a more interesting story. Sadly there is no blue versus red to report here.  But do heed my experience-born advice: when using a portable refrigerator and storing carbonated beverages, ensure the operating switch on the back is set to “Cool” and not “Heat”.

Unless, of course, you are trying to blow the door off with an exploding can of boiling Pepsi.

Troubleshooting AJAX Pages in ASP.NET MVC

Drubbing through some work this morning I came across an error while trying to implement some AJAX on an ASP.NET MVC web page.

Microsoft JScript runtime error: 'Sys' is undefined

I had added my script references with absolute paths to the Site.Master page, so I thought I had my basis covered.  To confuse things further, I would get the error message hit ‘Ignore’ and then the expected result would be rendered on a new page.

Defining ‘Sys’

Unfortunately I was barking up the wrong tree when I was trying to Bing an answer up.  The error message, while absolutely true, didn’t actually reveal the root of the problem.

Searching for this error message ends up with pages of early AJAX builds, people talking about pre-release software and links to ScottGu’s blog on how to remove preview versions of Microsoft’s AJAX libraries.

I’m working in Visual Studio 2010 Beta 2, and have other pages running AJAX just fine, so I was pretty sure I had no compatibility issues with earlier versions of AJAX libraries.

What I Missed

I like shortcuts and speed-ups as much as possible.  It turns out that I dragged the JavaScript files into my header, giving me this:

Note that the above code actually isn’t a problem.  But I have a nasty habit of switching everything to absolute paths, so I did this (notice the ~):

…which of course would be fine if there was something that was actually processing the path.  Unfortunately I got this far (and a lot further) without running the page or making AJAX calls, so I put this little tweak out of mind.

The problem, of course, is that the path can’t be resolved for the browser to locate and download the JavaScript file.

Using Absolute Paths for JavaScript src Attributes

The fix is actually quite simple.  If you want to use absolute paths, just take advantage of the fact that the master page is run through the compiler and the path can be resolved quite easily:

Other Things That Indicate Path Problems

There is another symptom of not being able to resolve the src file.  If you’re not debugging you won’t get the error messages, but your browser will render the output of the AJAX call as a new page.  You might want to check your script paths if that is the case.

One other give-away is by checking the Solution Explorer while debugging.  The debugger inserts a Script Documents folder at the top of the solution and shows all the loaded documents.

If the JavaScript files you anticipate to be there aren’t, this would be a good answer to why you are getting the “'Sys' is undefined” error.

Bug, or Implementation Problem?

A problem with implementation might not always be a bug.  I’m not sure which this one falls into, because it’s two competing features that are designed to help, but almost make each other less useful in certain situations.

Box Selection and Multi-Line Editing in Visual Studio 2010

By now, you’ve likely seen Brittany Behrens and teams’ implementation of Box Selection in the VS2010 IDE.  It allows you to modify your selection based on screen real estate (rather than characters and lines) and then edit the selection in intuitive ways.  You can see Brittany’s walkthrough here and my lovin’ it here.

Where it Falls Short

Unfortunately, as rosy as it is, I don’t think it’s yet been fully implemented…or at least it doesn’t go as far as it could.

When working in the HTML editor in Visual Studio 2010, the box selection feature works brilliantly until you try to close tags.  What you end up with is a poorly-formatted HTML document as a result of the multi-line editing feature.

That’s because it butts heads with the auto-complete feature on HTML tags.  If you were trying to get a bunch of anchored list items into an unordered list, for example, the output becomes:

As you close the last HTML tag, only the last line item is properly completed, leaving all other lines non-compliant.

Is it a Bug?

I don’t think you can classify this as a bug, however, as it’s just supplemental functionality that is, perhaps, not being used as originally intended.  If, however, multi-line editing is to server more than just code files and classes, and the HTML editor was in-scope for the feature, this could be classified as a defect.

I’ll leave that up to the smarter-folks-than-I on the IDE team.

Thankfully, the workaround is built into the feature ;o)

All you need to do is reselect the boundary space (between the characters) with box selection, and then complete the tag manually.  Multi-line editing takes over and lets us complete (in the example above) all four lines at once.

Visual Studio 2010 Debugging Tips

I continue to find gems scattered across Microsoft Visual Studio 2010; these ones are from the debugging story in the code editor window and are largely made possible as a result of Microsoft deciding to use WPF as their display engine for the IDE.

Here are a couple of very cool tips to help yourself out while debugging in Visual Studio 2010.

Pinning Watched Variables

You can now hover over a variable or object and pin it to the debug window.  This expands on the idea of watches and puts the data right in the source code editor.  You’ll see the power of this the first time you’re trying to see what’s happening to a set of data or variables through a loop. 

Hit the thumb tack on the right to “pin” the variable.

Combine pinning with conditional breakpoints and you have some very powerful scrubbing capabilities.  This is essential in my work as I am eternally sifting through 3500+ rows of data, looking for non-conforming values and objects.

Debug Comments

Once pinned, you can also add comments to your watched variables.  Note that in the left-hand column of the editor there is a corresponding thumb tack (you’ll need that for later use).  There is an expander in the mini tool window for your pinned variable that reveals a comment text box for you. 

The comments are persistent from session to session, so the next time you run your code you’ll see what you’ve previously typed.  This is great stuff.

Out-of-Debug Experience

Even better is that those debug comments stick around into your post-debug experience.  When you finish debugging and return to your code editor the thumb tacks hang around.  Hovering over a thumb tack reveals the pinned variable or object and shows the last value displayed in the debug session as well as your comments.

This works across source code files and is a real improvement over the tried-and-testing watch window: rather than a slew of watches from across a solution, variable values stay in context to the code you’re reviewing.

Get Good at Debugging

I swear that the single most beneficial thing you can do as a programmer is learn to use your debugger.  This is even more important than test-driven development and writing unit tests.  I have worked with too many “senior” programmers who don’t know how to attach to a running process or how to use breakpoints and watches to help solve logic or transformation problems.

These tips are hopefully an extension to your debugging tool bag.

Yowsers…Bing Maps is the new Black

The new version of Bing Maps (still in Beta) has been built from the ground up on Silverlight.  They’ve integrated not only the features from the original maps software, but also way better image streaming, smoother scrolling, Photosynths, and…wait, did I just say Photosynths?

Oh yes, I sure did.

That’s pretty cool stuff, right there. 

Deep Integration for Developers

Along with the built-in things that are pushing the envelope of what we will expect from mapping software comes this integrated platform that developers can leverage to enhance (or pervert) the mapping experience.

There appears to be 16 current applications that are tuned-in to the user’s current view, coming from a variety of application providers.  Some of the applications, such as Twitter Maps by Bing, are actually doing some pretty cool things to leverage streams of data.  I zoomed into Union Square in New York City and began to see tweet indicators, some adorned with plus signs.  When you hover over those tweets, they cleverly expand to reveal via animation that multiple tweets have come from the same location.

Also interesting is that you can refine your search to only include tweets about certain keywords, topics or Twitter users.  Hrm…not too far from a dating service and nearly crosses the line to stalking service.

Now, on a tangent, it sort of makes me wonder if we aren’t heading into the age of reverse-Orwellianism. Rather than Big Brother watching where you are, where you go, people are actually broadcasting this information freely and readily to the world?  Weird.  I wonder if they even know they’re doing it…have we become that narcissistic?

Oh wait.  I guess I’m blogging, aren’t I?  Perhaps we are.

</tangent>

Some application developers are “getting it”, too, by providing baked-in examples of how their software works and in which contexts.  So, the travel-oriented web cam application has a list of popular (or selected) web cams and will take you right to the place on the globe where the camera is hosted from.  From there, you see all the other served web cams in the area and can view live images from those.

General Shiny-ness

The features flow together well and when you get into the apps side of Bing (are they called Map-apps?) you can start to see some really interesting convergence.

The animations can be quite smooth, though the experiences are always the same.  For example, when you use the Hotel Finder application when focused on an area, it will zoom out, pan over and zoom back into the next hotel you click on.  This is nice, as it give you a sense of spatial relationship to the two locations.  However, when you do a search in the Bing bar, the locations returned are located by a simple pan animation (and it’s really fast on my PC) so you lose a little of the context to the distance.

I must say, however, that overall this is a very slick products as far as betas go.

Image troubles…

…just switching over to a new web server and having a little difficulty posting images.  Apologies if you’re not seeing images on the blog for the next little while…

Coding for Christmas Cheer

Our office has decided this year to take part in the local Christmas Cheer Registry.  Families sign up, requesting a food and goods hamper, and then people or organizations attempt to fill all the needs of the community.  It really is a great cause.

Merry ASP.NET MVC to You

The MVC framework that is now available for ASP.NET is quite powerful.  Last night I was able to create a web-based application for our company where we can input the items, allow our staff to “claim” the items (indicating that they will donate them) and keep track of when the donations have been brought in.

While it’s not by any means fancy, I was able to implement all features in about an hour.  After sending out the email to invite others to participate, we nearly filled the list (and it looks like we’re going to adopt another family!).

LINQ to Christmas Chicken

What would otherwise be a chore to develop was made quite simple with LINQ functionality.   This is an extremely simple data model, with only two tables.  I used an mdf in the App_Data directory rather than a full-blown SQL Server Deployment.

LINQ to SQL starts things off for us nice and easy to give us a simple data access layer.  Because the dbml tools end up generating partial classes, I was able to easily extend the model to add properties to the Donations data.

For the purposes of this site, a hamper item is considered ‘claimed’ when a name is assigned to the item.  While there is no Boolean value saved in the database, the model (and subsequently the auto-generated Views) is easily adapted to provide this information at the class level.  Now, I have an easy way to test for claimed or unclaimed hamper items without having to check for nulls.

MVC – Making it Viable for Christmas

…but also known as Model-View-Controller.  It’s one of the oldest recognized patterns but it is also an entirely different direction from the Page-Controller experience we’ve had since the inception of ASP.NET.

Without taking into account the recent addition of Areas in MVC, you can think of the organization in this way: there are three folders, one each for your Models, your Controllers and your Views.  The Models are the objects you are working with.  The Views are what the user looks at.  The Controllers respond to user input, build up the models (or load them) and send them back with the appropriate View.

There will obviously be larger projects in your future, but for ours I knew we’d hit a limit of 8-10 views and therefore just elected to use the default Home controller.  I stripped out account management and opted to use the domain name of the user to simplify even further.  There is no about page and very few management pages.

Creating the views was almost as simple as creating the LINQ to SQL diagram.  Visual Studio 2010 has integrated some editor tooling that picks up on code cues and prompts you for the magic.

To access the Add View wizard you simply right-click in the code editor for your controller.  The view name is pulled from the controller method where you clicked – in my case, AddDonation was the name of my method – but you can also customize as you feel is appropriate.  For my view I have also asked the wizard to use a template and create a draft of my data class Donation.  The template is driven from my View content selection “Create”, which stubs out a form for new records using the fields from my model.

Christmas Cheer in an Hour

There you have it.  A total of 1 controller, two classes in my model (one of them the DBML, so it was created with the designer), and a combined 10 views – all of which were largely auto-generated – and we’re well on our way to helping out a family for Christmas.  In fact, as I finish this note there are only two items left on the list and almost half of the items have already been brought in.

Though it may be early, this geek wishes you the Merriest of Christmases this year.