Jim Wang's Blog

Debugging Node (node-inspector) in the Azure emulator

Tue, 17 Apr 2012 23:03:12 GMT

One thing I ran into this week is trying to run node within the Azure emulator, giving me access to the emulated versions of Azure table storage, queues, and blob, while also having debugging running.

If you are familiar with the Azure Node.js SDK, you’ll know that you can launch your role using the Start-AzureEmulator Powershell command. Unfortunately, this command doesn’t seem to have any debugging options.

Fear not: there’s an easy way to get this up and running with node-inspector: you can open up ServiceDefinition.csdef, where you should see the following line:

<EntryPoint>
  <ProgramEntryPoint commandLine="node.exe .\server.js"
       setReadyOnProcessStart="true"/>
</EntryPoint>

So if you already have node-inspector (if not, run “npm install node-inspector –g”), you can launch it with the “node-inspector” command, and then change this line in ServiceDefinition.csdef to be:

<EntryPoint>
  <ProgramEntryPoint commandLine="node.exe --debug-brk .\server.js" 
      setReadyOnProcessStart="true"/>
</EntryPoint>

Then run Start-AzureEmulator. Happy debugging!

Implementing a Facebook Like Button with Knockout.js

Thu, 23 Feb 2012 20:35:54 GMT

Recently I’ve been playing around with Knockout.js, and one of the features I wanted to implement was a Facebook like button inside of the details view of a master-detail. Facebook provides the following code snippet for their JavaScript SDK:

<div id="fb-root"></div>
<script>
    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=10349446178";
        fjs.parentNode.insertBefore(js, fjs);
    } (document, 'script', 'facebook-jssdk'));
</script>

As well as the following markup snippet for the actual like button implementation.

<div class="fb-like" 
  data-send="true"
  data-show-faces="false" 
  data-href="www.facebook.com">
</div>

Unfortunately, if you simply try the following code – things will not work as you change the details view as the Facebook SDK will not reparse the page to update the URL and render the Like button.

<div class="fb-like" 
  data-send="true" 
  data-show-faces="false" 
  data-bind="'data-href': myUrl">
</div>

Fortunately there’s a simple workaround – create your own binding handler, and then call Facebook’s JS API directly to reparse the markup that you have for the like button. Here’s the binding handler:

ko.bindingHandlers.likeButton = {
  update: function (element, valueAccessor) {
    $(element).attr('data-href', valueAccessor());
    FB.XFBML.parse();
  }
}

Note that I can also be more specific by calling FB.XFBML.parse() on the specific element that contains the like button (not the actual like button itself, for reasons I did not investigate further – likely this is an implementation detail on Facebook’s side). Intuitively though, you should probably pick the containing div as a target for the parse() call for the best performance.

Then simply update your markup to this:

<div class="fb-like"
  data-send="true"
  data-show-faces="false"
  data-bind="likeButton: myUrl">
</div>

And you’re done!

The Commoditization of Search Engines?

Mon, 07 Nov 2011 20:43:13 GMT

I was reading a Facebook post by a friend today inviting others to try Bing (which currently offers a rewards plan for using it where you can get gift certificates for searching and clicking on sponsored links). I’ve also recently heard about duckduckgo.com, another up and coming search engine.

For the past few weeks I’ve been rotating between using Google, Bing, and DuckDuckGo, and to be honest, I really can’t tell the difference anymore for most of my searches. If I were to do the same thing last year (when I first switched to Bing), there would be things I would need to fall back to Google for. I think a big part of this is that search in general is getting better, to the point where 90%+ of my searches on any engine will give me a relevant result on the first page.

This reminds me of what happened with wireless routers back in the day, when they were new, high margin devices and brands like Linksys, D-Link, and Netgear were clearly differentiated by feature sets, reliability, and UI. Don’t get me wrong, the same holds true today, but to be honest margins have dropped and the differences in terms of wireless performance are difficult for an average consumer to grasp. This lack of ability to differentiate a product leads to commoditization, where producers are unable to effectively market their product.

I think most people would agree today that a wireless router is a commodity. And I would like to think that there are a couple of parallels between that and search engines. Two things jump out at me about the wireless router market:

1. Figuring out which wireless router to buy is difficult. If you go read user reviews, you will see many 5 star and many 1 star ratings for the typical product. It’s impossible to tell who is credible unless you invest a significant amount of time reading reviews, go with the “average” assessment, or ask your friends what they use.

2. Due in part to #1, you stick with brands you know. For example, if you’re a Linksys person and you haven’t had issues with your last router, when time comes to replace it you will probably buy another Linksys product.

When it comes to search engines, I defy you for #1 to say that one search engine is always better than the other. Folks have their ingrained preferences, but if we were to objectively start from ground zero today (that is, you’ve never used a search engine), I think it would take you a while to figure out which one would work best for you, and even then, unless you have specialized needs such as development work, I would argue the differences are marginal.

For #2, like with routers, folks aren’t going to switch search engines unless they perceive a problem with their current solution. Let’s face it, most people on Google don’t feel like they have a problem today. Until the thought leaders start switching over to other search engines because of a remarkable improvement, it’s going to be an uphill battle for newcomers to the space, which brings us full circle to why Bing needs to incentivize you to switch.

What do you think? Feel like search engines are becoming a commodity?

The Beauty of The Web*

Mon, 05 Sep 2011 21:12:38 GMT

You would think that working on the ASP.NET team you would eventually get jaded by the novelty of the Internet and come to accept it as a fact of daily life. And to some extent this does happen because you’re focusing on the task at hand: pumping features out the door and ensuring that they rock.

I know it sounds cliché, but this weekend I was reminded of the simplest thing about the Internet: the fact that it allows people from all over the world to collaborate and help one another in real time (sometimes you don’t even need Twitter for that).

Here’s the story: I had my Mazda up on jack stands because I was planning to drain and replace the transmission and differential fluid. I got the differential fluid done fine, but when it came time to do the transmission, my transmission case looked different from the one in the step-by-step guide, so I was guessing which bolts were the fill and drain. Obviously this was the worst possible time, as I had already jacked up the car, was already dirty, and none of my friends who would have the expertise were available.

So I whipped out my laptop and posted a picture on Mazda forums, and within minutes somebody had gotten back to me and confirmed where the fill and drain plugs on the transmission were. Maybe I had just inhaled too many fumes, but in that moment, I was very grateful to have the Internet. And more importantly kind connected strangers willing to help a computer guy with his car.

*IE9 Reference Intentional. www.beautyoftheweb.com

Technical Talk Preparation–Practice.

Fri, 25 Mar 2011 00:53:00 GMT

As I’ve been preparing for my talks at DevConnections next week, it’s struck me how talk preparation is one of those things that is immensely enjoyable yet incredibly frustrating (read: time-consuming) at the same time.

Why me?

What’s so hard about giving talks? Well, being in a programmer role, this is one of those things that most people dread, and for good reason: it’s a lot of work and there’s a lot of pressure. But perhaps more importantly, you don’t get a lot of practice doing it. And this turns out to be incredibly important both in general and specific cases.

How did you become a good programmer?

Nobody ever sits down at a computer and instantly is a master programmer. Skill in programming, like any discipline, is learned, molded, and practiced, typically in a relatively relaxed environment where you get to collaborate with more experienced people who can give you feedback about your code. In my opinion, this is one of the reason open source projects tend to do so well. If you didn’t have to practice to get good, well, congratulations, you’re some kind of super genius, but I would say most people aren’t like you :).

So What?

At this point, you’re probably wondering what this observation has to do with giving technical presentations. Well aside from reading a list of tips, which is really useful and great, there is the underlying principle of getting better at anything. How do you build a better coder? I like to think of it in terms of three major categories:

Mentoring from experienced people: Code reviews, chatting with your managers and senior developers
Practicing: Getting hands on experience doing what it is you want to get better at, so in this case, writing code
Learning: This is an obvious but important point. Practice and mentoring are worthless unless you learn from them and do things differently. Don’t make the same mistakes. Learn new things. Keep getting better. My piano teacher always said: don’t trick yourself into thinking that doing something wrong 100 times is practice: it’s not. It’s better to do it right even just once.

What about my talks?

And so dear reader, if you’re still with me at this point, we come now to the crux of the matter. Most programmers have never had experience giving technical presentations, and thus never really had a change to practice or get good at it. Even for those of us who have, how often do you do it? That’s why Scott’s Post is so relevant: a lot of us simply don’t do presentations often enough to remember all of these things and get better at them. I myself am guilty of this, and find that every time I have to do talks I need to rebuild some of my expertise, and this takes some time.

Fine, but why do I care? Let Scott do the demos.

Technical presentation skills are highly effective and transferrable to your day to day work. The core discipline is to communicate technical information as effectively as possible, and we all do this in our day to day work. More recently, our QA team has started recording bug repro videos for the developer team to use. Getting good at these is a great stepping stone to improving your presentation skills: nobody wants to watch a video of a bug report where you are saying “uhm” and “errrrr” all the time. I’ve also heard good things about Toastmasters as a way to get better by practicing, but YMMV.

Okay I believe you. How do I get better?

By now you probably know the answer. Practice. Like crazy. But look for opportunities to practice. Whether it’s giving a small presentation to your team, or maybe to your boss, or even getting good at shooting small videos, these things add up to being a better presenter. One of the things that helped me greatly was doing joint talks at first, with James Senior and also with Simon Calvert. I got to see first hand how experienced speakers prepared for talks, structured content, and kept the audience engaged.

My biggest three tips are:

Keep the audience engaged and involved. James Senior taught me this one first hand, and watching Scott Hanselman present has really driven this point home for me. People aren’t there just to learn from your content, they are there to be entertained and kept awake.
Provide compelling content. Tell a story. Nobody wants to see you go up there and rattle on about a boilerplate list of new features when they don’t see how it could map to their day to day work. Don’t expect anyone to make the leap on their own. Show them.
Practice. Know your talk and your content. Time your slides. Set up dry runs. Go over the talk until you know it by heart. It’s funny because you would think that this leads to a scripted delivery (and to be fair you should be careful that you aren’t doing this). On the contrary, I’ve found that it allows you to be flexible when questions do pop up –> you can recover much easier and also go off the beaten path if you sense the audience is interested.

I do have to credit Simon Calvert with teaching me the importance of #3. I think few people put in the tremendous effort to deliver a phenomenal show for our customers. For all the blog posts and tweets and books I have and could have read, none of them resonated with me more than sitting down with a mentor and learning, apprentice-style, from a master. I encourage you all to find these people in your circle and follow in their footsteps. Happy practicing!

CodingQA

Mon, 07 Mar 2011 04:59:39 GMT

For those of you who have heard about it, Mark Berryman and I are taking over the CodingQA podcast from Matthew Osborn and Federico Silva Armas.

In our first episode, we talk about the different roles –> how developers and testers work together, and how it’s not about the people, but sometimes about the part they play. Check it out, I promise more episodes to come :)

Keyboard locking up in Visual Studio 2010, Part 2

Wed, 02 Mar 2011 00:55:03 GMT

Last week I posted about looking into the keyboard locking up issue in Visual Studio. So far it looks like not a lot of people have replied to provide concrete repro steps, which confirms my suspicion that this is somewhat of a random issue.

So at this point, I have a couple of choices. I can either wait for somebody in the community to provide a repro of the problem that I can reliably run into, or I can do the work myself.

I’m going to do both, so while I’m waiting for more possible bug reports, I’m going to write a tool that models the behavior of a typical Visual Studio user and use that to hopefully isolate the problem.

I’ve chosen to go with this path since given the information in the bug reports, it seems people hit the issue with many different configurations in many different scenarios. This means that me sitting down without any solid repro steps is likely not going to be a good use of time. Instead, I’m going to go with a model-based testing approach where I will define a series of actions that a user in VS can do, and then proceed to run my model. I’ll let you guys know how this works out for isolating bugs :)

I’m using an internal tool for the model engine and AutoIt for the UI automation (I want something lightweight for a one-off). One of the challenges will be getting feedback: AutoIt is great at driving, but not so great at understanding what success and failure means.

Keyboard locking up in Visual Studio 2010

Thu, 24 Feb 2011 01:55:00 GMT

One of the initiatives I’m involved with on the ASP.NET and Visual Studio teams is the Tactical Test Team (TTT), which is a group of testers who dedicate a portion of their time to roaming around and testing different parts of the product. What this generally translates to is a day and a bit a week helping out with areas of the product that have been flagged as risky, or tackling problems that span both ASP.NET and Visual Studio. There is also a separate component of this effort outside of TTT which is to help with customer scenarios and design.

I enjoy being on TTT because it allows me the opportunity to look at the entire product and gain expertise in a wide range of areas. This week, I’m looking at Visual Studio 2010 performance problems, and this gem with the keyboard in Visual Studio locking up ended up catching my attention.

First of all, here’s a link to one of the many Connect bugs describing the problem:

Microsoft Connect

I like this problem because it really highlights the challenges of reproducing customer bugs. There aren’t any clear steps provided here, and I don’t know a lot about your environment: not just the basics like our OS version, but also what third party plug-ins or antivirus software you might be running that might contribute to the problem. In this case, my gut tells me that there is more than one bug here, just by the sheer volume of reports. Here’s another thread where users talk about it:

Microsoft Connect

The volume and different configurations are staggering. From a customer perspective, this is a very clear cut case of basic functionality not working in the product, but from our perspective, it’s hard to find something reproducible: even customers don’t quite agree on what causes the problem (installing ReSharper seems to cause a problem…or does it?).

So this then, is the start of a QA investigation. If anybody has isolated repro steps (just comment on this post) that they can provide this will immensely help us nail down the issue(s), but I’ll be doing a multi-part series on my progress and methodologies as I look into the problem.

Windows Phone 7 Dev Deployment

Sun, 20 Feb 2011 02:05:00 GMT

Recently, I’ve been playing around with the Windows Phone 7 Developer experience. Quick tip: I tried to deploy my application to the phone, and got an error: “Zune software is not launched. Retry after making sure that Zune software is launched.” This wasn’t particularly helpful for me since I did have the software launched, and my phone was connected through wireless sync (didn’t remember this at the time).

A quick search turned up nothing, and restarting the client didn’t help. But then I remembered my setup and plugged my phone straight into the USB port and then had no problems.

Thinking about it, I wouldn’t expect this scenario to work, but there was no indication of this provided to me as a devt.

A couple of takeaways as a tester and geek:

1. Bad error messages cause customers a lot of pain. Fighting for these in triage is probably worth your time.

2. Wired > Wireless, even in 2011 :)

DevConnections Orlando

Wed, 16 Feb 2011 03:03:36 GMT

If all goes well I’ll be speaking about WebMatrix and NuGet this March at DevConnections Orlando! I always enjoy coming out to conferences and meeting customers who work on the Microsoft stack. When I went to DevConnections Las Vegas in 2009 it was to talk about what was new in ASP.NET Web Forms, and it was really great to hear all the community feedback about the new features we were delivering. I look forward to seeing you all in March and talking about the new web development paradigm we are delivering with WebMatrix. Till then!

Getting Wishlist through _admin in WebMatrix

Tue, 08 Feb 2011 01:21:00 GMT

Put together this video showing how easy it is to install Wishlist now that we have shipped on www.nuget.org :) Note that the best thing to do will be to watch in 1080p.

Happy New Year! Back to school :)

Thu, 06 Jan 2011 01:51:28 GMT

A brand new year is upon us and it’s time to get cracking with WebMatrix again…and go back to school :). Last year we ran a successful product walkthrough for WebMatrix Beta 2 with our students from around the world, gathering awesome feedback for the final version of WebMatrix which is coming soon! I’d like to take this chance to thank all the students who participated in this effort…you have really helped make the final product much better than it would have been otherwise.

In 2011, we’re looking, as always, at bigger and better things. One of the ideas that has been floating around is the concept of a WebMatrix college course that you could take for actual credit. Of course, this is going to require coordination with college educators, but we think we’re up to the challenge :)

If your school is still using an antiquated language to teach their web development 101 course, and you’d like to switch to WebMatrix, we’d like to hear your voice – better yet if you have contacts from your school and would like to be one of the first to give the program a try! Comment on this post or email wptsdrext at microsoft.com. We look forward to partnering with you guys ^^.

Web Camps TV #10–WebMatrix Beta 2

Wed, 20 Oct 2010 18:32:29 GMT

James Senior and I are at it again, this time in my office :). Check out the newest video on WebMatrix Beta 2 where we discuss Themes, Package Manager, Helpers, and the new HTML 5 templates here.

Interview on WebCamps

Sun, 12 Sep 2010 07:35:00 GMT

For those of you who follow Channel9, I recently did an interview with James Senior (@jsenior) about the new ASP.NET Web Pages Helpers. Check it out here and let me know if you have any questions :)

Wishlist

Sat, 24 Jul 2010 01:13:00 GMT

Hello everybody! It’s been a looong while since my last post and a lot has happened since then. I switched from working on ASP.NET Ajax to ASP.NET WebPages (using the “Razor” syntax), and until recently, WebMatrix and ASP.NET WebPages haven’t been public, so I couldn’t blog about the awesome feature set that we’ve been building out. There are numerous posts on the release, the most prominent of which is on ScottGu’s Blog. Another good overview for WebMatrix can be found on the Coding QA Blog.

So what have I been up to? Once of the things that Coding QA talks about in Episode 33 is our team structure. Starting in January, I joined the Product Presence pillar and started contributing to product design and testing from a customer perspective. One of the things that we did as part of this highly effective process was build an application, the Wishlist. The idea is that it allows users to create lists of items they would like others to purchase for them. We got to the point where we had enough feature coverage that we decided it would make sense to ship it as a ASP.NET WebPages template. In this post we’ll discuss getting started with the template from a user perspective and run through a high-level feature overview, touching on places where we’ve used ASP.NET WebPages helpers and functionality.

Getting Started

You can get started by downloading the Wishlist template. Assuming you’ve already installed WebMatrix, you can extract the zip and then open up the site “From Folder” in WebMatrix. Then, you’ll be tasked with changing some initial settings in _Start.cshtml to set up ReCaptcha and email, so that registration will work with a ReCaptcha, and email will be sent for user confirmation, and in the case of a user forgetting their password. You can register for ReCaptcha public and private keys at www.recaptcha.net. As for email, the configuration allows you to set the SMTP server, port, and whether or not you need to use SSL. By default, the template is set up to work with Hotmail if you simply enter UserName, From, and Password. UserName/From is going to be your Hotmail e-mail address, and password is going to be your password. I recommend setting these parameters so you get a good feel for the end-to-end functionality of the site as originally intended :)

Tip: If you don’t want to set up email or ReCaptcha, you can still use the template normally…mail will not be sent and you will be able to use the links directly in the page

Registration

Now that you’ve set up Mail and ReCaptcha, you can Register your user account. By default, Wishlist takes advantage of the user confirmation feature in SimpleMembership (Matthew Osborn has a detailed post about SimpleMembership here), and will send mail to the user asking them to confirm the account before they can login.

After you have registered and confirmed your account, you can login (there’s also a Forgot Password feature that takes advantage of the recovery question and sends an email which I will cover in a future post) where you will be greeted with this UI:

I’m not going to go into all feature areas in extreme detail, but one thing you will notice is that you can edit properties in your Profile. This is what you would expect, it allows you to change your email and your password. Let’s go ahead and create a list by clicking on “Create List”. I’m going to call it Christmas, with a blank description. You’ll notice that jQuery validate is enabled, and I will get a client side validation error before I go back to the server:

Now I can create the list. So now there are two lists:

The UI allows you to make a list default, and also there is an [x] to delete a list. If I click on this, I get presented with a jQuery dialog, which works as you would expect. The “Default” feature allows me to navigate to http://localhost/wishlist/displaylist/username and have that list displayed. For details on how this works, see DisplayList.cshtml.

Note that I can also click on the “Edit” button or icon and modify the name or description of my list. If I click on the name of the list, I will be presented with this UI:

You’ll notice that this allows you to add items to the list, as you would expect. There’s also a LinkShare (a helper available in ASP.NET WebPages), which allows me to easily share out the link to my list via Digg, Delicious, Buzz, Facebook, Reddit, StumbleUpon, or Twitter. Here’s what the page looks like after I’ve added my awesome car to it:

You’ll notice that there is a “Claimed” field. You can change the value of this field via the “Edit” button, or if you log out and navigate to the same page again, you can claim the item, as this screenshot shows:

This page, as well as the “Manage Site” page we’ll look at later, make use of the WebGrid helper to display information from the database, which enables sorting and paging functionality out of the box. The last page we’ll take a look at is the “Manage Site” page (UserManagement.cshtml). I’ve added another user, which has an email with an associated Gravatar. You can see that this page lets me perform administration tasks for my users. It also shows me if they have been confirmed or not, and has Ajax functionality enabled for the WebGrid so you can perform operations without causing a full postback to the server. You can also click on selection to update a user's first and last name, email, and toggle whether or not they are an administrator.

This has been a very brief high-level overview of the Wishlist site. I plan to do more posts in the future where I look at particular pages in detail. Please post your feedback on the WebMatrix forums or comment here for any issues or suggestions you have. Thanks!

DevConnections 2009

Wed, 11 Nov 2009 01:32:00 GMT

Thanks to everybody who showed up at the talk that Simon Calvert and I gave on an overview of ASP.NET 4 Webforms! Your participation and feedback were much appreciated, and as promised, I’ve attached the demo that Simon and I built live, as well as the slide deck, to this post. For those of you who missed it, the talk gives an overview of the SEO/Routing improvements, XHTML 1.1 compliance, ClientID control, ViewState reduction, CSS improvements, Microsoft Ajax Preview 6 updates, Dynamic Data in 4.0, QueryExtender, and the Chart Control. There was a lot to cover in an hour :). For those who went to the Ajax talk I did with James Senior, here’s a link to the Preview 6 download directly with the samples. Enjoy the demos and deck, note that the demos require VS 2010 Beta 2, which you can get here. NOTE: The demos attached to this post need you to drop your own copy of the NorthwindDatabase and the AspNet DB (the AspNET DB is in the default ASP.NET 4 templates). I ran into an upload file size limitation on community server. If you would like the full demo with the databases I have a RapidShare link here. Note that the admin user/password is Jim/aspNET

ASP.NET Ajax Preview 5 and Application Services

Wed, 30 Sep 2009 18:15:00 GMT

Recently there was an issue posted to the ASP.NET customer forums where somebody was having problems using Profile Services with ASP.NET Ajax Preview 5. The reason is that the scripts for Application Services have been moved to a separate script file (to improve script download size). We did not include the script in the Preview 5 release however, so if you want to use Preview 5 with Application Services features, you need to work around by taking the Sys.Services code and merging it into the Preview 5 MicrosoftAjax.js file. For your convenience and at Dave Reed’s suggestion, I’ve gone ahead and done this, so if you are targeting this scenario, use the new versions of MicrosoftAjax.js and MicrosoftAjax.debug.js that are included in the zip file attached to this post.

ASP.NET Ajax Preview 5 and UpdatePanel

Sat, 12 Sep 2009 01:18:00 GMT

Many of you have probably heard that we’ve released ASP.NET Ajax Preview 5 on Codeplex, and it’s available here. Aside from all the cool updates to the codebase, Preview 5 also includes some updated samples, as well as support for UpdatePanel when using ASP.NET 3.5 SP1.

Previously, this didn’t work because of updates to the scripts for compatibility with 4.0. Now, with this fixed, you can easily add Ajax Preview 5 functionality to existing sites and enjoy continued operation. There is a very simple example included with the Preview 5 samples that demonstrates this functionality (8_UpdatePanel.aspx under the 1_Basic_DataView folder). I’ll quickly cover here how to get your existing UpdatePanel working with the new Preview bits.

Basically, all you need to have is an additional ScriptReference to the included MicrosoftAjaxWebForms.js file for Preview 5 to work with the UpdatePanel. So your ScriptManager should look something like this:

<asp:ScriptManager ID="sm1" runat="server">
    <Scripts>
    <asp:ScriptReference Name="MicrosoftAjax.js" Path="~/MicrosoftAjax/MicrosoftAjax.js"/>
    <asp:ScriptReference Name="MicrosoftAjaxWebForms.js" Path="~/MicrosoftAjax/MicrosoftAjaxWebForms.js" />
    </Scripts>
</asp:ScriptManager>

This will allow you use any UpdatePanels that you have on the page in exactly the same way you did in 3.5 SP1, while providing the flexibility for you to include other Ajax Preview scripts and start using those features side-by-side.

I would argue one step further, however, and state that in many cases, where you were using an UpdatePanel before, you can now move to using ADO.NET web services coupled with the Preview 5 scripts.

To illustrate this, let’s take a look at an old school sample using UpdatePanel and GridView. This sample illustrates using the UpdatePanel and GridViews to create a simple read-only employee name entry system. A screenshot is shown below:

We’re going to put this sample to shame using Preview 5.

There’s 146 lines of markup in this page, and every time you hit “Insert”, you’re looking at a partial-page postback, which has to hit the server to do processing, pull down the data for the new page, and then update the appropriate portions.

If instead we use a DataView hooked up to an ADO.NET data context, we can build a similar application which will be much more efficient (dealing with JSON instead of full sets of page data on the wire), much shorter, and much simpler. Let’s begin.

Since we already have the samples, let’s create a new .aspx page, Employees.aspx, under the 1_Basic_DataView folder. Let’s set up the following ScriptManager:

<asp:ScriptManager ID="sm1" runat="server">
    <Scripts>
    <asp:ScriptReference Name="MicrosoftAjax.js" Path="~/MicrosoftAjax/MicrosoftAjax.js"/>
    <asp:ScriptReference Name="MicrosoftAjaxWebForms.js" Path="~/MicrosoftAjax/MicrosoftAjaxWebForms.js" />
    <asp:ScriptReference Path="~/MicrosoftAjax/MicrosoftAjaxTemplates.js" ScriptMode="Inherit"  />
    <asp:ScriptReference Path="~/MicrosoftAjax/MicrosoftAjaxDataContext.js" ScriptMode="Inherit"  />
    <asp:ScriptReference Path="~/MicrosoftAjax/MicrosoftAjaxAdoNet.js" ScriptMode="Inherit"  />
    </Scripts>
</asp:ScriptManager>

Users of previous previews might recognize that there is a new file here, MicrosoftAjaxDataContext.js, which now contains the DataContext and AdoNetDataContext classes. Of course, these classes become more useful in read/write scenarios, but I’m going to use them in this read-only example for illustration purposes.

Let’s also take this opportunity to set up our <body> tag for DataView use by adding the appropriate namespaces.

<body xmlns:sys="javascript:Sys" xmlns:dv="javascript:Sys.UI.DataView">

Also remember to add the .sys-template style to your <head> section:

<style type="text/css">
    .sys-template {display:none}
</style>

So now we’re ready to add our AdoNetDataContext. Let’s set up our pointer to the service:

<script type="text/javascript">
        var myDC = new Sys.Data.AdoNetDataContext();
        myDC.set_serviceUri("../Services/ImagesDataService.svc");
</script>

So here I’ve created a new AdoNetDataContext and pointed its serviceUri to my ADO.NET Data Service. Now I’m going to set up a DataView to query this service for People so that I can get a list. So I enter the following markup:

<div id="inputTable">
    First Name: <input id="firstNameInput" type="text" /><br />
    Last Name: <input id="lastNameInput" type="text" /><br />
    <a href="#" onclick="insertPerson()">Insert</a>
    <a href="#" onclick="cancelPerson()">Cancel</a>
</div>
<br />Employees:<br />
<div id="employeeView" class="sys-template" sys:attach="dv" 
                    dv:dataprovider="{{myDC}}" dv:autofetch="true" dv:fetchoperation="People">
    {{FirstName}} {{LastName}}<br />
</div>

So here I’m setting my DataView’s dataprovider to the AdoNetDataContext that I created, turning on autofetch, and specifying the fetchoperation to query for “People” from the database. I’ve also set up a simple UI which includes links to the insertPerson() and cancelPerson() JS functions, which I’m going to write now:

function insertPerson() {
    var firstName = $get("firstNameInput").value;
    var lastName = $get("lastNameInput").value;
    if (firstName != "" && lastName != "") {
        var myObject = {
            FirstName: firstName,
            LastName: lastName
        }
        myDC.insertEntity(myObject, "People");
        var data = $find("employeeView").get_data();
        Sys.Observer.insert(data, data.length, myObject);
        $get("firstNameInput").value = "";
        $get("lastNameInput").value = "";
    } else {
        alert("You must enter a first and last name!");
    }
}
function cancelPerson() {
    $get("firstNameInput").value = "";
    $get("lastNameInput").value = "";
}

So basically in insertPerson(), I’m creating a person object based on the first and last name that were entered by the user (assuming they weren’t blank), and inserting an entity into my AdoNetDataContext. For the purposes of this example, this isn’t strictly necessary, but I do it here for illustration purposes (in case you want to add read/write later). Then, I simply need to update the rendered data on the client, and I do so using the insert method of the Sys.Observer class, which allows me to insert the person object in a way that is recognized by the DataView. Then I clear the input fields for the next person to be entered. In cancelPerson(), I’m doing something similar, where I simply clear the input fields.

Of course, it’s easy to add read/write scenarios to this sample. I encourage you to check out the ImageOrganizer sample and associated code there for further examples.

So there you have it. Although it doesn’t do exactly what the UpdatePanel sample does, it’s essentially the same idea. Final line count: 67. Win :)

Coding QA Podcast and ASP.NET AJAX

Fri, 26 Jun 2009 17:14:44 GMT

The kind folks over at Coding QA Podcast (www.codingqa.com) did an interview with me yesterday, where I talk about some of the challenges with testing and building Microsoft AJAX and talk a little bit about myself. There’s also a brief discussion of the Lightweight Test Automation Framework, and the new IE8 Debugger. I forget what the questions are every so often, but in my unbiased opinion it’s a pretty good listen ;). Click here to jump to the Coding QA Podcast site.

ASP.NET AJAX Preview 4 Samples

Mon, 06 Apr 2009 23:28:38 GMT

Politian has posted a lot of samples on using the new ADO.NET Data Services features in ASP.NET AJAX Preview 4 (in fact, at the time of this posting, the entire blog is dedicated to Preview 4!). He walks through some basic scenarios, but then goes into detail about interesting sample topics as he builds his MIX Presenter Application. Highlights thus far:

Keep up the great work Politian! Remember that you can get ASP.NET AJAX 4.0 Preview 4 on Codeplex.