ASP.NET Personal Web Site Starter Kit – Ajax Enabled with .NET Framework 3.5 and VS2008

I recently grabbed the ASP.NET Personal Web Site Starter Kit that we wrote for VS2005\.NET Framework 2.0 and opened it up in VS2008 to see how the new tool and platform could help. 

It was fun and painless to Ajax Enable the site with the new features in ASP.NET 3.5 and VS2008.  Here is a run down of a improvements I have made.

Download the full source code for this project



VS2008 Can Target .NET Framework 2.0

First, I opened up the project in VS2008, but did not upgrade to .NET Framework 3.5.  This is a HUGE feature for VS2008... It means that you can move to the latest and greats dev tool WITHOUT requiring the whole team to move or change all your servers over. 

In VS2005, I spent most of my time in markup view... while I love the full control of that environment, I do miss seeing immediately what I get. In VS2008, we added split view, which enables you to edit in markup and see the code right away (or vice-versa). 


I also love the new CSS code editor.. this is where intelllense really saves you... VS knows all the appropriate CSS properties and what their arguments are.  The CSS Manager is also a great tool for visually adding new styles to your CSS. 

image image


Upgrade to ASP.NET 3.5 and Take Advantage of Linq

Next, I upgraded the project to .NET Framework 3.5... This was very easy to do.  Right click on the project, select properties, then build.


This upgrades all my framework references and gives me some new power. Not the least of which is the new Linq support that changes the way you work with data..

With full statement completion, this code is a breeze to write... Can imagine writing it in TSQL in an unverifiable string within your application?  Linq makes this very easy to write and read later!

GridView3.DataSource = fromlocation intravel.PlacesVisited
                       wherelocation.Distance > 1000
                       orderby location.Country, location.City

TravelOrganizer travelSkipTake = newTravelOrganizer();
GridView4.DataSource = (fromlocation intravelSkipTake.PlacesVisited
                        orderby location.Distance descending

// Calculate farthest city away
LocationfarthestCity = (fromlocation intravel.PlacesVisited
                         orderby location.Distance descending

MaxCityNameTxt.Text = farthestCity.City;
MaxCityDistanceTxt.Text = "("+ farthestCity.Distance + " miles)";

// Calculate total city distances of all cities inside US
int totalDistance = (fromlocation intravel.PlacesVisited
                     wherelocation.Country == "USA"
selectlocation).Sum(loc => loc.Distance);
TotalDistanceTxt.Text = totalDistance + " miles";

// Calculate average city distances of each city trip
doubleaverageDistance = travel.PlacesVisited.Average(loc => loc.Distance);
AverageDistanceTxt.Text = averageDistance + " miles";

Ajax Enabling the Site

Next, I picked a few parts of the site to improve with some of the new Ajax support in ASP.NET 3.5.   

First I noticed that in the slideshow, the full page refreshed every time the slide changed.  This is distracting and annoying to many users.  Luckily I didn't have to re-implement the while slide show in client side JavaScript to fix this. I simply wrapped the existing controls in an UpdatePanel and the blink went away! 

1: <asp:UpdatePanel runat="server" ID="updatepanel">
2:  <ContentTemplate>
5:        <asp:formview id="FormView1" runat="server"    datasourceid="ObjectDataSource1" cssclass="view"
6:            borderstyle="none" borderwidth="0" CellPadding="0" cellspacing="0" EnableViewState="false" AllowPaging="true">
7:           <itemtemplate>
8: <%-- deleted to save space --%>

9:            </itemtemplate>
10:        </asp:formview>

11: </ContentTemplate>
12: </asp:UpdatePanel>

I simply added lines 1 and 2 and 11 and 12... Nothing in else needed to change!

Next, I wanted to give users an immediate response when they clicked to advance the slide show.  Even if there were network delays or server load issues, I wanted users to know that the app was responsive.    So I added an UpdateProgress control with an animated gif (notice there are a TON of these on the web).  The UpdateProgress pops up whenever the UpdatePanel calls back to the server and automatically closes down as soon as the request comes back.   Again, very easy to do, with no client side javascript code.

        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                <div id="box">
                    <img id="Img1" runat="server" alt="Loading" src="~/Images/ajax-loader.gif" /></div>

The result is that as soon as a user hit's next,  this "waiting" icon shows up and it automatically goes away when the image comes in.


Next, I wanted to see what I could do with a bit more client side JavaScript code.   Not only does VS have client side JavaScript intellisense..


It also has type inferencing which means that VS is able to keep up with what the type of your dynamically variables are by running a javascript compiler in the background while you type!  As you can see from this example, if I change the value in myElement to be a string, VS keeps up with that change and completes it for me.


I was also able to set a breakpoint in the javascript code and debug into it from within IE..


And all the full magic of VS's debugging support works perfectly.. Stepping, immediate window, watch, etc.

Notice, you do have to have JavaScript debugging enabled in IE, VS detects if you don't and tells you how to turn it on. 



Ok, next I wanted to move some data between the server and the client.   To do that I created a Ajax-enabled WCF based web service.



The implementation of the service can be any .NET code taking full advantage of .NET on the server and using all strongly typed .NET objects as parameters and return type.  Then ASP.NET 3.5 turns it into standards base JSON for communication over x=XmlHttp and evaluation on the client in. 

I simply add the service as a reference in my ScriptManager instance on this page

    <asp:ScriptManager runat="server" ID="sm">
            <asp:ServiceReference Path="~/TopCitiesService.svc" />

Then I get intellsense to call the instance from the client.


Then I simply pass a callback per the async nature of javascript and I am done!

<script language="javascript" type="text/javascript">
    function doSomething() {
        var myElement = document.getElementById("myid");
        myElement.innerHTML = "....Accessing...";
       function setCities (city) {
         var myElement = document.getElementById("myid");
         myElement.innerHTML = city;



Tricking out the site with the Ajax Control Toolkit

I then had a little fun with the Ajax Control Toolkit

First, in default.aspx, I changed the inline image to be a popup using the ModalPopupExtender


    <asp:Panel ID="Panel1" runat="server" BackColor="White" Style="display: none" Width="500px">
            <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/IntelliSense.jpg" /></p>
        <div align="center">
                <asp:Button ID="ButtonClose" runat="server" Text="Close" /></p>
    <cc1:ModalPopupExtender ID="ModalPopupExtender1" 
        runat="server" OkControlID="ButtonClose"
        PopupControlID="Panel1" TargetControlID="LinkButton1">


Next, in Admin/Albums.aspx i changed the validator on the title control to be more Ajax-like by using a pop-up via the ValidatorCalloutExtender.


    <asp:RequiredFieldValidator    ID="RequiredFieldValidator1"
     ErrorMessage="You must choose a    title." 



Next, to Admin/Photos.aspx I added ConfirmButtonExtender  to ensure that users really, really wanted to delete the photo. 



        <cc1:ConfirmButtonExtender ID="ConfirmButtonExtender1" 
            runat="server" ConfirmText="Are you sure you want delete?"


Finally, to register.aspx I wanted to help users pick a strong password and give them a hint as to what to use for the security question.  I did this with the PasswordStrength and TextBoxWatermarkExtender



         runat="server" Enabled="True"

        Enabled="True" TargetControlID="Question" 
        WatermarkText="example: pet's name, etc">


Well, there is certainly more we could do with the starter kit, but this is all I had time for... I'd love to hear your other ideas or see the ways you have Ajax enabled other starter kits.

Comments (25)
  1. Nice job bro.

    I recently converted the Small Business SK to 3.5 with Ajax goodness for someone, should have packaged it like you did for everyone, nice move.

  2. You’ve been kicked (a good thing) – Trackback from

  3. SoftMind says:


    Thanks for offering us such a kit which was very much required.

    Can i use this kit with VWD 2008…?

    In future, kindly support us more with such kits in Dynamic Languages like IronRuby and IronPython.

    Currently we do not have any source to study IronPython and IronRuby. Perhaps such kits can give us an initial start and a right guideline.


  4. BradA says:

    SoftMind — Yes, feel free to use this with VWD2008!  

    Doing some kits in IronRuby  and IronPython is a good idea… i’ll look into it.

  5. Jebahar says:

    Excellent article covering all that a newbie to VS2008 requires

  6. BabakRajavar says:

    I want to play some movies from a zip file but because  the movies are on a CD i want to play them but dont want a temp file to be created on the computer physical hard drive .

    i know the packaging method in .net’s WPF  can accomplish this but it can not package movies only other data (bmp,font ..)

    WPF just can do this via a ‘siteoforign’ method but we need this done on a local computer

    i have heard this obstacle can be passed using streaming methods (using the .net zip lib)

    i would like to know more details

  7. RhysC says:

    Perfect examples of how to scrub up existing applications. Very helpful, thanks!

  8. Brad, that’s a great upgrade. How much work was it (how long did it take?)

  9. Alvin says:

    ASP.NET Personal Web Site Starter Kit – Ajax Enabled with .NET Framework 3.5 and VS2008

  10. EricTN says:

    Brad, can you explain why the call to TopCitiesService.GetTopCities() is passing a function reference parameter, even though GetTopCities() is defined as not taking any parameters?  It works; I just don’t understand why it works.

  11. TerryLee says:


  12. Upgrading Personal Starter Kit to 2008

  13. BradA says:

    EricTN — Thanks, Eric, i did not explain that well..  TopCitiesService.GetTopCities(setCities);

    takes the argument "setCities" even though the webservice i defined on the server doesn’t take any arguments.  In this case the setCitites argument is the callback method.. it tells the runtime what method to call when I get the results back… In our case, it is the setCities method defined below.  

    This async model ensures the application does not get hung waiting for a web request..

    does that make sense?

  14. Jacky_Xu says:


  15. BradA says:

    Someone asked how long it took to do the dev work on this..

    Since the process of upgrading to ASP.NET 3.5 was relatively seamless, it only took a few hours (Most of which was taken to determine what functionality we wanted to add ;-))

  16. Brad, excellent work. A very comprehensive, quick glance at upgrading to ASp.NET 3.5.

  17. thank you for your submit, really it is good work

  18. Alex says:

    Do you know that there is no way to debug javascript written inside of Web Controls. VS2008 wouldn’t even allow to setup the break points.

  19. JP says:

    The file download isn’t working:

    Bad request

    Your browser sent a query this server could not understand.

  20. Rob J says:

    The article looks good, but when I download and went to fire it up, I did not find any project or solution files! Was this an oversight? I can try creating an empty project and adding in existing files but I’m sure there are many settings to deal with.

  21. BradA says:

    IIRC, it is a web site project, so in VS do an Open Web Site…  

  22. Rob_J says:

    DOH! Sorry.

  23. SomeGuy says:

    Err.. is this available in C#?

  24. ramonmq says:

    I was able to have a working copy in my godaddy account. However, I am not able to sign in at all.

    I type in the username and password used when in my localhost, but comes back with login not successful.

    What can I do?


    (How do i know when a replay was posted?)

  25. Zoloft. says:

    Zoloft. Lexapro versus zoloft.

Comments are closed.

Skip to main content