Ajax Start Page using VS 2008 and .NET 3.5
I have built an Ajax Start Page (just like Google IG) using Linq to SQL, Linq to XML, Workflow Foundation and ASP.NET AJAX 3.5.
Full source code is in Visual Studio 2008 using .NET 3.0 and .NET 3.5.
CodePlex site
http://www.codeplex.com/dropthings
Production site
http://dropthings.omaralzabir.com
Code Project article that explains the architecture and
development steps
http://www.codeproject.com/Ajax/MakingGoogleIG.asp
Technologies
- ASP.NET 3.5
- ASP.NET AJAX (.NET 3.5)
- Linq to Sql
- Linq to Xml
- Workflow Foundation (.NET 3.0)
- Visual Studio 2008 and SQL Server 2005
Technology Stack
What is an AJAX Start Page
A
Start Page refers to a page that allows users to
customize their own homepage by dragging and dropping
widgets onto the page. This approach gives users
complete control over what content they see on their Start
Page, where they want to see it, and how they want to
interact with it.
A widget is a discrete piece on a
Web page that performs a particular function and comes with
its own UI and set of features. Examples of widgets include
a to-do-list, an address book, a contact list, an RSS feed,
or even a clock, calendar, playlist, stock ticker, weather
report, traffic report, dictionary, game, or almost anything
you can imagine that can be packaged up and dropped on a Web
page. In a corporate environment, widgets can connect to
internal systems, such as an Expense Tracker widget that
interacts directly with the internal Accounting System. If
you are familiar with Sharepoint Portal, then you already
know about Widgets. They are called Web parts in
Sharepoint’s term and also in ASP.NET 2.0.
Start Pages
are powerful RSS aggregation platform. You can put as many
RSS widgets as you like on your page and get fresh content
delivered to you as soon as it is published. Some Start Page
like Pageflakes archives RSS for a long time and thus you
can go back in time and read older posts, save posts, and
forward interesting articles to your friends.
An
Ajax-powered start page is specifically a start page that
uses Ajax technologies to create richer experiences for its
users. It is one step ahead of previous generation start
pages like My Yahoo or MSN.com, because it gives you
state-of-the-art UI that behaves more like a Windows client
application -- with widgets, animations, popups, client side
data grids, and other effects not usually found on a
non-Ajax Web portal .
Some of the most popular Ajax
Start Pages are Pageflakes
http://www.pageflakes.com, Google IG (www.google.com/ig) Netvibes (http://www.netvibes.com), Protopage (http://www.protopage.com), and Webwag (http://www.webwag.com). Among these, Google IG is the simplest one. The one I
have built at
http://dropthings.omaralzabir.com
resembles Google IG but uses a lot more Ajax as well as
newer .NET 3.5 and 3.0 technologies to provide the kind of
rich client experience you see in Pageflakes.
How to run the project
- Install Visual Studio 2008 (VS 2005 won't work)
- Install SQL Server 2005
- Download latest code from CodePlex site.
- Restore the database from database\dashboard.zip
- Update web.config from the web project and set proper connection string
- Build and Run
How is ASP.NET AJAX used in this project?
It is
an N-tier application, with a user interface (UI) layer, a
business layer, and a data access layer. I have used ASP.NET
AJAX to implement the UI layer of the Start page application
which includes the homepage and the widgets’ UI. ASP.NET
AJAX provides the framework for loading widgets onto the
Start page, updating widgets without doing any postbacks
(via UpdatePanel), and changing page layout by
dragging and dropping widgets on the page. It also provides
a rich collection of Control Extenders, that add cool
effects like fade in/fade out, smooth transitions, and
client side animations . You can add to the rich client-side
experience by providing auto-completion behavior on text
boxes, asynchronous data loading via webservice calls, and
client-side paging, sorting and many more.
How is .NET 3.5 used in this project
The
business layer of the start page application is built with
the Workflow Foundation in .NET 3.0 . Major operations like
a first-time user visit, a subsequent user visit, adding a
new widget, and creating a new page are all orchestrated
using workflow . The workflows contain all the business
rules and activities needed to complete each operation. For
example, the "New User Visit" workflow creates the user
account, populates the user profile with default values,
creates some default pages, populates them with specific
widgets, etc. Such compound operations are very easy to
build with Workflows , which enables you to break the
complete workflow operation into smaller chunks named
Activities. Each Activity does a very small amount of work.
It talks to the data access layer and performs the task. The
data access layer is built with .NET 3.5 , utilizing LINQ to
SQL .
The web project and the widgets make good use of
.NET 3.5 by utilizing lambda expressions , LINQ to SQL, and
LINQ to XML. You will use Linq queries to work with
collections and database rows. Widgets make good use of Linq
to Xml in order to consume XML from external data sources.
The above figure shows an workflow that creates the default homepage for a new user.
You are invited to participate in continued development of the project. If you want to develop widgets, you can download the code, develop the widget offline and then send me the widget related files. I will put them up on the production site. If you want to participate in core development, let me know and I will make you a developer on the codeplex project. Then you can check out code, work on it and then check in when you are done.
Warning: Dropthings.com is a very simple, open-source example of what can be done with AJAX and Microsoft technologies. It is intended for educational purposes only. Dropthings.com has absolutely nothing to do with pageflakes.com, and has no code or technology in common. Trust me, you could not possibly build a product as advanced, scalable and complex as Pageflakes using the examples here, and you’d be insane to try :-) But this project does a good job to show you how all these technologies work together in a working web application.