Brad Abrams : Atlas

Search autocomplete with ASP.NET AJAX Extensions

BradA — Sat, 28 Oct 2006 08:59:00 GMT

I am working on a rich content app for one of my talks at TechEd Europe and I thought it would be a good idea to implement a search box with an autocomplete of the past search quires. The intuition here is that the changes are someone else has searched for the same thing you are searching for, so past queries is an interesting set of options to offer. Not to mention it is fun to look at what other people are searching for ;-) What I think is cool about this is I was able to implement it with less than 10 lines of code and absolutely no database specific logic. I did this with a combination of the ASP.NET 2.0 profile store and the ASP.NET AJAX AutoCompleteExtender…

Here is an example screenshot and all the code\markup required… I'd love to hear what you think… do you think this makes for a compelling demo?

Html for search box and "submit" link (default.aspx)

<div id="links">
   Search for
   <asp:TextBox ID="searchtext" runat="server" CssClass="searchbox" /> 
   <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">go</asp:LinkButton><br />
</div>

ASP.NET handler for the LinkButton (default.aspx)

protected void LinkButton1_Click(object sender, EventArgs e)
{
   StringCollection list = Profile.SearchTerms;
   if (!list.Contains(searchtext.Text))
   {
      list.Add(searchtext.Text);
   }
   //TODO: Do search
}

ASP.NET AJAX goodness (default.aspx)

<asp:ScriptManager ID="ScriptManager" runat="server" />
<asp:AutoCompleteExtender ID="AutoCompleteExtender1" TargetControlID="searchtext"
runat="server" ServiceMethod="GetCompletionList"
ServicePath="~/SearchAutoComplete.asmx" MinimumPrefixLength="1" />

Web Service Implementation (SearchAutoComplete.asmx)

[WebMethod]
public string[] GetCompletionList(string prefixText, int count)
{
   StringCollection list = (StringCollection)HttpContext.Current.Profile["SearchTerms"];
   List<string> suggestions = new List<string>();
   foreach (string s in list)
   {
      if (s.StartsWith(prefixText))
      {
         suggestions.Add(s);
      }
   }
   return suggestions.ToArray();
}

Profile Config Section – (Web.config in <system.web> )

Exercises left for the user

Clean up any bad or misleading search terms
Sort hits by relevance
Add a hit count
Age out older results

Microsoft AJAX Library at the AJAX Experience

BradA — Tue, 24 Oct 2006 06:17:00 GMT

I had a great time at the AJAX Experience Conference today.

John Resig did a good talk on choosing the right Ajax framework for you. He laid out four attributes you should use when you judge an Ajax library…. While he didn't mention the Microsoft AJAX Library, I think it stacks up very well in these attributes.
- Documentation – By this, John means how well is the framework explained, are their great examples? Microsoft Ajax Library has great docs already http://ajax.asp.net/docs/, we have several fulltime User Education folks working everyday to make them better. This include partical walkthroughs such as Installing ASP.NET AJAX and How To: Call a Web Service from JavaScript as well as details such as the JavaScriptSerializer class.
- Community Support – John measured this by how active the lists are. Which is a proxy for how quickly you get answers when you get blocked. As of right now, our community site have 383 people on line, 140 unique threads just today. As if that is not enough, when we ship, the Microsoft AJAX Library will 100% supported by Microsoft Product Support Services. That is 24x7x365 phone and forums support by fulltime people that are focused on finding solutions or we will fix the product. No other AJAX library offers this level of support.
- File Size – The Microsoft AJAX Library is just over 20Kb when it is scrunched and compressed. Based on John's analysis of this very much in line with other AJAX frameworks.
- Popularity – This is a question of who is already using the framework. Helps to speak to maturity and completeness. At least you will know you are not in it on your own. The Microsoft AJAX Library has a good set of case studies, and Microsoft has some big name sites that we will be looking at for the Microsoft AJAX Library very soon. This is not to mention the HUGE number of ASP.NET developers that will undoubtedly make big usage of this technology when it ships!
While I am not sure these are the definitive set of attributes to use in making your decision, it is good to know that the Microsoft AJAX Library stacks up pretty well on these attributes.
My talk was a lot of fun. I was not surprised to have several folks that were already using ASP.NET and the Microsoft AJAX Library, but I was happy to see a fair number of folks checking out the Microsoft AJAX Library for the first time. A few things that I think really resonated with this crew.
- The Microsoft AJAX Library works in all major browsers (Safari, FireFox and IE)
- The Microsoft AJAX Library does NOT require ASP.NET, IIS, or even Windows on the server.
- The Microsoft AJAX Library has great support for WebServices and JSON.
- The ASP.NET AJAX Extensions use of the AJAX Library making it super easy to build AJAX apps with no JavaScript… or even code required!
A couple of the very simple examples I showed how easy the framework is to use… Think of what this would look like with using XmlHttp directly? Think of all the amazing things you can with the full power of the .NET Framework on the server and the Microsoft AJAX Library on the client!
- Default.html
  <html>
  <title>Untitled Page</title>
  <body>
  <form id="form1" runat="server">
  <asp:ScriptManager ID="ScriptManager1" runat="server">
     <Services>
        <asp:ServiceReference Path="WebService.asmx" />
     </Services>
  </asp:ScriptManager>
  <button onclick='WebService.HelloWorld(onComplete)'>ClickMe</button>
  <div id=myDiv></div>
  </form>
  <script type="text/javascript">
     function onComplete (results) {
        var mydiv = $get('myDiv');
        mydiv.innerHTML = results;
     }
  </script>
  </body>
  </html>
- WebServices.asmx
  <%@ WebService Language="C#" Class="WebService" %>
  using System;
  using System.Web;
  using System.Web.Services;
  using System.Web.Services.Protocols;
  using Microsoft.Web.Script.Services;
  [ScriptService]
  [WebService(Namespace = http://tempuri.org/)]
  [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
  public class WebService : System.Web.Services.WebService {
  
     [WebMethod]
     public string HelloWorld()
     {
      return "Hello World!";
     }
  }
The other simple example I showed is about using UpdatePanel to make an ASP.NET 2.0 app look like a first class AJAX app. See attached for the project files and my slides.

The panel tonight was a really great. I know I learned some stuff. Here are a few things that stood out to me:
- Someone in the audience pointed out that the debate about AJAX libraries seem to have moved up the stack. More around what UI widgets they offer rather than basic XmlHttp abstractions and JavaScript language extensions. I totally agree, there is only so much differentiation frameworks can do at that level. Now it gets more interesting as these UI widgets can't easily be ported from one base framework to another, so this will start to really draw some interesting differentiations over the next 6 months to a year.
- Someone on the panel mentioned that "Better is Simpler". When we talk about a web app getting "better" by using AJAX, what we *should* mean is the app got easier to use, has less surface area and is more intuitive.
- It is clear that the Atlas name is still sticking at the ASP.NET AJAX Extentions is mouth full for this group… so, as you can see from this post, I have decided to be more precise and refer to just the JavaScript implementation by its new official name… the Microsoft AJAX Library.
- Several of the questions centered on doing as much as possible in the browser rather than on the web server. I (and many of the panelest) suggested balance is what is needed here. There will always be a need for server side code. The AJAX model just changes the focus from being a project UI model to being more about providing an integrated set of application level services (authentication, role management, profile, etc). The marriage between ASP.NET and the Microsoft AJAX Library is a perfect fit for this.
- There was another set of questions on performance or network load of AJAX apps. Clearly there is no definitive answer here as it varies hugely based on your scenarios. However one of the panelists pointed out that in many cases you should be measuring the user perception of performance of the app rather than just raw throughput. That it is might technically be more bites of the wire to do several async network calls to populate a list rather than one big request, but the forum likely offers a better user experience.
- An interesting question was asked about the ethics of using AJAX techniques to say, send user data to the server while the user is in the middle of filling out a form so you have it even if the user doesn't hit submit. This is of course easy to with AJAX, but is it right? IMHO, this not a technical question – it is a question of what the users mental model of what happens is. Users have been trained to understand that their data isn't recorded until they hit submit. In fact IE has long warned users of this the first time there is a form post-back. Does this mean you can't cache user data or even implement an AutoComplete textbox? I don't think so… I believe all those are fine as long as you don't record the users data as if they had submitted the form.

I am looking forward to tomorrow! If you are at the show, drop by the booth and say "hi". I'd love to hear your thoughts.

Already a blast at the Ajax Experience

BradA — Mon, 23 Oct 2006 08:09:00 GMT

The conference has not even officially started and I am already having a blast. The long trip down here gave me a chance to do some coding with the new Beta of the ASP.NET Ajax Extensions. This is definitely fun stuff… If you have not already, I suggest you check it out. I was mostly working on the demos for my talk tomorrow a 3p.. if you are at The Ajax Experience, please drop by… I'd love to have your feedback.

Here is an early look at my slides… Love to have your comments…

Heading to Boston for the Ajax Experience Conference

BradA — Wed, 11 Oct 2006 17:52:00 GMT

October 23-25^th the next installment of the Ajax Experience Conference is being held in Boston. I am looking forward to hearing from many of the big names in the Ajax space…. Looks like all the major folks offering Ajax frameworks and the JavaScript experts will be there. Last time in the bay area I learned a ton from these guys. I’ll of course be talking a bit of Atlas… er, I mean the ASP.NET Ajax Extensions and the Microsoft Ajax Library… We have been doing some cool stuff recently, I hope to show off the latest of it.

If you are going, please drop me a line and let me know what you are looking forward to hearing… and please come by and chat with us…

See you there!

From Atlas to the ASP.NET 2.0 AJAX Extensions

BradA — Mon, 11 Sep 2006 20:39:00 GMT

As you saw from ScottGu’s blog, we gave Atlas an official name and, in response to strong customer feedback, have it on a plan to ship 1.0 around the end of the year on top of VS2005 and ASP.NET 2.0. The team is super focused on this goal and I am very pumped to be able to deliver it!

Want to name Atlas?

BradA — Thu, 17 Aug 2006 08:30:51 GMT

Steven Smith has a good discussion going on about what we should name "Atlas"... I can confirm that "Atlas" will not be the final name, and clearly we are listening, so add your funny and serious suggestions a like...

Atlas Naming Game (note, you gotta check out all the comments.. that is where the fun is)

Atlas Talk and demo in Spanish

BradA — Mon, 31 Jul 2006 17:03:46 GMT

Julio translated a recent atlas talk and demo I did into Spanish.. Great to see Atlas reaching a much broader community.

Spanish translated slides

Spanish translated demo

Enjoy!

Video from Web Design World Talk...

BradA — Wed, 26 Jul 2006 17:51:29 GMT

The video of my Web Design World talk was just posted... Take a look... I'd love to hear your feedback, thoughts.

http://www.ftponline.com/channels/web/reports/wdws...

There is a free registration required to watch it...

Web Design World Slides...

BradA — Mon, 17 Jul 2006 00:28:00 GMT

Arturo and I had a great time at Web Design World in Seattle this past week... It was really good to see there is so much passion about getting developers and designers working well together. I am still not sure I am “seeing the world in CSS” yet, but I am working on it ;-)

At any rate, here are the slides from my talk... enjoy!

Oh, and BTW, I am sure some of you were wondering how we got the 3-D dice look in the Xaml part of the demo... Of course we had some help from the great folks over at Electronic Rain... They even posted a tutorial on how they did it

What is Atlas?

BradA — Thu, 13 Jul 2006 18:07:00 GMT

Matt Gibbs (the dev manager for Atlas) recently posted a great article on Atlas... A very good introduction.. have a read!

http://msdn.microsoft.com/msdnmag/issues/06/07/AtlasAtLast/

Slide and Demo from my Keynote at CFUnited

BradA — Thu, 29 Jun 2006 12:50:00 GMT

I am having a blast this week at the ColdFusion conference CFUnited. Here are the slides from my keynote today... One interesting demo I did was a Atlas\ColdFusion demo.. Check it out and let me here what you think!

Update (11/21/2006): I reader wrote in with a comment that I thought would help folks...

There is a simple fix to a problem that's keeping the CF/Atlas example working for folks. Most CF developers will have what's called "CF debugging" turned on, and that will cause your CFM page (called from the Atlas client) from responding correctly, because it's sending a big load of HTML at the bottom of the output--which your client won't be expecting. The simple solution is to drop a CFSETTING ShowDebugOutput="no" into the application.cfm. If you can add that to both the zip and as a comment (for others who may visit after downloading it previously, or who hear of grief from earlier readers) that may help increase the positive regard of CFers toward using Atlas.

Atlas in Spanish...

BradA — Fri, 23 Jun 2006 19:04:00 GMT

Andres Sanabria, the lead PM for ASP.NET and Atlas, happens to be from glorious Colombia recently did an interview in Spanish about Atlas... While my high school Spanish clearly fails me, knowing Anders I know this is good stuff!

If you can understand Spanish give it a listen and let the rest of us know what he says ;-)

Check out Blinq...

BradA — Fri, 23 Jun 2006 07:26:00 GMT

What percentage of web applications would you say fall into the category of glorified View-Add-Update-Delete operations over a database? That is, you have data stored in a database and you want to expose a web front to look at the data in interesting ways (master details, etc) and add/update/delete the content.. Seems like there is tons of information stored in relational database that can make generating those types of web applications MUCH easier.

That is what we have done with the BLinq project...This is effectively a preview of some work we are considering for the next release of the free Visual Web Developer tool in Orcas. It leverages the new LINQ support to get the OR-Mapping then does some very cool page generation stuff.

BTW, that is where we get the name... Web Linq.. or Blinq... Can you guess that the developer named it rather than our marketing department ;-)

Take a look at let us hear what you think!

Microsoft Blinq Prototype

Overview

Blinq is a tool for generating ASP.NET websites for displaying, creating, and manipulating data based on database schema. Just point Blinq at a SQL database and it will create a website with pages that display sorted and paged data, allow you to update or delete records, create new records, and follow relationships between tables in your database. You don't need to write SQL queries to use Blinq; LINQ will generate optimized queries for you that request just the data you want to show. Blinq uses the May LINQ Community Tech Preview to access data. The code Blinq creates is simple and easy to customize to fit your needs. Everything in the website Blinq creates is meant as a starting point for a website that meets your needs perfectly, so have fun customizing the pages, experimenting with the code, and making it yours!

Features

The Blinq tool autogenerates web forms from database schema which enable the following by default:

Select, insert, update, and delete functionality

Details and foreign key navigation

Sorting and Pagination of records

A default style and design which provide a consistent layout

CFUnited here I come....

BradA — Wed, 21 Jun 2006 18:34:00 GMT

Next week I head out to the DC area for a ColdFusion conference called CFUnited... At the conference I will do a keynote that covers a building a great web 2.0 user experiences and I can’t help but demo a little of Atlas.

Anyone else going? What do you want\expect to hear from a Microsoft keynote at this event?

Two books on Atlas already?

BradA — Tue, 20 Jun 2006 20:37:00 GMT

Can you believe we already have two books published on Atlas? Makes me think we have hit on something big here ;-)

Foundations of Atlas: Rapid Ajax Development with ASP.NET 2.0

Programming Atlas

Oh and I just noticed that Matt Gibbs and Bertrand Le Roy (both developers on the Microsoft Atlas team) recently published a nice short overview of Atlas server side support, mostly around using UpdatePanel correctly. I learned stuff when I read it so I am sure you will too!

Atlas UpdatePanel Control
Add Ajax interactivity to your ASP.NET 2.0 web pages

How about you? Any favorite Ajax books? What book really needs to be written?