Sign
in

Brad Abrams

Design Guidelines, Managed code and the .NET
Framework

Options

Blog Home

Email Blog
Author

Send
to friend

RSS for
Posts

Atom

RSS for
Comments

Search Blogs

* Advanced
search options...

Search
In:
Everything Blogs Forums People Groups Places Pages

Date
range:
All Time Last
Year Last 6 Months Last 3 Months Last Month
Last Week Last Two
Days

Search

Search this blog Search all
blogs

Tags

.NET
Framework

.NETFx3.0

AJAX

ASP.NET

Atlas

BCL

Blogging

CLR

Framework Design Guidelines

MEF

Mix07

Mix08

Mix09

Mix10

New
Guideline

PDC

Program Manager

Random

RIAServices

Silverlight

SLAR

Software Development

TechEd

WinForms

WPF

Archive

Archives

April 2010
(2)

March 2010
(16)

February 2010
(1)

January 2010
(1)

December 2009
(3)

November 2009
(6)

October 2009
(10)

September 2009
(8)

August 2009
(11)

July 2009
(24)

June 2009
(7)

May 2009
(5)

April 2009
(8)

March 2009
(15)

February 2009
(6)

January 2009
(5)

December 2008
(6)

November 2008
(13)

October 2008
(13)

September 2008
(7)

August 2008
(11)

July 2008
(7)

June 2008
(13)

May 2008
(7)

April 2008
(11)

March 2008
(21)

February 2008
(12)

January 2008
(14)

December 2007
(13)

November 2007
(13)

October 2007
(21)

September 2007
(7)

August 2007
(13)

July 2007
(10)

June 2007
(25)

May 2007
(18)

April 2007
(15)

March 2007
(15)

February 2007
(6)

January 2007
(15)

December 2006
(8)

November 2006
(12)

October 2006
(13)

September 2006
(8)

August 2006
(5)

July 2006
(12)

June 2006
(15)

May 2006
(12)

April 2006
(10)

March 2006
(15)

February 2006
(14)

January 2006
(13)

December 2005
(7)

November 2005
(18)

October 2005
(16)

September 2005
(31)

August 2005
(22)

July 2005
(15)

June 2005
(14)

May 2005
(17)

April 2005
(25)

March 2005
(28)

February 2005
(22)

January 2005
(29)

December 2004
(18)

November 2004
(17)

October 2004
(25)

September 2004
(16)

August 2004
(28)

July 2004
(17)

June 2004
(20)

May 2004
(28)

April 2004
(31)

March 2004
(29)

February 2004
(30)

January 2004
(35)

December 2003
(17)

November 2003
(28)

October 2003
(43)

September 2003
(25)

August 2003
(21)

July 2003
(26)

June 2003
(9)

May 2003
(14)

April 2003
(50)

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

MSDN
Blogs > Brad Abrams
> ASP.NET
Personal Web Site Starter Kit - Ajax Enabled with .NET Framework 3.5 and
VS2008

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

BradA

21 Jan 2008 2:55 PM

Comments 25

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.

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

selectlocation;
GridView3.DataBind();

TravelOrganizer travelSkipTake = newTravelOrganizer();
GridView4.DataSource =
(fromlocation intravelSkipTake.PlacesVisited

orderby location.Distance descending

selectlocation).Skip(1).Take(5);
GridView4.DataBind();

// Calculate farthest city away
LocationfarthestCity = (fromlocation intravel.PlacesVisited

orderby location.Distance descending

selectlocation).First();

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>
4:

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">
<ProgressTemplate>
<div id="box">
<img id="Img1" runat="server" alt="Loading" src="~/Images/ajax-loader.gif" /></div>
</ProgressTemplate>
</asp:UpdateProgress>

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">
<Services>
<asp:ServiceReference Path="~/TopCitiesService.svc" />
</Services>
</asp:ScriptManager>

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...";
TopCitiesService.GetTopCities(setCities);

}
function setCities (city) {
var myElement = document.getElementById("myid");
myElement.innerHTML = city;
}

</script>

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">
<p>
<asp:Image ID="Image2" runat="server" ImageUrl="~/Images/IntelliSense.jpg" /></p>
<div align="center">
<p>
<asp:Button ID="ButtonClose" runat="server" Text="Close" /></p>
</div>
</asp:Panel>
<cc1:ModalPopupExtender ID="ModalPopupExtender1"
runat="server" OkControlID="ButtonClose"
PopupControlID="Panel1" TargetControlID="LinkButton1">
</cc1:ModalPopupExtender>

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"
Runat="server"
ErrorMessage="You must choose a title."
ControlToValidate="TextBox1"
Display="None"
Enabled="true"
/>

<cc1:ValidatorCalloutExtender
ID="ValidatorCalloutExtender1"
runat="server"
TargetControlID="RequiredFieldValidator1">
</cc1:ValidatorCalloutExtender>

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?"
TargetControlID="ImageButton3">
</cc1:ConfirmButtonExtender>

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.

<cc1:PasswordStrength
ID="Password_PasswordStrength"
runat="server" Enabled="True"
TargetControlID="Password">
</cc1:PasswordStrength>

<cc1:TextBoxWatermarkExtender
ID="Question_TextBoxWatermarkExtender"
runat="server"
Enabled="True" TargetControlID="Question"
WatermarkCssClass="watermarked"
WatermarkText="example: pet's name, etc">
</cc1:TextBoxWatermarkExtender>

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.

25
Comments

.NET
Framework, ASP.NET, AJAX

Comments

Mark Wisecarver

21 Jan 2008 6:57 PM

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.

DotNetKicks.com

21 Jan 2008 6:59 PM

You've been kicked (a good thing) - Trackback from
DotNetKicks.com

SoftMind

21 Jan 2008 9:52 PM

Hi,

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.

Thanks

BradA

21 Jan 2008 11:28 PM

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.

Jebahar

22 Jan 2008 5:21 AM

Excellent article covering all that a newbie to VS2008 requires

BabakRajavar

22 Jan 2008 8:03 AM

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

RhysC

22 Jan 2008 5:55 PM

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

John Saunders

22 Jan 2008 6:12 PM

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

Alvin

22 Jan 2008 8:50 PM

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

EricTN

23 Jan 2008 3:46 AM

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.

TerryLee

23 Jan 2008 5:32 AM

概述1.FiveAjaxControlToolkitTabThemescreatedfromDynamicDrive.com

Letteer Lines

23 Jan 2008 9:53 AM

Upgrading Personal Starter Kit to 2008

BradA

23 Jan 2008 11:27 AM

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?

Jacky_Xu

23 Jan 2008 8:37 PM

本期共有9篇文章

1.FiveAjaxControlToolkitTabThemescreatedfromDynamicDrive.com

BradA

23 Jan 2008 11:23 PM

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 ;-))

Page 1 of 2 (25 items) 12

© 2010 Microsoft Corporation.

Terms of Use

Trademarks

Privacy Statement

Report
Abuse