Joe Levi:
a cross-discipline, multi-dimensional problem solver who thinks outside the box – but within reality™

Day 1, Using Visual Studio codename "Orcas" to design and develop Rich AJAX Enabled Websites (DEV14)

What’s new in Visual Studio “Orcas”?

A new feature in Orcas is the ability to “multi-target” the application that you’re creating. You can select .NET Framework 2.0, .NET Framework 3.0, and .NET Framework 3.5. Accordingly, the project types that are not compatible with the framework that you selected are not shown in the Templates view.

Overall, the look and feel of the IDE is the same as VS2003, which is a nice thing for those of us who like to be comfortable with our programming environment, and feel that radical changes to UI are typically more distracting than helpful (of course there are exceptions to that rule).

Framework 3.0 comes with an AJAX Master Page template… that needs more investigation… 😉

CSS

Orcas handles CSS beautifully!

They have added a “Manage Styles” panel that allows you to see how your styles are decorating elements and lets you click on styles in the list to preview what the selected element will look like with a given style decorating it.

You can create a new style rule on the fly in the document that you’re working in by using a wizard of sorts, but that’s not good practice; CSS rules should be separate from content, in a separate .css file. No problem, just drag and drop your rule into the .css file that you want and your .css file is automatically updated! And if you have a specific way that you want your .css to look, set your Style Application from “Automatic” to “Manual” in the toolbar. Sweet!

New file type: LINQ to SQL

Creating a new file based on this new file type you can use your Server Explorer panel to drag and drop tables from your SQL databse into the design canvas.

The IDE automatically recognizes relationships between the tables and represents this graphically.

This then creates a new .cs codebehind file that adds a series of classes that allow the LINQ to SQL link (no pun intended).

Here’s how easy it is to grab data from a LINQ to SQL:


PhotoAlbumDataContext db = new PhotoAlbumDataContext();
var result = from a in db.Albums select new { Name = a.name, Count = a.Photos.Count };
GridView1.DataSource = result;
GridView1.DataBind();

Now, a GridView is (by definition) a table. That’s not cool unless you’re actually representing tabular data. So, let’s use a ListView instead of a GridView.

<asp :ListView ID="ListView1" runat="server" >
<layouttemplate>
<ul id="itemcontainer" runat="server"></ul>
</layouttemplate>
<itemtemplate>
<li>< %# Eval("Name") %>, < %# Eval("Count") %></li>
</itemtemplate></asp:ListView>

(Of course, you’ll also want to modify your codebehind to databind to the new control.)

New datasource control: LINQ DataSource

The closest thing that I can compare this to, is an actual SQL DataSource, where you’re representing a SQL View from the database, only without a view existing in the SQL database. The LINQ lets you create that “view” via LINQ code.

ASP.NET AJAX

ASP.NET AJAX comes native to ASP.NET 3.5, no add-ins needed (which is a thorn in my side with ASP.NET 2.0).

UpdatePanels ROCK! Wrap whatever you want to asynchronously update within an asp:UpdatePanel and you’re done! With a paged data view (a dataview, repeater, listview, etc.) that has paging (ie, several pages of data are present but only one page is displayed at a time, with the ability to page through the additional data with a pager navigation element) you can view the next and previous pages asynchronously (only the area inside the UpdatePanel is updated, not the entire page!). Wow. Talk about fast!

Intellisense for Javascript

Finally, javascript has intellisense, with new icons to represent variables, methods, functions, etc. Nice!

This works for both inline scripts as well as external .js files. Now, what’s really cool, say you’re working in a .aspx file and have referenced an external .js file, as you’re writing javascript inside the .aspx file, all of the methods inside the external javascript file are represented in intellisense! Including (data) typing!

Javascript Commenting

/// <summary>Type your summary here</summary>
/// <param name="path" type="string">Optional parameter&;lt;/param>
/// <returns type="date" />

Utility Classes

But what if you want to have intellisense across separate .js files?

Add a util.js file (what goes in that?? I’ll have to research that and get back to you).

Then add something like this to the top of the .js files that you want to share the intellisense across.

/// <reference path="util.js" />
/// <reference name="MicrosoftAjax.js" />

Script Manager

Nothing new here, just remember to put all your script references in your ASP.NET Script Manager control to make sure everything is initialized in the right order.

Share

You may also like...

Leave a Reply