Visoft, Inc. Blogs

Book Review – Manning The Art of Unit Testing

Damien White — Wed, 30 Sep 2009 15:57:11 -0500

To some, “unit testing” is a four letter word. While it’s unfortunate, the feeling is justified by poor experiences, lack of knowledge, and so on. Personally, I’ve had mixed experiences with unit tests. I’m sure many of you have encountered similar situations. After reading The Art of Unit Testing by Roy Osherove, I feel far more confident in not only understanding unit tests, but also the best practices for implementation. If this book had only been written years ago, maybe all those poor unit testing experiences would have never happened.

The fundamental thing that I think is most misunderstood about unit testing is simply not understanding what a unit test is. In fact, Roy just recently posted an updated definition of how he would classify a unit test on his blog. Of course a definition isn’t always enough, and in his book, Roy starts off by fully explaining all the aspects of what a unit test should be and the basic outline for how to succeed. I would highly recommend that you visit his book’s webpage (http://manning.com/osherove/) and download the sample first chapter.

This seriously may be the best book ever written on unit testing. I understand that “the best” is a strong statement, but this book is really the perfect package. Let’s look at what makes this such a winner…

Come On, The “Best”

Of course, don’t just take my (or BOO’s, or Tim’s) word for it. Obviously, check out other’s reviews on Amazon as well. However, there are many points that justify my opinion:

No Fluff - It’s a slimmer book (320 pages), but packed with information. The size of the book makes it very approachable, and it’s one of those books that you may want to read a few times to make sure everything really sinks in. It’s a book you can recommend to just about everyone, regardless of their background.
No Preaching - One key thing that sets this book in a class by itself is the fact that it doesn’t focus on specific methodologies (like TDD), but is simply a guide to unit testing. The book doesn’t assume anything or force any one way of practicing the art. Fully devoted to TDD, great. Could care less about TDD? This book is for you as well.
Independent – Despite the fact that Roy works for Typemock, the majority of examples found in the book use open-source “mocking” or isolation frameworks. Throughout the book, no one tool is pushed over another. Roy does a good job of going over the pros and cons of many different tools, from many vendors.
Inspiring - From the initial chapter on, this book not only educates, but it truly inspires. This is one of those books that gets you ramped up to do something. Whether it is starting unit testing within your organization, or enhancing existing tests, you’ll want to start right away. It’s that feeling we geeks get when a new version of software is released. I know I’m not the only one who goes to software conferences and such, and feels like jumping head first into the latest and greatest.

Chapters

This is one of the few books where each chapter matters. Even the appendices are packed with important information. You can see overviews of each chapter anywhere, so I won’t bore you with every little detail here. But a few of the chapters really stood out.

Chapter 4, Interaction testing using mock objects – We’ve all heard the terms “mocks” and “stubs,” but do you know the difference? Many books refer to these, but the terminology can be confusing. After Chapter 4, you’ll have a good grip on what’s what. The explanations and best practices in this chapter, set the base line for the rest of the chapters. It would be nice if everyone could use the “common” definitions of things, but unfortunately, this practice isn’t always followed when it comes to discussions of unit testing.
Chapter 8, Integrating unit testing into the organization - This topic in and of itself could be described as an “art.” You may believe in something, but conveying the belief to others isn’t your typical walk in the park. I was very impressed that this important issue was covered in the book.
Chapter 9, Working with legacy code – Of course we can’t always be working on brand new development. This chapter gives a good introduction and solid approaches for dealing with legacy code. This is another one of those chapters that’s refreshing to see within a book of this nature. I like how the book branched out into topics that aren’t frequently discussed. However, this topic is really one of those that could use an entire book written about it, and Roy recommends Michael Feathers, Working Effectively with Legacy Code. Gag, legacy code, right? It’s a reality, and remember, that new shiny thing your working on will most likely end up as someone’s headache soon enough!

More From Roy

After reading his book, I immediately started seeing what else Roy has been up to. There are two great resources that Roy started, 5whys.com and the Team Leadership in Software group on Google. Both will help you in working with and leading software teams. On the unit testing/TDD front, be sure to check out Roy’s videos. You can also check out Roy’s other sites, http://osherove.com/, http://iserializable.com/, and http://artofunittesting.com/.

Silverlight 3 NavigationCacheMode To The Rescue

Damien White — Tue, 22 Sep 2009 21:29:46 -0500

I’ve been lucky enough to work on a new project for a client involving Silverlight 3 and the Silverlight Virtual Earth CTP. One reoccurring issue that keeps coming up is performance, and I’m always looking for ways to balance functionality with speed. In the app we are loading up a Virtual Earth map and populating it with data (nothing new). We have a fair amount of data being loaded for various functions and layers. Users are able to show and hide layers as well as interact with the map’s basic functions (zoom, pan, etc). Users can then navigate to other areas based on selections from the map page.

Since we’re using SL3, we’re using the Navigation Framework to navigate between “pages.” If you’re not familiar with the Navigation Framework, check out Martin Mihaylov’s article, or if you prefer videos, be sure to check out Tim Heuer’s video on the topic. Now let’s move on to the problem, and a solution…

The Problem

This is actually a two pronged problem, with thankfully a single solution. One thing we wanted was to have the Virtual Earth map (and the page) “remember” what you were doing. So let’s say you had zoomed in and panned over to Connecticut, you then selected something from the map that redirected you to another Silverlight page. Once you were done, you clicked on the navigation to go back to the map page. There were two problems here. The first was that navigation was slow. The map has a lot of layers that are being bound with various pieces of data. The map would rebind these layers since it was essentially a reload. The second problem was that all the zooming and panning were totally lost, since the page reloaded the default view.

As an aside, if you are interested in binding layers on the Virtual Earth map, look no further than Michael Scherotter’s awesome Binding Properties for the Virtual Earth Silverlight Control project (there is also a demo of these in use).

So of course, these two issues really weren’t something that we wanted to put in front of a customer, so the hunt for a solution was on.

The Solution

Thankfully within the Navigation Framework there is a fairly simple solution that solved both of these problems, however it’s not the most obvious if you aren’t sure what to search for. After a lot of searching, I came across the Page.NavigationCacheMode Property on MSDN. This property has three settings: Disabled (the default), Enabled, or Required. The usage is simple, just append the property to your Page XAML like so:

<navigation:Page 
    x:Class="Samples.SampleApp" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
    Title="Sample Page" 
    NavigationCacheMode="Enabled">

    <!-- Content -->
</navigation:Page>

That’s it.

The difference between Required and Enabled is that with Enabled, the cache could be flushed based on the CacheSize setting.

In our app, we set the property to Required, which means the page will be cached regardless of the CacheSize property.

Hopefully, if you are looking for something along the lines of “reuse a page” or “don’t reload” associated with the Navigation Framework, you’ll come across this post.

ASP.NET 4.0 AJAX Issues

Damien White — Thu, 27 Aug 2009 20:14:58 -0500

I’ve been using ASP.NET AJAX 4.0 quite a bit lately in ASP.NET 3.5 applications. I encountered two issues tonight, and I hope this post saves someone some grief.

The first problem has to do with referencing the ASP.NET AJAX 4.0 library within an ASP.NET 3.5 application, and the second was a surprising data binding issue using the DataView.

If you are looking for more information on ASP.NET AJAX 4.0, be sure check out my other articles on the site.

Issue 1 – The ScriptManagerProxy and CompositeScripts

The first issue I encountered was a client side error when using the DataView on a content page in my ASP.NET 3.5 SP1 application. This site utilizes master pages, so I’m using a WebForm, otherwise I probably would have just gone with a plain old HTML page. Regardless, since this is an ASP.NET application and the ScriptManager is declared in the Master page, I added the ASP.NET 4.0 AJAX scripts to a ScriptManagerProxy (instead of the ScriptManager itself). The code for the ScriptManagerProxy looks very similar to that for the ScriptManger.

<asp:scriptmanagerproxy id="smp" runat="server">
    <scripts>
        <asp:scriptreference scriptmode="Inherit" name="MicrosoftAjax.js" path="~/scripts/MicrosoftAjax.js" />
        <asp:scriptreference scriptmode="Inherit" path="~/scripts/MicrosoftAjaxTemplates.js" />
        <asp:scriptreference scriptmode="Inherit" path="~/scripts/MicrosoftAjaxAdoNet.js" />        
    </scripts>
</asp:scriptmanagerproxy>

I then proceeded to run the page, getting two errors, Type._registerScript is not a function for both MicrosoftAjaxTemplates.js and MicrosoftAjaxAdoNet.js. Seems like MicrosoftAjax.js isn’t being loaded. When using ASP.NET AJAX 4.0, we need to ensure that it uses the 4.0 version of MicrosoftAjax.js. Looking at FireBug’s Net tab, I confirmed that the 4.0 version of MicrosoftAjax.js wasn’t being loaded. I didn’t understand why not, until I revisited the Master Page. The ScriptManager code was using a CompositeScript, useful to save a bit of bandwidth, but that ended up causing the problem. Here’s the offending code:

<asp:scriptmanager id="MasterScriptManager" runat="server">
    <compositescript>
        <scripts>
            <asp:ScriptReference name="MicrosoftAjax.js"/>
            <asp:ScriptReference name="MicrosoftAjaxWebForms.js"/>
            ... Additional script references ...
        </scripts>
    </compositescript>
</asp:scriptmanager>

By adding the 3.5 MicosoftAjax.js to the CompositeScript, it made it so the ScriptManagerProxy couldn’t load the correct version of that file. I simply removed that ScriptReference from there and everything loaded correctly. Of course this means that MicrosoftAjax.js isn’t being compiled into a nice composite script package, but if that’s what needs to be done to use the 4.0 scripts (at least for now), that’s fine.

Issue 2 – Incorrect Field Name

I found this to be very odd behavior. If you add binding syntax for something that doesn’t exist in the data context, the DataView control just flat out won’t render any data. No error, just no content. This seems silly. I would expect the DataView to render the content it can, and use a null or empty string for things it can’t bind.

So let’s say you are using ADO.NET Data Services and the object coming back has a couple of fields like Name, Address1, and Address2. Then you try to bind to {{ Address }}, which doesn’t exist in the object (whoops, forgot the “1” after that field), you end up looking at very empty HTML. Nothing gets rendered. Stupid mistake, yes (wouldn’t it be nice to have Intellisense when binding), but a very bizarre way of handling this sort of thing. Lesson here, if you don’t see any content when the template loads, check the fields you are binding to.

Technorati Tags: ASP.NET AJAX 4.0

ASP.NET AJAX 4.0 and the ScriptManager Control

Damien White — Mon, 01 Jun 2009 19:15:48 -0500

I have been using ASP.NET AJAX 4.0 quite a bit lately, as I’m sure most of you are aware from my recent posts. In those posts, I used standard HTML script references to show that ASP.NET AJAX is not reliant upon ASP.NET. I realize that many of you are in fact using ASP.NET, and today we will take a look at using the ScriptManager.

First we’ll look at using the Preview 4 scripts within an ASP.NET 3.5 application (with the ScriptManager of course) as well as using client templates and ADO.NET Data Services with the ScriptManager in ASP.NET 4.0 (Beta 1). After that, we’ll take a closer look at some of the new features of the ScriptManager in ASP.NET 4.0.

Preview 4 and the ASP.NET 3.5 ScriptManager

In my posts on ASP.NET AJAX 4.0 so far, I used standard HTML script references (as stated earlier). However, what if you wanted to incorporate the new ASP.NET AJAX 4.0 scripts with a ScriptManager. I tried this in a recent ASP.NET 3.5 SP1 project, and ran into some issues getting it all to work out. Thanks to this blog (and Bertrand LeRoy), I found the solution.

<asp:scriptmanager id="sm" runat="server">
    <scripts>
        <asp:scriptreference scriptmode="Inherit" name="MicrosoftAjax.js" path="~/scripts/MicrosoftAjax.js" />
        <asp:scriptreference scriptmode="Inherit" path="~/scripts/MicrosoftAjaxAdoNet.js" />
        <asp:scriptreference scriptmode="Inherit" path="~/scripts/MicrosoftAjaxTemplates.js" />                
    </scripts>
</asp:scriptmanager>

Client Templates and ASP.NET 4.0 ScriptManager

If you are using Visual Studio 2010 (currently in Beta 1) and you want to use client templates (e.g. DataView) or ADO.NET Data Services, you may think you can just add a ScriptManager to the page (at least I initially did) and everything will work. This isn’t the case. These are new features of ASP.NET AJAX , so you need to add them as ScriptReferences. I’m not sure if this will change for the release, but in an effort to keep the size down, I’m thinking this may be the way it stays. Not that big of a deal, just something to be aware of.

<asp:ScriptManager ID="sm" runat="server">
    <Scripts>
        <asp:ScriptReference Name="MicrosoftAjaxTemplates.js" />
        <asp:ScriptReference Name="MicrosoftAjaxAdoNet.js" />
    </Scripts>
</asp:ScriptManager>

ASP.NET 4.0 ScriptManager - Activating Elements Declaratively

In my previous posts, you’ve seen both declarative and imperative examples using ASP.NET AJAX components and controls. To refresh your memory, let’s look at the “Simplest Live Binding Example” from my data binding post. This snippet uses live binding and client templates (the DataView). If you need a refresher on the basics of the DataView and using it declaratively, be sure to check out my client template post.

<body xmlns:sys="javascript:Sys"
      xmlns:dataview="javascript:Sys.UI.DataView"
      sys:activate="simpleForm">

    <div id="simpleForm" class="sys-template"
        sys:attach="dataview" 
        dataview:data="{{ { name:'' } }}">
        Name: <input id="name" type="text" value="{binding name}" /><br />
        <span id="nameDisplay">{binding name}</span>
    </div>
</body>

One of the keys to getting this to work is to have it activate and bind when the page loads. In the declarative syntax, this is achieved through the sys:activate attribute found on the body tag. In some instances, such as working with a content page, you may not have access to the body tag. In this case the new ClientElementsToActivate property of the ScriptManager and ScriptManagerProxy controls, helps to alleviate this problem. The ClientElementsToActivate property accepts a comma-delimited list of elements to activate, just like the sys:activate attribute does. Taking the previous snippet as an example, we can see how using this new property can be used with the ScriptManager (note I have included the ScriptReference since this sample requires the DataView, not because it is needed to use the ClientElementsToActivate property).

<asp:ScriptManager ID="sm"  runat="server" 
      ClientElementsToActivate="simpleForm">
    <Scripts>
        <asp:ScriptReference  Name="MicrosoftAjaxTemplates.js" />

    </Scripts>
</asp:ScriptManager>
 
<div id="simpleForm" class="sys-template"
    sys:attach="dataview" 
    dataview:data="{{ { name:'' } }}">
    ...
</div>

ASP.NET 4.0 ScriptManager – ASP.NET AJAX Enhancements

A new feature of the ScriptManager in ASP.NET 4.0 is the ability to use only parts of the ASP.NET AJAX Library. In addition, you can also use the ScriptManager without using any of the ASP.NET AJAX framework. You can now get the benefits from ScriptManager such as support for debug / release modes, localization, script combining, etc, without having to have ASP.NET AJAX scripts rendered by default (as it is now in 3.5).

In ASP.NET 4.0, the default behavior is the same as the current behavior in ASP.NET 3.5, meaning the complete ASP.NET AJAX library is included by default. Remember from earlier that this does not include MicrosoftAjaxTemplates.js or MicrosoftAjaxAdoNet.js (at least in Beta 1).

The ScriptManager control has a new property, MicrosoftAjaxMode, which allows you to override the default behavior. The settings available for the MicrosoftAjaxMode are:

Enabled – The default value, all Microsoft AJAX script are included. This is the same as the current behavior (e.g. ASP.NET 3.5).
Explicit – This allows you to pick and choose what scripts are referenced. You need to make sure that you include all scripts that have dependencies on one another.
Disabled – All the the Microsoft ASP.NET AJAX scripts are disabled and no scripts are referenced automatically.

If you use Explicit mode, the following Microsoft AJAX scripts are available for reference:

MicrosoftAjaxCore.js
MicrosoftAjaxComponentModel.js
MicrosoftAjaxSerialization.js
MicrosoftAjaxGlobalization.js
MicrosoftAjaxHistory.js
MicrosoftAjaxNetwork.js
MicrosoftAjaxWebServices.js
MicrosoftAjaxApplicationServices.js
MicrosoftAjaxTemplates.js (New for ASP.NET AJAX 4.0)
MicrosoftAjaxAdoNet.js (New for ASP.NET AJAX 4.0)

For more information on the new functionality as well as the dependencies for the Microsoft AJAX Library scripts, refer to the ASP.NET 4.0 and Visual Studio 2010 Web Development Overview whitepaper.

More ASP.NET AJAX 4.0 Reading

If you are interested in ASP.NET AJAX 4.0, and have missed my past posts, be sure to check out:

Technorati Tags: ScriptManager,ASP.NET,AJAX

ASP.NET 4.0 AJAX – Preview 4 – Data Binding

Damien White — Wed, 27 May 2009 10:48:29 -0500

Throughout the course of my introductory posts on ASP.NET AJAX 4.0, we looked at the new DataView control as well as the Sys.Observer class, which brings the Observer pattern to plain JavaScript objects. The new ASP.NET AJAX release is very exciting offering powerful new features to take AJAX enabled applications to a new level. In this post, we’ll look at another exciting feature of ASP.NET AJAX 4.0 known as “live bindings.”

You may remember that we looked briefly at live bindings in the client templates post, but for those examples I used one-way / one-time bindings. Today, we’ll take a closer look at live bindings and see how two-way live bindings removes the one-way / one-time binding restriction allowing us to update bound elements on our page automatically when the underlying data changes.

Again, in this post, I’ll be using Preview 4 of the ASP.NET AJAX Library, which can be downloaded from CodePlex. The Preview 4 version can be used in your applications today (e.g. ASP 3.5, HTML). Keep in mind that these components are still in "preview" mode (meaning no Microsoft support), though they are usable at your own risk. For more information, you can check out the license on CodePlex.

Source Code

You can download and run all of the sample code that you find in this post. The source code contains a Web Site project and uses .NET 3.5 SP1 for the server-side components (e.g. Entity Framework, ADO.NET Data Services) and SQL Server Express 2008.

The Simplest Live Binding Example

Let’s start with a very simple example of live binding in action. In the first snippet, we’ll look at binding a very simple client template (the Sys.UI.DataView) using the declarative creation and binding syntax.

<body xmlns:sys="javascript:Sys"
      xmlns:dataview="javascript:Sys.UI.DataView"
      sys:activate="simpleForm">

    <div id="simpleForm" class="sys-template"
        sys:attach="dataview" 
        dataview:data="{{ { name:'' } }}">
        Name: <input id="name" type="text" value="{binding name}" /><br />
        <span id="nameDisplay">{binding name}</span>
    </div>
</body>

If you read my client template post, most of this code should look familiar. There are a couple of new things in this snippet however. First, you probably noticed the {binding name}. This is the live binding syntax. We’ll look closer at this a bit later, but if you’ve used WPF or Silverlight the syntax should look familiar. The one other thing that I’ve added to make this work is the dataview:data attribute. The {{ }} syntax in this attribute simply defines an inline expression, and inside of that, I’ve created an inline JavaScript object, which contains one property ‘name’ and the value is just an empty string (I could have just as easily used null). The reasoning behind this is that the DataView needs to initially bind data to something, so based on our binding expressions, both the input and span will be initially filled with the empty “name” property.

When you load this page, and enter your name in the textbox, the span will be updated with what you entered in the textbox after you tab away from it. You can see this in action in the clip playing off to the right.

Using Sys.Binding Imperatively

In the last example, we used a DataView along with the binding markup. The binding markup {binding propertyName} and {{ propertyName }} can only be used inside client templates (the DataView). What if you didn’t want to use a DataView for something like that last example? Well it’s possible, thanks to the way that binding is handled in ASP.NET AJAX. The binding markup maps back to the component Sys.Binding, which in turn uses Sys.Observer. We can harness the power of Sys.Binding directly if needed. Let’s see how we would accomplish the same example as before, but this time using Sys.Binding directly. We can do this declaratively (like the DataView example from above) or imperatively using JavaScript. First, we’ll look at the imperative code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!-- Script references removed for brevity -->   
    <script type="text/javascript">   1:  
   2:         Sys.Application.add_init(function() {
   3:             $create(Sys.Binding,
   4:             {
   5:                 source: $get('name'),
   6:                 path: "value",
   7:                 target: $get('nameDisplay'),
   8:                 targetProperty: "innerHTML"
   9:             });
  10:         });
  11:     
</script>
</head>
<body>
    <div id="simpleForm">
        Name: <input id="name" type="text" /><br />
        <span id="nameDisplay"></span>
    </div>
</body>
</html>

You’ll notice there isn’t much going on in the HTML this time since this isn’t declaratively bound.

Looking at the JavaScript block, I’m using the $create shortcut in order to wire up the Sys.Binding component. Since this is a component and not a control like the DataView, the only parameters that need to be passed to $create is the type (Sys.Binding) and properties for the Sys.Binding component (a JavaScript object). The $create call is simply creating an association between the textbox (input) and the span. Again, the results of this code are exactly the same as the initial example that we looked at.

Let’s take a closer look at the properties being set in the last example:

source	The source object (the textbox in our case). Note: This is using $get in order to access the element by its Id.
path	The property name or path to the source property. This is the property value that will be sent to the target (the value property of the textbox in our case). I would have expected this to be called sourceProperty since there is a targetProperty, but this follows the WPF convention.
target	The target that will be updated based on the source (the span in our case). Again, notice the $get.
targetProperty	The property name or path for the target. In short, what you want to set (innerHTML in our case).

You can find a full list of the properties for Sys.Binding on MSDN.

Using Sys.Binding Declaratively

You just saw the imperative creation of Sys.Binding, but if you’d rather declarative syntax, then this is the example for you. I’m working off the same example so that you can easily see the similarities and differences between the snippets.

<body xmlns:sys="javascript:Sys"
      xmlns:binding="javascript:Sys.Binding"
      sys:activate="simpleForm">
    <div id="simpleForm">
        Name: 
        <input id="name" type="text" 
            sys:attach="binding"
            binding:source="{{ $get('name') }}"
            binding:path="value"
            binding:target="{{ $get('nameDisplay') }}"
            binding:targetProperty="innerHTML"
        />
        
        <br />
        <span id="nameDisplay"></span>
    </div>
</body>

Comparing this code to that of the imperative version, it should be pretty easy to pick out the similarities. Instead of defining the properties for the Sys.Binding component in code, they are now added as attributes to the textbox. Also, the sys:attach coupled with the xmlns:binding=”javascript:Sys.Binding” replaces the first parameter in the $create call from the imperative example. Other than that, there shouldn’t be anything here that looks strange, if it does, refer back to my client template post.

Live Binding Syntax

Now that you’ve seen an example of live binding in action, let’s take a minute and look at the options available to us with live binding.

The first is the binding type defined in MSDN as an “inline expression evaluation.” This is commonly referred to as one-way/one-time when talking about binding, but the double curly braces syntax is also used to evaluate expressions (for example the attribute binding:source=”{{ $get(‘name’) }}” from the last example). When it used as a binding type, such as <span>{{ name }}</span>, this simply means that expression is only handled when the template is bound/re-bound.

Next up is one-way and two-way binding. The syntax for these bindings is {binding propertyName}, as you’ve seen before. The syntax is the same since the determination of using one-way or two-way is based on the element itself. One-way binding is the default mode of binding for HTML properties and context. For input controls however, two-way binding is the default. You can see this in action in the first example we looked at, binding within the DataView. As a refresher, here is the pertinent snippet again:

Name: <input id="name" type="text" value="{binding name}" /><br />
<span id="nameDisplay">{binding name}</span>

If the default behavior isn’t desired, for example if you only wanted one-way binding on a textbox, you can specify the mode of the binding. This can be done within the inline markup as so:

Name: <input id="name" type="text" value="{binding name, mode=oneWay}" /><br />
<span id="nameDisplay">{binding name}</span>

We’ll look a bit closer at binding modes in the next section, but one thing to take away from the syntax here is that you can specify properties for Sys.Binding within the HTML markup. Another common property that you may set would be the source. For example, in a master-detail type setup where you have a master DataView and a detail DataView, you may have something along the lines of:

<div id="detailView" class="sys-template"
    sys:attach="dataview"
    dataview:data="{binding selectedData, source={{master}} }">

You see that syntax a bit later in the Master/Detail example. In addition to mode and source, another property that you’ll often see is the convert and convertBack properties. These allow you to call functions when either updating the target (convert) or updating the source (convertBack). For example:

<label>Inches: </label>
<input id="inches" type="text" 
    value="{binding num, convert=toInches, convertBack=toFeet }" /><br />
<label>Feet: </label><input id="feet" type="text" value="{binding num }" />

In this snippet the Inches textbox will call toFeet when updating the Feet textbox. When the Feet textbox is updated and the binding happens on the Inches textbox, it will first be converted to inches using the toInches method.

Binding Modes

In the last section we looked at the syntax for live binding, and I introduced the mode functionality. The binding modes come from the “enumerator” Sys.BindingMode and contains five options (similar to those in WPF). Let’s take a closer look at each one of them within the context of the HTML markup expressions. Remember these are simply just properties for the Sys.Binding class, so these are the enumerations you can use if you set the mode property via JavaScript instead of doing it in the markup.

Sys.BindingMode.auto

This is the default binding mode that you’ve seen already. Two-way binding on an input control, and one-way binding on a context-type elements such as spans. If for some reason you want to manually set the mode to auto, you can do this as well, but it’s not required.

<div id="defaultBinding" class="sys-template"
    sys:attach="dataview" 
    dataview:data="{{ { name:'' } }}">
    <label>Name: </label><input id="name" type="text" value="{binding name, mode=auto}" /><br />
    <label>Echo: </label><span id="nameDisplay">{binding name, mode=auto}</span>
</div>

Sys.BindingMode.twoWay

This is the default binding mode for input controls. In this snippet, I’ve explicitly set both inputs to twoWay, although I could have left the mode specification off since it is the default. In this snippet, when you update either textbox, the other one will be updated with the same value.

<div id="twoWayBinding" class="sys-template"
    sys:attach="dataview" 
    dataview:data="{{ { name:'' } }}">
    <label>Name: </label><input id="name1" type="text" value="{binding name, mode=twoWay}" /><br />
    <label>Echo: </label><input id="nameDisplay1" type="text" value="{binding name, mode=twoWay}" />
</div>

Sys.BindingMode.oneWay

Again, this is the default binding mode for properties and context-type HTML elements (e.g. span, div, etc). You can specify this mode on an input control in order to override the default two-way binding. In this snippet, when you update the Name textbox it will be displayed in the Echo textbox, but changing Echo won’t update Name since the Echo textbox is oneWay.

<div id="oneWayBinding" class="sys-template"
    sys:attach="dataview" 
    dataview:data="{{ { name:'' } }}">
    <label>Name: </label><input id="name2" type="text" value="{binding name}" /><br />
    <label>Echo: </label><input id="nameDisplay2" type="text" value="{binding name, mode=oneWay}" />
</div>

Sys.BindingMode.oneWayToSource

This binding works opposite to the last oneWay binding example. In this case, changes to the Echo textbox will update the Name textbox, but updating Name won’t change Echo.

<div id="oneWayToSourceBinding" class="sys-template"
    sys:attach="dataview" 
    dataview:data="{{ { name:'' } }}">
    <label>Name: </label><input id="name3" type="text" value="{binding name}" /><br />
    <label>Echo: </label><input id="nameDisplay3" type="text" value="{binding name, mode=oneWayToSource}" />
</div>

Sys.BindingMode.oneTime

In oneTime mode, the element will only be updated when the template is first instantiated. For this snippet, the Name and Echo textboxes will be updated with my name and will be bound to both textboxes since it is defined in the object literal being passed to the DataView. Changing the Name textbox in this case won’t update the Echo box.

<div id="oneTimeBinding" class="sys-template"
    sys:attach="dataview" 
    dataview:data="{{ { name:'Damien' } }}">
    <label>Name: </label><input id="name4" type="text" value="{binding name}" /><br />
    <label>Echo: </label><input id="nameDisplay4" type="text" value="{binding name, mode=oneTime}" />
</div>

The “Classic” Example: Master/Detail

Typically when looking up live binding, you’ll come across some kind of master/detail sample. To keep with the “tradition” we’ll work through an example using SQL 2008, the Entity Framework, and ADO.NET Data Services server-side, and the ASP.NET AJAX DataView client-side. Again, keeping with the trend of seeing how ASP.NET AJAX can be used outside of ASP.NET, the hosting page will simply be a standard HTML page. In this sample we will be keeping a list of blogs that we enjoy. We’ll add the blogs to the page one at a time, and we will persist the changes back to the database all at once thanks to ADO.NET Data Services.

Server-Side Code

First, we’ll start with a simple SQL 2008 Express Database that contains a single table named “blog.” The schema is shown in Figure 1.

Figure 1 – The Database Schema

Next up is the Entity Framework. Simply add an ADO.NET Entity Data Model to the project. I’ll name this BlogModel.edmx. I’ll then use the “Generate from Database” option when prompted. I’ve accepted the defaults for everything else. We now have a single entity based on the blog table. I’ve changed the EntitySet name to Blogs in order to make our service clearer when calling it, for example to get an item with an ID of 1, /BlogService.svc/Blogs(1) instead of /BlogService.svc/Blog(1) if I had left the default EntitySet name.

Figure 2 – The Blog Entity

Now that the database and the entity model are in place, the next step is to expose the entities via ADO.NET Data Services. To do this, simply add an “ADO.NET Data Service.” I’ve named my service “BlogService.svc.” Then we need to configure the service, which involves specifying our entities to expose and configuring the rules for our service. Since this is just a test service, I’ve opened all operations to all entities. In addition I’ve configured the service to use verbose errors, and to include the exception details in an error. In a production application, these settings should not be used, as we’re exposing everything to everyone.

[ServiceBehavior(IncludeExceptionDetailInFaults=true)]
public class BlogService : DataService<BlogsModel.BlogsEntities>
{
    public static void InitializeService(IDataServiceConfiguration config)
    {
        config.UseVerboseErrors = true;
        config.SetEntitySetAccessRule("*", EntitySetRights.All);
        config.SetServiceOperationAccessRule("*", ServiceOperationRights.All);
    }
}

Now that the server side is configured, let’s test it out in the browser. One thing you need to do before testing an ADO.NET Data Service is to make sure the “Feed View” is turned off in your browser. For the XML representation of the data, ADO.NET Data Services uses ATOM, which RSS feeds use as well. The browser, being helpful, will use the “Feed View” trying to “pretty” up the display of your service, when in fact we won’t see the raw XML data. To turn off Feed View in Internet Explorer, simply go to Tools >> Internet Options >> Content Tab >> Feed Settings >> Uncheck “Turn on feed reading view.” Now we can start browsing our service.

Calling the BlogService.svc directly, this will show us the collections available for us to use. Simply browse to “/BlogService.svc” in the root of the application. Next, let’s test the Blogs collection by browsing to “BlogService.svc/Blogs” and finally use “BlogService.svc/Blogs(1)” to access the entry with an ID of 1.

Figure 3 - Testing the ADO.NET Data Service

Client-Side Code

Now that the server work is done, let’s move on to the client code. The user interface will allow us to perform the standard CRUD (Create, Read, Update, Delete) operations using ADO.NET Data Services. We will list the blogs that are found in the database and add a snapshot of the site using a cool service I discovered called BitPixels.com. This site serves thumbnails of web pages without requiring a registration, which is perfect for a demo since you can download my sample code and run this on your machine without having to worry about registering to get it to work.

Here’s an example of it fully working:

An important thing to note on the example, changes aren’t persisted until they are saved back to the server. We’ll see how this is accomplished when we look at the JavaScript code.

The first difference with this example from the others that you have seen in my previous posts (Sys.Observer and Client Templates) is the JavaScript files being referenced. We’re still using MicrosoftAjax.js and MicrosoftAjaxTemplates.js, but in addition we need to reference MicrosoftAjaxAdoNet.js. This library allows us to work very easily with ADO.NET Data Services. The script references should look like the following:

<script type="text/javascript" src="scripts/MicrosoftAjax.debug.js"></script>
<script type="text/javascript" src="scripts/MicrosoftAjaxTemplates.debug.js"></script>
<script type="text/javascript" src="scripts/MicrosoftAjaxAdoNet.debug.js"></script>

Now, onto the HTML markup. There is a fair amount going on here, but some of it should look familiar to you. I’ve added line numbers to this snippet in order to easily refer to the code.

   1: <body   xmlns:sys="javascript:Sys"

   2:         xmlns:dataview="javascript:Sys.UI.DataView"

   3:         sys:activate="*">

   4:     <div class="tools">

   5:         <input type="button" value="Add" onclick="addBlog()" />

   6:         <input type="button" value="Save" onclick="BlogService.dataContext.saveChanges()" />

   7:         <input type="button" value="Reload"

   8:             onclick="$find('blogList').fetchData(null, null, Sys.Data.MergeOption.overwriteChanges)" />

   9:     </div>

  10:     <div id="blogList" class="sys-template"

  11:         sys:attach="dataview"

  12:         dataview:dataprovider="{{ BlogService.dataContext }}"

  13:         dataview:fetchoperation="Blogs"

  14:         dataview:ondataloading="{{ dataLoading }}"

  15:         dataview:autofetch="true"

  16:         dataview:selecteditemclass="blogSelected"

  17:         dataview:initialselectedindex="0"

  18:         dataview:sys-key="master"

  19:         dataview:oncommand="{{ dvCommand }}">

  20:         <div class="blogBlock" sys:command="Select">

  21:             <div class="blogTools">

  22:                 <div class="blogDelete" sys:command="Delete"

  23:                     sys:commandargument="{{$index}}">X</div>

  24:             </div>

25:

  26:             <img alt="{binding Name}" height="75" width="100"

  27:                 sys:src="{binding Url, convert=toSnapshot}" />

  28:             <hr />

  29:             <a href="{binding Url}">{binding Name}</a>

  30:         </div>

  31:     </div>

32:

  33:     <hr style="clear:left;" />

34:

  35:     <div id="detailView" class="sys-template detailsForm"

  36:         sys:attach="dataview"

  37:         dataview:data="{binding selectedData, source={{master}} }" >

  38:         <label>Name: </label><input type="text" value="{binding Name}" /><br />

  39:         <label>Url: </label><input type="text" value="{binding Url}" />

  40:     </div>

  41: </body>

Let’s go through the code in chunks

Lines 1 – 3: This shouldn’t be anything new, you first saw this when working with the DataView declaratively.
Lines 4 – 9: This section defines the buttons that allow us to Add, Save, and Reload.
- Line 5: For adding, I’m calling a custom JavaScript function which you’ll see in a moment, addBlog().
- Line 6: Using the ADO.NET Data Context, we can persist the changes back to the database. Instead of simply defining a variable (e.g. dataContext), I created a simple JavaScript object (BlogService) to hold the properties that we need to work with (dataContext, which is a Sys.Data.AdoNetDataContext, and an observable array “data” that is made observable with Sys.Observer.makeObservable). You’ll see this in the JavaScript code.
- Line 7 & 8: This input button reloads the data. This uses the method “fetchData” that is found on the DataView object. The $find shortcut gets the DataView from the blogList DIV element, allowing us to call fetchData. It takes four parameters, a success callback, failed callback, merge option, and a user context. For the sake of reloading the DataView, the first two parameters (the callbacks) are null since the DataView handles those for us. The third is a type of Sys.Data.MergeOption and we want to reload everything from the server. Finally, we don’t need to specify anything for the user context, so that parameter is excluded.
Lines 10 – 19: This is the setup of our “master” div. This displays the website thumbnails, contains a delete button, and allows us to select an item.
- Line 10: Nothing new here, just an id and a class of “sys-template.” Remember, this class needs to be on all of your DataViews and you should have a style defined as “display: none;” for this. Doing this permits the AJAX library to show the content only after it has been bound.
- Line 11: You’ve seen this many times before, we’re simply attaching the DataView “behavior” to the div.
- Line 12: Now we begin setting the properties we need for the DataView. Here we are telling the DataView to use a dataProvider. The provider here is a Sys.Data.AdoNetDataContext and is defined in our JavaScript code. I’ve assigned it to a simple object, “BlogService” to keep the global variables in one place.
- Line 13: The fetchOperation is used to define the entity set (from ADO.NET Data Services) that we want to display. There is only one in this example and that is “Blogs.” Recall we accessed this earlier using the browser (e.g. “BlogService.svc/Blogs”).
- Line 14: This is an important event that is being wired up dataLoading via the onDataLoading method. This fires when, you guessed it, the data loads. Here we’re calling a custom JavaScript function named “dataLoading” that I have defined in the page. Within this function that you’ll see in the JavaScript code below, the data is put into an observable collection. This collection is where our changes will take place and how the DataView and the live bindings actually do the automatic updates. All thanks to the Sys.Observer object.
- Line 15: You saw this back in my client templates post when using the WCF service. Setting autoFetch to true is used when we have a dataProvider. This tells the DataView to retrieve the data when the page loads.
- Line 16 & 17: The DataView has built-in functionality for handling item selection. In line 16, we can define a CSS class for the item when it is selected (selectedItemClass). In line 17, we are telling the DataView to initially select the first item in the list when the page loads (initialSelectedIndex).
- Line 18: The purpose of sys-key is to create a local variable that is a reference to the current component. This allows us to refer to it (line 37), without needing to use $find. (Thanks to Bertrand Le Roy for pointing this out)
- Line 19: This may look familiar from server-side code that you have written (e.g. DataGrid). The onCommand method allows us to handle commands that are raised from the component. The reason for handling this is the custom “delete” command on Line 22.
Lines 20 – 31: This is the master DataView’s content.
- Line 20: The first of two commands that we need to handle. Select is a command that the DataView handles automatically for us. When you click inside the div, the DataView handles this event by setting the selectedData property (which will be used in the edit form on Line 37), setting the selectedIndex property, and also setting the selectedItemClass.
- Line 22 & 23: The second command that we need to handle is delete. To do this, we set the sys:command to “Delete” on Line 22. This command will be bubbled up to our custom handler since we set the onCommand method of the DataView on Line 19. In addition to custom events, we can have custom event args. {{ $index }} evaluates to the index of the item as generated by the underlying collection.
- Line 27: This line is of interest since we are using the convert property of the binding. Because of this, the src attribute needs to be prefixed with the sys namespace. In some instances like this one, we need to prefix the attribute with sys in order to obtain the full functionality. The convert function specified here is a custom one that will either set an empty image or change the src to the one that grabs the website snapshot.
Lines 35 – 40: This is the “detail” DataView, or in our case the edit form.
- Line 37: This is really the only item of interest in the edit form since everything else is pretty standard. Here the binding is a bit special. We are binding to the selectedData property of the “master” DataView. The {{master}} refers to the sys-key defined in Line 18.

Now that you fully understand the HTML, let’s move onto the JavaScript. For the JavaScript I have added all of the comments inline instead of a full discussion after the fact to make it easier.

// Create an empty object to store global variables
//   - dataContext: The AdoNetDataContext
//   - data: An observable "view" of the data
var BlogService = {};
 
BlogService.dataContext = $create(
    Sys.Data.AdoNetDataContext,
    { serviceUri: "BlogService.svc" }
);
 
function dataLoading(sender, args) {
    // BlogService.data is where our changes will take place
    // You can think of this as a "ViewModel"
    // See http://forums.asp.net/p/1405579/3060650.aspx for more info
    BlogService.data = args.get_data();
    Sys.Observer.makeObservable(BlogService.data);
}
 
function addBlog() {
    // Create a new Blog entity
    var newBlog = { Name: 'Blog Name', Url: '' };
     
    // Add the blog to the DataContext
    BlogService.dataContext.insertEntity(newBlog, "Blogs");
    
    // Add the blog to our "ViewModel"
    BlogService.data.add(newBlog);
}
 
function toSnapshot(url) {
    // Either return a blank image
    if (url.substring(0, 7) !== 'http://') return 'nothumbnail.jpg';
     
    // Or use the bitpixels.com path to get a thumbnail
    return 'http://img.bitpixels.com/getthumbnail?url=' + url;
}
 
function dvCommand(sender, args) {
    // Test for our custom delete command
    if (args.get_commandName() === 'Delete') {
        // Get the index that we set on the delete button
        var index = args.get_commandArgument();
        
        // Get the entity from the local data
        var deletedBlog = BlogService.data[index];
        
        // Remove the entity from the ADO.NET Data Service
        BlogService.dataContext.removeEntity(deletedBlog);
        
        // Remove from the local collection
        BlogService.data.remove(deletedBlog);
 
        // Set the DataView's selected index
        if (index >= BlogService.data.length) index--;
        $find('blogList').set_selectedIndex(index);
    }
}

Conclusion

ASP.NET 4.0 is one exciting release. The ASP.NET AJAX features shown here are incredibly cool. The best thing about ASP.NET AJAX is that we can start using the scripts today in our ASP.NET 3.5 SP1 applications thanks to Preview 4. No need to install anything on the server, just simply reference the scripts. I’m excited to see documentation has been released for ASP.NET 4.0 Beta 1 and I would recommend checking out the ASP.NET AJAX Client Reference on MSDN. I’ve also included many links to it throughout this post. Another helpful reference is the ASP.NET 4.0 and VS 2010 whitepaper, where you can see all the features of ASP.NET 4.0 as well as the ASP.NET AJAX functionality.

For other blogs on ASP.NET AJAX 4.0, be sure to check out:

Bertrand Le Roy’s blog - http://weblogs.asp.net/bleroy/
Jim Wang’s blog: http://weblogs.asp.net/jimwang/default.aspx
Politian’s blog: http://politian.wordpress.com/

Technorati Tags: ASP.NET,AJAX

ASP.NET 4.0 AJAX – Preview 4 – JavaScript Observer Pattern

Damien White — Thu, 21 May 2009 11:54:00 -0500

In my last post on ASP.NET AJAX 4.0, we took a look at the new DataView ASP.NET AJAX control. We saw that by using a DataView, we could easily bind data with JavaScript or declaratively with a few attributes. In this post, we’ll look at another feature of the ASP.NET 4.0 AJAX Library, the Observer design pattern for plain JavaScript objects. The pattern is implemented in the client side Sys.Observer class. This feature is used internally within the new version of ASP.NET AJAX for live-binding and the DataView control.

Here we will be using Preview 4 of the ASP.NET AJAX Library, which can be downloaded from CodePlex. Remember that these components are still in "preview" mode (meaning no Microsoft support), though they are usable at your own risk. For more information, you can check out the license on CodePlex. I highly recommend downloading the samples available for Preview 4, which are also available at CodePlex. The samples give you a good look at what is coming.

In this post, we’ll take a closer look at the Sys.Observer class, witness the problems it solves, and take a look at a few examples.

A Quick Look at JavaScript Objects

To this day, I still know developers who either don’t understand, don’t want to understand, or flat out loathe JavaScript. I suppose this really has to do with it being totally misunderstood, but in a Web 2.0 world, a web developer should embrace the language. Especially with wonderful frameworks like jQuery and the Microsoft AJAX Library This section is a quick overview of JavaScript objects in case you aren’t familiar with them.

Objects in JavaScript can be described as hashtables, they are collections of names and values, for example:

// An empty object
var person = {};

// Another way of defining an object
var person2 = new Object();

// Adding a name/value pair (a local variable)
person["firstName"] = 'Damien';

// You can also use the dot notation instead of subscript notation
person.lastName = 'White';

// And you can define objects using the object literal notation
var person = { firstName:'Damien', lastName:'White' };

This is by no means definitive. If you have JavaScript-phobia, you should start here.

The Object Modification Problem

Let’s say you have a simple object with a couple of properties. Note that JavaScript doesn’t have properties as we know them in .NET, they are just local variables like those defined on the person object in the previous code snippet, however there are conventions for emulating them with functions. Back to our simple object, let’s say that you need to be notified if the object changes. Take the following snippet, note I’m using the jQuery in order to simplify the code (e.g. append, and document ready).

var latestBlogPost = {
    name: 'ASP.NET 4.0 AJAX - Preview 4 - Client Templates',
    url: 'http://blogs.visoftinc.com/archive/2009/04/28/' +
         'ASP.NET-4.0-AJAX-Preview-4-Client-Templates.aspx'
}
        
// Displays the object
function displayLatestBlog() {
    var link = '<a href="' + latestBlogPost.url + '">' + latestBlogPost.name + '</a>';
    $('#latestBlog').empty().append(link);
}
 

// Show the latest blog post on document ready
$(function() {
    displayLatestBlog();
});

Very simple example, I’m just displaying the link in a span (id = latestBlog) when the page loads. Now, let’s say that the latest latestBlogPost object changes.

After the change, the displayed latest blog post is now out of date. In this simple example it isn’t too big of a deal to handle this. However, there is a bigger question at large here, what if we wanted to know when the object changed? We could implement some logic in our latestBlogPost object in order to raise events when a property changes (such as is done in many of the ASP.NET AJAX Control Toolkit, by the way, have you checked out the latest version?). This works fine for something along the lines of a control, but it doesn’t make sense for just plain JavaScript objects. Imagine having to add get_ and set_ methods that raise an event each time they are changed for each variable in an object that is passed from the server via JSON. That is where the Sys.Observer class comes into play.

Observing Changes with Sys.Observer

The new Sys.Observer class is a solution to the problem that we defined in the last section. Let’s start by seeing how we would handle notification of object changes. I’ll be appending this code to the previous snippet.

// Make the object observable
Sys.Observer.makeObservable(latestBlogPost);
Sys.Observer.addPropertyChanged(latestBlogPost, displayLatestBlog);
          
// Change the Latest Blog Post using the Sys.Observer
function changeLatestBlogPost() {
    // Use beginUpdate to prevent changes from being reported until we are done.
    latestBlogPost.beginUpdate();
 
    // Set the properties in an observable way
    latestBlogPost.setValue('name', 'ASP.NET 4.0 AJAX - Preview 4 - JavaScript Observer Pattern');
    latestBlogPost.setValue('url', 'http://blogs.visoftinc.com/archive/2009/05/21/' +
        'ASP.NET-4.0-AJAX-Preview 4-JavaScript-Observer-Pattern.aspx');
 
    // Finish, now the listeners will get the update
    latestBlogPost.endUpdate();
}

I realize this is an extremely simple example, but it shows the basics behind how the Sys.Observer class works.

The first thing being done is making the object “observable.” The makeObservable method adds the observable methods to it. You don’t need to call the makeObservable method if you don’t want, but then you would need to call the fully qualified methods of the Sys.Observer class, for example (looking at the beginUpdate method call from the above snippet):

// We can call beginUpdate like this thanks to makeObservable
latestBlogPost.beginUpdate();
 
// Otherwise we would have to call it like this:
Sys.Observer.beginUpdate(latestBlogPost);

Personally, I think the makeObservable call makes the method calls a little cleaner, but the disadvantage is no IntelliSense on the “observable” object.

Back to the code snippet. In the second line, we are adding an event handler for the propertyChanged event using the addPropertyChanged method. This is all we need to do in order to register as a listener, our method (displayLatestBlog from the earlier code snippet) will be called each time a property on the object changes. Now every property change may be a bit overkill, thankfully we can control when the listener receives notification. In the first step in the changeLatestBlogPost() method, I’m doing just that, calling the beginUpdate Sys.Observer method delays notifications from being fired until we are done with our editing. In the next two lines, I’m using setValue in order to let the Sys.Observer know that this is a change that should be observed. Finally, a call to endUpdate will tell the Sys.Observer that it should now notify listeners of the changes to our object. Without the beginUpdate and endUpdate call, the Sys.Observer class would have sent notifications each time we called the setValue method.

Sys.Observer, JavaScript Arrays, and the DataView

Let’s look at something a little more exciting. Back in my post on the DataView, we looked at setting the DataView using a simple JavaScript array. Let’s revisit the example using the Sys.Observer class. Like the previous examples, I’ll be using just a standard HTML page, no ASP.NET server-side code. Being able to use the ASP.NET AJAX Library OUTSIDE of ASP.NET is often a point that developers seem to miss, so hopefully all of these HTML examples will drive the point home.

I will be building upon the declarative binding example from my earlier post, so you can reference the full explanation of the DataView code if you need to. I’ll just focus on the JavaScript code for the sake of this example, but you can find the full source in the download (available at the end of this post). To refresh your memory a bit, we had a simple array in the DataView example:

var nfcEast = [
    { Team: "New York Giants", Homepage: "http://www.giants.com/" },
    { Team: "Philadelphia Eagles", Homepage: "http://www.philadelphiaeagles.com/" },
    { Team: "Dallas Cowboys", Homepage: "http://www.dallascowboys.com/" },
    { Team: "Washington Redskins", Homepage: "http://www.redskins.com/" }
]

We then used declarative binding to bind the list to the DataView, which in our case was a simple unordered list:

<ul id="nflList" class="sys-template" 
    sys:attach="dataview" 
    dataview:data="{{ nfcEast }}">
    <li><a href="{{ Homepage }}">{{ Team }}</a></li>
</ul>

Now, let’s make our array “observable,” where again I’ll use the makeObservable method. One thing to note on this example, I’m not setting a handler to capture the changes. The reasoning behind this is due to the functionality built in to the DataView control. Normally to capture changes of a JavaScript array, you would wire up an event handler for the Collection Changed event by calling the method addCollectionChanged on Sys.Observer. The DataView however automatically listens for changes to an underlying “observable” collection. All we need to do now is change our collection using the Sys.Observer methods for a collection. The Sys.Observer has quite a few methods for doing just this. They are add, addRange, clear, insert, remove, and removeAt. For this example, we’ll just look at a couple of the methods.

Sys.Observer.makeObservable(nfcEast);
 
function removeTeam() {
    if (nfcEast.length > 0) {
        nfcEast.removeAt(0);
    }
}
 
function moveTopTeamToBottom() {
    if (nfcEast.length > 1) {
        nfcEast.beginUpdate();

        var topTeam = nfcEast[0];
        nfcEast.removeAt(0);
        nfcEast.insert(nfcEast.length + 1, topTeam);

        nfcEast.endUpdate();
    }
}

This is all to code that is needed in order to update our array and thereby update our DataView unordered list. These are two pretty simple methods, removeTeam and moveTopTeamToBottom. The first simply removes the top team from the list, while the second does a “batch change” moving the top team in the list to bottom using beginUpdate and endUpdate like you saw earlier. Now for the “magic”, notice we’re not handling the changes at all. When you fire up the example, and click on the buttons to call the appropriate functions, you’ll notice that the DataView automatically rebinds after each of these calls. You can see an example of the functionality in the clip below (Figure 1).

Figure 1 – The DataView and Sys.Observer Example

Conclusion

It’s very handy to be able to get notifications for plain JavaScript objects like this. Having the Sys.Observer class at our disposal can empower us to remove custom get/set logic in our client-side classes, and use a standard pattern for this problem. By doing this, other controls (e.g. Sys.UI.DataView) can then subscribe as listeners in a common way for changes to our object without having to know about custom events that we have created.

Looking to try the code in the post out for yourself? Download the Samples - 84K

For more information on Sys.Observer and ASP.NET AJAX 4.0, here are a few other posts on the topic:

ASP.NET AJAX 4.0: Observing updates to POJOs (Plain 'Ole JavaScript Objects) – Dave Reed (based on ASP.NET AJAX 4.0 Preview 3)
ASP.NET AJAX 4.0 Client Templates in depth – Piyush Shah
Getting started with Sys.Binding – Part 2 – UpdatePanel.net
ASP.NET 4.0 AJAX - Preview 4 - Client Templates – Damien White

Technorati Tags: ASP.NET,AJAX,JavaScript

How To: Adding MVC items to an ASP.NET Web Application

Damien White — Wed, 20 May 2009 09:30:10 -0500

I’ve been experimenting with using ASP.NET MVC inside a standard ASP.NET Web Application (Web Forms). I really like what’s been released with MVC 1.0 and can see places where existing apps would benefit from the features. Plus, having just finished Professional ASP.NET MVC 1.0 from Wrox (see my book review), I couldn’t wait to start using it.

The last chapter of the book, Chapter 12, entitled “Best of Both Worlds: Web Forms and MVC Together,” discusses configuring an ASP.NET Web Application to support the new ASP.NET MVC features. Note that adding Web Forms to an ASP.NET MVC project template is much easier (meaning no configuration/reference changes), since ASP.NET MVC is built on top of the ASP.NET Framework. Anyway, after referencing the required libraries, creating the necessary directories, and updating the web.config, you’ll find that templates for the MVC items (e.g. Controllers, Views), are missing as options.

Well after digging around on the web, I found a solution to the problem. It involves editing the project file and adding a guid to the ProjectTypeGuids node.

Caution: Before you do this, make sure that you have ASP.NET MVC 1.0 installed on your machine, also BACKUP your project file before modifying it. If there is a mistake in the file, Visual Studio won’t load the project properly.

Now that you’ve made a backup, open up the project file using notepad (or your favorite text editor) and look for the ProjectTypeGuids node, for example (Note, line-breaks added for display in these examples, but in the project file everything is on a single line):

<ProjectTypeGuids>
    {349c5851-65df-11da-9384-00065b846f21};
    {fae04ec0-301f-11d3-bf4b-00c04f79efbc}
</ProjectTypeGuids>

In order to get the MVC items to work, you will add the project type guid of an ASP.NET MVC application. The Guid that you need is {603c0e0b-db56-11dc-be95-000d561079b0};. Simply add it to the beginning of the ProjectTypeGuids, for example (again, line-breaks added for display):

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

Save the project file and reload your project. Now, things work correctly, for example when you right-click inside an action method, you see the option to add a View (Figure 1), and right-clicking on the Controllers folder gives you the option to add a new Controller (Figure 2).

Figure 1 – Adding a View

Figure 2 – Adding a Controller

Remember that by adding the ProjectTypeGuid for MVC, all the members of your team will need to have ASP.NET MVC installed, otherwise they will get errors as described in this post.

Technorati Tags: ASP.NET,MVC,Web Forms

Book Review - Wrox Professional ASP.NET MVC 1.0

Damien White — Sun, 17 May 2009 12:01:58 -0500

Working primarily on web applications, I’ve focused most of my time on ASP.NET Web Forms since the very early betas. Web Forms were truly a great revolution in the web world. Once I saw the functionality when it first came out (when I was using ::shudder:: “classic” ASP), I couldn’t wait to start using it. I began right away with ASP+, as it was called back in 2000, abandoning Visual Interdev and ASP, yippee. The release of Version 1.0 came out January 16, 2002, changing the way we work with the web.

Flash-forward 7 years (9 from the early betas), and the programming world has changed. With things like TDD (Test Driven Development), AJAX, JSON, jQuery, etc, and the complexity of web applications growing, sometimes Web Forms would get in the way. To be fair, the Web Form framework is very robust and tries to be helpful, but sometimes we developers like to shoot ourselves in the foot. One example that I’m sure many of you have experienced is trying to interface with a server-rendered element on the page. Performing something like a document.getElementById(‘UserName’) in JavaScript doesn’t exactly work as expected when the ID of your textbox is now something along the lines of “ctl00_mainContent_LoginCtrl_UserName,” does it? On this particular topic, ASP.NET 4.0 has a solution for this problem, but that isn’t the focus of this post. The Client Id problem, is just one example of the framework “getting in your way.” This is one of the many reasons behind the advent of ASP.NET MVC. Having just finished Professional ASP.NET MVC 1.0 from Wrox, I’m a convert.

The Book - Overview

First, the combo of authors on this book, Conery, Hanselman, Haack, and Guthrie, cannot be beat. The book starts out with the now famous NerdDinner ASP.NET MVC Tutorial from ScottGu, but it’s so much more than that. First off, the book is a very interesting read. I’ve read countless programming books, some good, some bad, and some downright ugly. This book stands out as one of the good ones. This could just be the geek in me, but I found myself at times not wanting to put the book down. That’s a good sign for a book on software development. One of the things that I liked best was the “Product Team Aside” sections. Being a developer, I’m interested in the thought process that has gone into building a framework like ASP.NET MVC. I’ve read reviews on Amazon, where readers didn’t like that feature. I don’t get it, but everyone is entitled to their own opinions. Personally, I would read an entire book regarding the design decisions for something like ASP.NET MVC. Before continuing, one more complaint that I’ve seen is that the book is “too beginner.” This may be true if you’ve been using ASP.NET MVC full time for quite a while, but I felt that it had the right feel for someone coming from the Web Forms and starting down the ASP.NET MVC path. The concepts were easy to grasp, and again it was an enjoyable read. Overall I feel that the authors did a great job.

The Chapters

Most of the chapters in the book are ones you would expect from one on ASP.NET MVC, they discuss topics such as:

URL Routing
Views
Controllers
Actions
HTML Helpers
Filters
AJAX

A few of the chapters stood out however...

Chapter 3 was very enjoyable and well written. It goes over what’s in every Web Form developer’s mind, “Is ASP.NET MVC better than Web Forms.” It tackled a lot of the concerns that a Web Form developer might have as well as the thoughts running through our minds. I liked that there was an element of humor to the chapter and the book overall, for example on the topic of a Web Forms developer seeing MVC Views for the first time, “1999 called and they want their Classic ASP Spaghetti Code back!”

Chapter 4 gets into the details of the framework with routes and URLs. Right up front, it compares Routing to URL Rewriting, a question that I think lots of ASP.NET developers may have. Note that Routing is available as part of ASP.NET 3.5 SP1 and isn’t specific to MVC, so even if you aren’t jumping over to MVC just yet, you may find URL Routing to be useful in your applications today. The chapter then digs into Routing in detail. There was even an example of using Routing with Web Forms as well, which I thought was a great addition.

Chapter 9 discusses securing the MVC application. I quite enjoyed the tone of the chapter. The examples given were real-world problems and were very interesting. Honestly, security is often a fairly boring topic, but in this book it’s presented in a way that’s very engaging.

Chapter 11 really interested me. It talks about testable design patterns, something that often is ignored in order to “get the job done.” I found the chapter very useful coming from working on teams where testing is somewhat of an afterthought. In an ideal world, we’d all have fully testable, maintainable code, and everything would just be “perfect,” but sadly in the real world, this often doesn’t translate. The concepts presented in this chapter are practical practices that can easily be done in order to position your code for better quality in the long run, even if your team isn’t the testing type.

Finally, Chapter 12 discusses using MVC and ASP.NET Web Forms together. This chapter is extremely helpful if you are porting an existing application over to MVC. I like the fact that the authors added an example of porting over a Web Forms application to MVC.

Conclusion

Coming from the Web Forms world, I would highly recommend Professional ASP.NET MVC 1.0. If you are looking strictly for a reference book that will just sit on the shelf until you need parts of it, then this may not be for you. However, if you are looking for something to get you up to speed on ASP.NET MVC quickly, then I think you too will enjoy it.

Technorati Tags: ASP.NET,MVC

ASP.NET 4.0 AJAX – Preview 4 – Client Templates

Damien White — Tue, 28 Apr 2009 00:21:39 -0500

A little over a month ago, Microsoft released the fourth preview of ASP.NET 4.0 AJAX. This is the new release of the Microsoft AJAX Framework that will be released with ASP.NET 4.0. We’re getting closer to the RTM release of .NET 4.0 (hopefully later this year), so I figured this would be a good time to start posting about ASP.NET 4.0 AJAX. There are some very exciting things coming along with ASP.NET 4.0, and the ASP.NET AJAX component is no exception. The best news about ASP.NET AJAX is that you can start using it today without having to wait for the full blown ASP.NET AJAX framework. Keep in mind that these components are still in "preview" mode (meaning no Microsoft support), though they are usable at your own risk. For more information, you can check out the license on CodePlex.

In this post, I’ll be talking about the client templates that can be found in the latest release. Client templates are very powerful. They are a key component for rich client-side applications. Up until now, I have been using jTemplates, a client template solution plugin for jQuery. If you aren’t familiar with jTemplates, check out Dave Ward’s article “Use jQuery and ASP.NET AJAX to build a client side Repeater.” jTemplates is really a nice plugin, but it’s a bit disconnected from the flow of the page. Enter ASP.NET 4.0 AJAX and the DataView control.

Introducing the Sys.UI.DataView Control

The ASP.NET AJAX DataView (not to be confused with the ADO.NET DataView), is a new control that functions similar to a server-side repeater as you will see. The first thing to note with the DataView is that this control operates without ASP.NET, meaning you can use this in any framework or even a straight HTML page. This shouldn’t be too much of a surprise, since you can download the ASP.NET AJAX Library 3.5 as standalone scripts today. Having said that, let’s start with an simple example that will just run in a standard HTML page. For this first example, I will walk through declaratively setting up template binding. Let’s get started…

Want to follow along with the examples? Download Them - 88K

DataView and Declarative Binding

In order to use the Microsoft AJAX Templates, you need to first reference two scripts, MicrosoftAjax.js (or MicrosoftAjax.debug.js) and MicrosoftAjaxTemplates.js (or MicrosoftAjaxTemplates.debug.js). These files can be found in the ASP.NET Ajax Preview 4.zip file from CodePlex. These would be added to the head of your page.

<script type="text/javascript" src="scripts/MicrosoftAjax.debug.js"></script>

<script type="text/javascript" src="scripts/MicrosoftAjaxTemplates.debug.js"></script>

Next, we’ll move on to the body. In the body tag, you need to specify a few namespaces and add a command, as shown in the snippet below.

<body   xmlns:sys="javascript:Sys" 
        xmlns:dataview="javascript:Sys.UI.DataView"
        sys:activate="*">
   ...
</body>

The first namespace being registered is “sys”. This is needed for all the templates, whether you activate them declaratively or imperatively. The sys prefix points to the Microsoft AJAX Library’s Sys class. The next two attributes are needed for declarative activation/binding. In the second xmlns attribute, we are registering the prefix “dataview.” This namespace refers to the Sys.UI.DataView AJAX control. The final attribute being added to the body tag is sys:activate. The value for sys:activate can be “*” which means “activate anything on the page with sys:attach (which we will discuss shortly).” Activating in this sense, means binding the templates when the page loads. Note, that instead of using an asterisk for sys:activate, you could also have a comma-delimited list of the ids to bind on page load. This is a better approach if you have a complex page since wildcards always seem to introduce some sort of delay.

Now that we have the framework setup, let’s move on to the actual template using the DataView. For this example, I will render an unordered list, but you can use any standard HTML markup that you want. To keep this example simple, I will bind to a JavaScript array defined in page, but later will discuss binding to a service.

<ul id="nflList" class="sys-template" 
    sys:attach="dataview" 
    dataview:data="{{ nfcEast }}">
    <li><a href="{{ Homepage }}">{{ Team }}</a></li>
</ul>

Let’s take a closer look at what’s going on. Starting with the UL element, you can see the typical id and class attributes. You may think the class definition looks a bit peculiar, and you’d be correct. The class sys-template is used as a convention for hiding the template until binding occurs. This class needs to be defined somewhere in your stylesheet.

.sys-template { display:none; }

Remember, you can always define multiple classes on an element by space-delimiting them. For example:

<ul class=”myClass sys-template” ...></ul>

Next, we have our sys:attach, which I briefly mentioned earlier. This property assigns the DataView to this element. This is equal to you manually wiring up the template using the $create shortcut (which will be discussed in the DataView and Imperative Binding section). The sys:attach value is a reference to the namespace of dataview that we defined on the body element earlier.

The final attribute is dataview:data. As you may have guessed, this is a reference to the data source we need to bind to, and remember in this example I’m just binding to a JavaScript array. Note, the array name is wrapped in double curly-braces {{ nfcEast }}. I’m missing football season (Go Giants), so I decided to go with an NFL theme for the sample data, as you can see.

var nfcEast = [
    { Team: "New York Giants", Homepage: "http://www.giants.com/" },
    { Team: "Philadelphia Eagles", Homepage: "http://www.philadelphiaeagles.com/" },
    { Team: "Dallas Cowboys", Homepage: "http://www.dallascowboys.com/" },
    { Team: "Washington Redskins", Homepage: "http://www.redskins.com/" }
]

Now on to the template itself. This is where we set up the binding of the properties. The {{ ... }} blocks designate one-way / one-time binding. This syntax is very similar to the server side Eval() statements that we use when binding in ASP.NET. When this is bound, the DataView acts like a repeater and creates a new <li></li> for each row of data. You can see the rendered HTML in Figure 1. The output is shown in Figure 2.

Figure 1: The Rendered HTML After Binding (From FireBug)

Figure 2: The Output

DataView and Imperative Binding

In the last example, I showed how you can use declarative binding and the DataView control. Let’s now look at how the code looks if we decide to wire things up ourselves. I will keep everything the same as the last example so that you can clearly see the differences.

First, let’s review the changes to the HTML code:

<body xmlns:sys="javascript:Sys">
    <ul id="nflList" class="sys-template">
        <li><a href="{{ Homepage }}">{{ Team }}</a></li>
    </ul>
</body>

You’ll notice that body only has a namespace declaration for sys and the <ul></ul> now just has an id and class.

Now for the JavaScript to do the binding:

Sys.Application.add_init(appInit);

function appInit() {
    $create(
        Sys.UI.DataView,
        { data: nfcEast },
        null,
        null,
        $get("nflList")
        );
}

Not too much here, and it’s standard code ASP.NET AJAX is today. First, we are wiring up a handler (the appInit function) for the application init event. This init event is raised after all scripts have been loaded, but before objects are created. In the appInit function, we are simply manually wiring up the Sys.UI.DataView control as we would do with an ASP.NET AJAX control in the current ASP.NET AJAX library. The $create method takes five parameters, the signature is $create(Type type, properties, events, references, element). For the parameters, we start by passing the Sys.UI.DataView for the type. Next, we have an object literal of the property and the value, in this case we are setting the data property with our array. There are no events or references needed, so those values are simply null. Finally, we need to pass the element using the $get shortcut (which does a document.getElementById under the covers).

Running this code is identical to the declarative method, in that on the application initialization, the template is filled with data.

One other useful function is replacing the data in your template. This can simply be done using the syntax:

$find("ID OF THE ELEMENT").set_data(THE JSON DATA);.

Binding the DataView to a WCF REST Service

As promised earlier, let’s walk through binding a DataView client-template to a WCF Service. The DataView can bind to any JSON serialized object. For this particular example, I will use a REST WCF service hosted in an ASP.NET Website. If you are not familiar with WCF and REST services, have a look at this or this article. First, let’s take a look at the service itself.

In the .svc file, I’ve declared the ServiceHost:

<%@ ServiceHost Language="C#" 
    Service="SampleService"
    CodeBehind="~/App_Code/SampleService.svc.cs"
    Factory="System.ServiceModel.Activation.WebServiceHostFactory" %>

The Factory declaration there is to eliminate the need of configuring the service in the web.config. The WebServiceHostFactory automatically uses the WebHttpBinding and WebHttpBehavior. Now for the code…

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class SampleService
{
    public SampleService() {}

    [DataContract]
    public class NFLTeam
    {
        [DataMember]
        public string Team { get; set; }
        [DataMember]
        public string Homepage { get; set; }
    }

    [OperationContract]
    [WebGet(UriTemplate = "getTeams",
     ResponseFormat = WebMessageFormat.Json)]
    public List<NFLTeam> GetTeams()
    {
        return new List<NFLTeam> { 
        new NFLTeam { Team = "New York Giants", Homepage = "http://www.giants.com/" },
        new NFLTeam { Team = "Philadelphia Eagles", Homepage = "http://www.philadelphiaeagles.com/" },
        new NFLTeam { Team = "Dallas Cowboys", Homepage = "http://www.dallascowboys.com/" },
        new NFLTeam { Team = "Washington Redskins", Homepage = "http://www.redskins.com/" }        
        };
    }
}

Nothing really out of the ordinary going on in the code. I’m simply returning a generic list of objects for this example so that you don’t need a database or anything to run the samples if you download them. One thing to note if you are not familiar with REST services in WCF, the WebGet attribute specifies that if we are using a WebHttpBinding, this method can be called using the GET verb. As parameters, I have set the UriTemplate to be getTeams, this means that the URL to access the service will be ../SampleService.svc/getTeams. Finally, since the DataView binds to JSON objects, the ResponseFormat property specifies the result should be serialized as JSON.

Now with our service in tack, we can work on the DataView code. Again, in this example I will show the setup in a simple HTML page, illustrating how the Microsoft ASP.NET AJAX 4.0 Library can be used without ASP.NET. I will skip the script and body declarations since I showed them in the previous examples. For this DataView, I will use an HTML TABLE and bind declaratively.

<table>
    <tbody id="nflListBody" class="sys-template" 
        sys:attach="dataview" 
        dataview:autofetch="true"
        dataview:httpverb="GET"
        dataview:dataprovider="SampleService.svc"
        dataview:fetchoperation="getTeams">
        <tr><td>{{ Team }}</td><td><a href="{{ Homepage }}">{{ Homepage }}</a></td></tr>
    </tbody> 
</table>

A few of the attributes required for the DataView should look familiar, the id, class, and the sys:attach. Let’s take a closer look at the rest.

dataview:autofetch	Indicates if the data should be retrieved immediately from a data source when the page loads.
dataview:httpverb	A string indicating the the HTTP method. The default method is POST, but in my case, the REST service is using GET.
dataview:dataprovider	The data provider the DataView should use to get the data. This is a path to the svc file. In my example, the service is in the root with the sample page.
dataview:fetchoperation	The querystring or method name to use to retrieve the data.

The DataView template itself should look familiar. Again I am using one-way, one-time bindings. Really the only difference is where the template is defined for the table. The DataView element for a table should be defined on the <tbody> so that the repeating works correctly, otherwise if you add it to the table and just have a structure without the tbody like <table><tr><td>...</td></tr></table>, you’ll get incorrect output as shown in Figure 3.

Figure 3: Incorrect output if you put the DataView on the TABLE Element

Passing Parameters Using the DataView and REST

One final note on using REST services with the DataView. During the course of my testing, I ran across a problem when trying to pass parameters to a REST service. In the last example, I didn’t pass any parameters to the method being called by the DataView, but if you were going to pass parameters, you would typically use the fetchParameters property for example:

<div class="list sys-template"
    sys:attach="dataview"
    dataview:autofetch="true"
    dataview:httpverb="GET"
    dataview:dataprovider="SampleService.svc"
    dataview:fetchoperation="getGreeting"
    dataview:fetchparameters="{{ {greeting: 'Hello World'} }}">
{{ Text }}
</div>

When the DataView goes out and makes the request using the fetchparamerters, it ends up being: /SampleService.svc/getGreeting?greeting=Hello%20World.

The proper syntax for the REST service should be /SampleService.svc/getGreeting/Hello%20World. In order to get the proper syntax for REST service, you should append the parameters as part of the fetchoperation.

<div id="greeting" class="sys-template" 
    sys:attach="dataview" 
    dataview:autofetch="true"
    dataview:httpverb="GET"
    dataview:dataprovider="SampleService.svc"
    dataview:fetchoperation="getGreeting/Hello World">
    {{ Text }}
</div>

Notice the fetchopertion in that example, appending the parameters to the end gives us the correct format.

Conclusion

I hope you enjoyed this introduction to the DataView and ASP.NET 4.0 AJAX. If you’ve been inspired to find out more about the DataView and the other features found in ASP.NET 4.0 AJAX, be sure to check out the samples and documentation found on Codeplex.

Looking to try the code in this post out for yourself? Download the Samples - 88K

Technorati Tags: ASP.NET,AJAX,WCF,REST

SQL Express 2008 x64 Integration with Visual Studio 2008 SP1

Damien White — Fri, 06 Feb 2009 20:18:14 -0500

Yesterday I was trying to add a database to the App_Data folder of a simple web application I was creating. During one of my computer re-installs, I didn't install SQL Express since I normally use a full blown SQL instance, so I really had no need for it. Now that I did need it, I wanted to run SQL Express 2008. I am running Windows Vista x64, so I proceeded to download SQL Express 2008 x64. I installed it and loaded up SQL Server Management Studio to make sure the instance was working (I just used the default of SQLEXPRESS for the instance name). Everything was fine. I then fired up Visual Studio, right-clicked on the App_Data folder of the web app, and... error (Figure 1).

Figure 1 - Connections to SQL require SQL Express

The Fix - Option 1 - Use SQL Express 2008 x86

One quick fix for this problem is to install the 32-bit version of SQL 2008 Express instead of the x64 version. I figured this was sort of silly, I'm running Windows x64 and I really hate installing 32-bit software if I don't have to. But if you're looking for a simple solution without an extra download, this is it.

The Fix - Option 2 - Using SQL Express 2008 x64

Refusing to take the easy way out, I then started down the path of fixing this "the right way". The first article I came across was John Roland's post on this error. Not helpful in my case, but useful if your instance is named something other than the default for SQLEXPRESS.

Next, I found someone else with my problem on the ASP.NET Forums. Thankfully, it had a link to the fix (KB 957944). However this isn't a something you can just directly download from the KB article since it isn't available to the general public just yet. After a quick Google search, I found a simple way to request the hotfix from Microsoft. From there, I discovered a pretty cool site called Hotfixr, which automatically sends the correct request to Microsoft. If you are looking for the specific one for this problem, you can use this direct link.

After you make a request, Microsoft will e-mail you a link to the fix as well as a password to unzip the fix. After downloading it, I installed the fix as show in Figure 2 below. Note this install took quite a while. Make sure you have all your instances for VS closed.

Figure 2 - Installing the KB 957944 Hotfix

Configuring SQL

I then fired up Visual Studio 2008, attempted to add a database again, but I received another error. This was a pretty simple one though, it just stated that Named Pipes wasn't enabled for the server. D'oh forgot to do that. Easy fix... Go to the SQL Server Configuration Manger, click on the Protocols for the specific instance and enable Named Pipes (Figure 3).

Figure 3 - Enable Named Pipes

After all of that, a database can successfully be added (Figure 4).

Figure 4 - Fixed... A New Database in App_Data

Technorati Tags: SQL 2008 Express,Visual Studio 2008,x64

My Wrox Blox Books - Now on Amazon!

Damien White — Fri, 30 Jan 2009 10:00:23 -0500

I just happen to be browsing Amazon today and noticed that my Wrox Blox books are available for purchase on Amazon.com. Pretty cool stuff! They were listed up there before, but weren't available directly through Amazon until now. For a full description and the table of contents of each, just click on the Amazon links at the bottom of this post. In addition, here are my previous announcements:

Both books are good guides for anyone using ASP.NET AJAX in either Visual Studio 2005 or 2008 using .NET 2.0 (with the AJAX Extensions) or .NET 3.5.

Technorati Tags: ASP.NET,AJAX,AJAX Control Toolkit,.NET 3.5

How To: Install Windows 7 on VirtualBox 2.1 – Fix Sound, Video and Network adapter

Cedric Boudoya — Tue, 20 Jan 2009 13:44:07 -0500

On my previous blog posts, I covered the installation of VirtualBox 2.1 and I went over the step-by-steps to create a virtual machine to host Windows 7.

I will now go over the details of fixing the sound, video and network adapter.

If you go to Start > Right-click on My Computer > Manage (or run mmc), then you will get the content management window. You should notice that two devices are not properly installed (Base System Device, Ethernet Controller).

Mount Guest Additions

On the VirtualBox machine window, in the menu bar:
Click Devices > Install Guest Additions…
The AutoPlay window should open to prompt you to run or open.
Click on Open/View files to specify yourself what to run. You can access using windows explorer the D drive.
Right-click the VBoxWindowsAdditions file and choose properties.
In the Properties window, go to the Compatibility tab. Check the Run this program in compatibility mode for box, and choose Windows Vista in the box below it.
You can check if you want “Run the program as an administrator”.
Click OK.
Double-click the VBoxWindowsAdditions file to run it as an administrator.

Click Yes.
If you have nothing happening, make sure to maximize the VirtualBox Guest Additions 2.1.0 Setup window.

Guest Additions Installation Wizard

Start the set up.

Click Next.
License Agreement.

Click I Agree.
Install Location.

Click Install.
Installation starts.
After a few seconds, you’ll be asked if you want to install the Sun display drivers. Select the check box to trust software from “Sun Microsystems, Inc.”.

Click Install.
Once the installation is finished, your computer must be restarted in order to complete the installation.

Click on Reboot now and Finish.
You should now be able to use your Virtual Machine in Full Screen mode (Right Ctrl + F).

Install Network and Sound devices

Click on Start > Shutdown
On the VirtualBox Manager window, right-click on the virtual machine > Settings.
On the Settings window, click on Network.
Change the Adapter Type from PCnet-FAST III to Intel PRO/1000 MT Desktop (82540EM)
On the Settings window, click on Audio.
Check Enable Audio.
In Host Audio Driver, change from “Null Audio Driver” to “Windows DirectSound” (you may have something else there)
In Audio Controller, select ICH AC97 or any other controller available.

Click OK.
Start your virtual machine with Window 7.
You should see a pop-up showing that Windows 7 has found some hardware and has installed the drivers.

Make sure to install the audio drivers
Make sure to go to My Computer > Right-click on Manage > Systems Tools > Device Manager.
Under Sound, video and graphic, right-click on the Multimedia Audio Controller > Properties.
Go on the Driver tab and

Click Update Driver…
Select Search automatically for updated driver software
The system should start installing driver software…

You should now have your sound installed.

Click Close.
In your device manager window, you should see listed your audio controller.

Reboot your virtual machine to complete installation.
You are now done installing Windows 7. 7 for 7.
You can open your internet explorer 8 Beta and have fun with it. 8 for 8.

Note

Windows 7 Beta expires August 2009.
Activate Windows if you want to use it more than 30 days. You can run the activation process by searching for 'Activate Windows' on the Start Menu.

How To: Install Windows 7 on VirtualBox 2.1 – Installation details

Cedric Boudoya — Tue, 20 Jan 2009 13:42:59 -0500

On my previous blog posts, I cover the installation of VirtualBox 2.1 and I go over the step-by-steps to create a virtual machine to host Windows 7.

I will now go over the details to install Windows 7.

You should have the VirtualBox setup and started the virtual machine by clicking on the start button.

Click OK.
The first run wizard starts. Select Image File and browse your image on your drive.
1. once you clicked the browse button, click the add button and select the ISO file for Windows 7. I am using 7000.0.081212-1400_client_en-us_Ultimate-GB1CULFRE_EN_DVD.iso
  
  Click Select and go get a coffee.
Windows is loading files.
Starting Windows
Select Regional Settings. Click on Next.
Start the installation. Click on Install Now.
Setup is starting.
License Terms. Check I accept the license terms and click Next.
Type of installation. Click Custom (advanced).
Select Installation drive.
Installing…
Enter your account and computer name. and enter your password on the next screen.
Enter serial number.
Set up windows updates.
Review your time and date settings.
Windows 7 starting.
You should now see the Windows 7 desktop.

Now that it is in installed, more configurations are necessary to fix the sound and video and the network adapter. In the next post, I will provide the fixes.
I hope that this article helped out to install Windows 7 and have fun with it.

Technorati Tags: Windows 7,VirtualBox

How To: Install Windows 7 on VirtualBox 2.1 - Create a virtual machine

Cedric Boudoya — Tue, 20 Jan 2009 13:41:40 -0500

Today, I will go through the step by step instructions to setup VirtualBox for Windows 7.
First of all, You will need to install VirtualBox. Follow my VirtualBox installation guide from a previous blog post if you need the step-by-steps.

Clicking on the "New" button in the user interface will guide you through setting up a new virtual machine (VM). Click Next.
You must provide a name for your VM, and the type of operating system (OS).
Click Next.
You must give the amount of memory (RAM) for Guest OS.
If your host machine has 1 GB of RAM and you enter 512 MB as the amount of RAM.
Click Next.
You must specify a virtual hard disk for your VM. Click New.
1. Click Next.
2. Select storage type “dynamically expanding storage”.
3. Specify space with 20 GB. Click Next.
  
  Pick a location on your drive to store the virtual hard drive (.vdi).
  
  Click Save
  
  Click Next.
4. Click Finish.
Now you get to review the virtual hard disk details.
Finally, review the virtual machine details.
You are done with the virtual machine set up. You should see the main screen of VirtualBox.
If you click , the virtual machine will start.

My next blog post will go over the installation process of Windows 7 on VirtualBox.

Technorati Tags: VirtualBox,Windows 7

How To: VirtualBox 2.1 Installation Guide

Cedric Boudoya — Tue, 20 Jan 2009 13:38:23 -0500

In this step-by-step guide, we will install VirtualBox 2.1. This article is the first in a multi-part series on installing Windows 7 beta on a VirtualBox virtual machine. Let's get started...

Get the virtual box binaries and its source code from http://www.virtualbox.org/wiki/Downloads.
Launch VirtualBox-2.1.0-41146-Win_x86.msi
Click Next
Accept the terms… and click Next
Click Next
Click Next
Click Install
On the Warning Message, click Continue Anyway (twice)
On the Warning Message, click Continue Anyway
Click Finish
Once the application run, cancel the registration form if you want.

You are now done installing VirtualBox 2.1.

Technorati Tags: VirtualBox

Visoft, Inc. Blogs

Book Review – Manning The Art of Unit Testing

Come On, The “Best”

Chapters

More From Roy

Silverlight 3 NavigationCacheMode To The Rescue

The Problem

The Solution

ASP.NET 4.0 AJAX Issues

Issue 1 – The ScriptManagerProxy and CompositeScripts

Issue 2 – Incorrect Field Name

ASP.NET AJAX 4.0 and the ScriptManager Control

Preview 4 and the ASP.NET 3.5 ScriptManager

Client Templates and ASP.NET 4.0 ScriptManager

ASP.NET 4.0 ScriptManager - Activating Elements Declaratively

ASP.NET 4.0 ScriptManager – ASP.NET AJAX Enhancements

More ASP.NET AJAX 4.0 Reading

ASP.NET 4.0 AJAX – Preview 4 – Data Binding

Source Code

The Simplest Live Binding Example

Using Sys.Binding Imperatively

Using Sys.Binding Declaratively

Live Binding Syntax

Binding Modes

Sys.BindingMode.auto

Sys.BindingMode.twoWay

Sys.BindingMode.oneWay

Sys.BindingMode.oneWayToSource

Sys.BindingMode.oneTime

The “Classic” Example: Master/Detail

Server-Side Code

Client-Side Code

Conclusion

ASP.NET 4.0 AJAX – Preview 4 – JavaScript Observer Pattern

A Quick Look at JavaScript Objects

The Object Modification Problem

Observing Changes with Sys.Observer

Sys.Observer, JavaScript Arrays, and the DataView

Conclusion

How To: Adding MVC items to an ASP.NET Web Application

Book Review - Wrox Professional ASP.NET MVC 1.0

The Book - Overview

The Chapters

Conclusion

ASP.NET 4.0 AJAX – Preview 4 – Client Templates

Introducing the Sys.UI.DataView Control

DataView and Declarative Binding

DataView and Imperative Binding

Binding the DataView to a WCF REST Service

Passing Parameters Using the DataView and REST

Conclusion

SQL Express 2008 x64 Integration with Visual Studio 2008 SP1

The Fix - Option 1 - Use SQL Express 2008 x86

The Fix - Option 2 - Using SQL Express 2008 x64

Configuring SQL

My Wrox Blox Books - Now on Amazon!

How To: Install Windows 7 on VirtualBox 2.1 – Fix Sound, Video and Network adapter

Mount Guest Additions

Guest Additions Installation Wizard

Install Network and Sound devices

Note

See Also

How To: Install Windows 7 on VirtualBox 2.1 – Installation details

How To: Install Windows 7 on VirtualBox 2.1 - Create a virtual machine

How To: VirtualBox 2.1 Installation Guide