Screenshots of ASP.NET Whidbey

Several folks have pinged me asking for screenshots of my keynote demo (http://weblogs.asp.net/scottgu/32007) to see what the final output looked like.  Below is a quick walkthrough of the various steps.  Apologies for the weird screen-color on a few of them (apparently alt-print screen and MS Paint doesn't always handle the pallete correctly!). Click each image to see a full-size version.

Screen 1:

The default page for the website when an un-authenticated user (someone who hasn't logged in yet) hits it.  Note the treeview navigation control on the left of the screen, and the login button at the top.  The welcome message is generic and non-customized.

Screen 2:

Basic login page for the site, built using the asp:login control.  Note that I haven't customized the control's look and feel at all (hence it's rather boring staid look).  It fully supports template customization, though, so you can make it look however you want.  Note also the new asp:sitemappath (aka the breadcrumb control) on the top right of the screen.  It -- like the TreeView -- is driven off of the new ASP.NET site navigation system.

Screen 3:

After logging into the site, we are sent back to the main page.  The screen is now customized with a template (the loggedintemplate) from the asp:loginview control.  It basically just just outputs a simple message for the authenticated user.  Note that there is also a custom message on the top right of the screen.  The previous “login“ link (top right) is also now toggled to “logout“.

Screen 4:

The datapage.  I've put a drop-down (just a asp:dropdownlist) on the page and wired it up to filter the datagrid control. 

Screen 5:

The datapage has updated the grid now that I've selected “wa“ for the filter.  Note the treeview (I forgot to expand it in the last screenshot).  We'll have a menu control in the beta which will be better for this scenario -- although treeview works fine as well.  Note also the asp:sitemappath control on the top-right of the page.  It is in sync with the treeview -- and both are driven off of the new site navigation system.

Screen 6 and 7:

Just showing sorting support.  Clicking on the “au_lname“ column automatically sorts the data by last name.

Screen 8:

Clicking the edit button to edit the values in the grid.  Clicking “update“ sends them back to either the database or the business object tier that the grid is bound to.

Screen 9:

What the master page looks like in Visual Studio at design-time.  All pages in the site use the Site.Master template to drive their look and feel.  There is an content placeholder control on the master page called “MainContent“ which enables sub-pages to fill in their specific content to the page.  I can put any html, controls or code I want on the master to customize it.  I can also have multiple content placeholders if I want multiple regions to be overridable.  Note that we have a minor bug in the alpha with the treeview (which sometimes has a problem rendering in design-time when bound to the site navigation system -- this will be fixed in the beta).

Screen 10:

This is what the DataPage.aspx file looks like at design-time inside Visual Studio.  Note that the master page's content is automatically grayed out (you can't edit it at all from the DataPage.aspx).  You can only add content and edit stuff in the replacable regions defined by the master. 

Hope this gives a good flavor of what the experience will look like.  Note that none of the scenarios shown in the screenshots (data, navigation, security, master pages) required any code out of the box.  Nor was any code generated by Visual Studio.  All of the controls and scenarios, however, have a very rich object model and set of events which enables rich code based customization if you have a scenario that needs it.

I built all of the functionality in the screenshots on stage in my 25 minute demo (in addition to the SQL based output caching page which I didn't show here).  At the end I swapped out the master template with a slightly prettier html version (which is what is shown in the screen-shots) just to spiff it up a little.  The master template, though, has no code on it -- and contained the same controls I had before in the one I built quickly in my 25 minute demo.

Enjoy...

- Scott