Using Web Parts and the Portal Framework to create a game

THIS IS A PRIVATE, UNOFFICIAL, UNPUBLISHED ARTIC= LE USED ONLY TO ILLUSTRATE A POINT.

Using Web Par= ts to create a cool UI for a sports contest

q = See t= he full code for this article

One of the many advantages ASP.NET 2.0 promises to del= iver is the ability to provide a variety of rich user interfaces that developers= may leverage in creating great applications.&n= bsp; This means we have a great variety of options to displaying, manipulating and managing information.

In this example, I’m going to show you how to us= e a new feature of ASP.NET 2.0 - Web Parts – to create a helpful UI for online game and contest development.

One thing I love doing as a sports journalist and web developer is creating demo apps based on sports. In my opinion, one of the coolest = and most logical achievements of web development was when ESPN.com, circa 1998,= put together a web-based contest in which users would be presented with a straight-down listing of the top 25 college football teams in the nation, a= nd be asked to rearrange them in the order in which the user thought the teams= would finish the season.

The user could drag-and-drop teams, rearranging them i= n a custom order and then submitting their ballot in the hopes of winning some sweet prize. ESPN’s imp= lementation used a nice interface, doing everything on the client, but being based on J= ava, took a long time to load initially. As one would expect, correct ballots would be archived, with the win= ner assumedly selected at random.

To make this timely with March Madness just around the corner, I’m going to build something similar using ASP.NET 2.0 for college basketball.

The concept for developing such as service in ASP.NET = 2.0 is really simple. The trick is a= dding in multiple ContentWebParts within the same containing WebPartZone, all sta= cked on top of each other and all confined within the same table cell, so as to allow the user to move and rearrange the teams in one condensed area. The Portal Framework will take car= e of re-indexing the Web Parts automatically.&n= bsp;

For this example, we’re going to hard-code all t= he information into each WebPart, which is nothing more than a static .GIF ima= ge of each school’s logo. = Also, for brevity’s sake we’re only going to use five schools – Stanford, St, Joseph’s, Duke, Pittsburgh and Connecticut.

We drop in all our ContentWebPart controls within a WebPartZone that is itself within an HTML table on the page, making note to= set the Caption property of each ContentWebPart to the name of the team (this w= ill come in handy, as you’ll see later).

<<= span style=3D'font-size:8.0pt;font-family:"Courier New";color:maroon'>table <= span style=3D'font-size:8.0pt;font-family:"Courier New";color:red'>cellspacing=3D"4&q= uot; <= span style=3D'font-size:8.0pt;font-family:"Courier New";color:red'>cellpadding=3D"6&q= uot; <= span style=3D'font-size:8.0pt;font-family:"Courier New";color:red'>border= =3D"0&q= uot;>

= <t= r>

= <t= d colspan=3D"2">

= <a= sp:webpartzone id=3D"WebPartZone1" runat=3D= "server" title=3D"Custom NCAA Ballot">

= &nb= sp; <w= ebpartrestoreverb visible=3D"False"/>

= &nb= sp; <w= ebpartminimizeverb visible=3D"False"/>

= &nb= sp; <w= ebpartcloseverb visible=3D"False"/>

= &nb= sp; <w= ebparteditverb visible=3D"False"/>

= &nb= sp; <z= onetemplate>

= &nb= sp; <t= able border=3D"4" = cellpadding=3D"8= " cellspacing=3D"6">

= &nb= sp; <a= sp:contentwebpart cssclass=3D"teamNames" caption=3D"Stanf= ord" id=3D"ContentWebPart1" runat=3D= "server">

= &nb= sp; = <c= ontenttemplate>

= &nb= sp; = <t= r>

= &nb= sp; = <t= d class=3D"teamChoices">

= &nb= sp; = &nb= sp; <i= mg width=3D"60"= height=3D"60&quo= t; alt=3D"Stanford Cardinal" src=3D"images/stanford.gif" />=

= &nb= sp; = </= td>

= &nb= sp; = </= tr>

= &nb= sp; = </= contenttemplate>

= &nb= sp; </= asp:contentwebpart>

= &nb= sp; <a= sp:contentwebpart caption=3D"= St. Joseph's" id=3D"ContentWebPart2" runat=3D= "server">

= &nb= sp; = <c= ontenttemplate>

= &nb= sp; = <t= r>

= &nb= sp; = <t= d class=3D"teamChoices">

= = &nb= sp; = <img width=3D"60"= height=3D"60&quo= t; alt=3D"= St. Joseph's Hawks" src=3D"images/stjosephs.gif" />=

= &nb= sp; = </= td>

= &nb= sp; = </= tr>

= &nb= sp; = </= contenttemplate>

= &nb= sp; </= asp:contentwebpart>

= &nb= sp; <a= sp:contentwebpart caption=3D"Duke" id=3D"ContentWeb= Part3" runat=3D"server">

= &nb= sp; = <c= ontenttemplate>

= &nb= sp; = <tr>

= &nb= sp; = <t= d class=3D"teamChoices">

= &nb= sp; = &nb= sp; <i= mg width=3D"60"= height=3D"60&quo= t; alt=3D"Duke Blue Devils" src=3D&q= uot;images/duke.gif" />=

= &nb= sp; = </= td>

= &nb= sp; = </= tr>

= &nb= sp; = </= contenttemplate>

= &nb= sp; </= asp:contentwebpart>

= &nb= sp; <a= sp:contentwebpart caption=3D"UConn" id=3D"ContentWeb= Part4" runat=3D"server">

= &nb= sp; = <c= ontenttemplate>

= &nb= sp; = <t= r>

= &nb= sp; = <t= d class=3D"teamChoices">

= &nb= sp; = &nb= sp; <i= mg width=3D"60"= height=3D"60&quo= t; alt=3D"UConn Huskies" src=3D&q= uot;images/connecticut.gif" />=

= &nb= sp; = </= td>

= &nb= sp; = </= tr>

= &nb= sp; = </= contenttemplate>

= &nb= sp; </= asp:contentwebpart>

= &nb= sp; <asp:contentwebpart caption=3D"= Pittsburgh" id=3D"ContentWebPart5" runat=3D= "server">

= &nb= sp; = <c= ontenttemplate>

= &nb= sp; = <t= r>

= &nb= sp; = <t= d class=3D"teamChoices">

= &nb= sp; = &nb= sp; <i= mg width=3D"60"= height=3D"60&quo= t; alt=3D"Pittsburgh Panthers" src=3D"images/pittsburgh.gif" />=

= &nb= sp; = </= td>

= &nb= sp; = </= tr>

= &nb= sp; </contenttempla= te>

= &nb= sp; </= asp:contentwebpart>

= &nb= sp; </= table>

= &nb= sp; </= zonetemplate>

= </= asp:webpartzone>

= </= td>

= </= tr>

</table<= span style=3D'color:blue'>>

So now we have our basic default team layout. We now include some LinkButton con= trols to allow for navigation as we progress through reordering of the list of te= ams, and a hidden Panel control, which contains a series of TextBox controls for user information. Just for gi= ggles, I also included several validation controls to ensure the data entered by t= he user is consistent and meets our requirements.

<<= span style=3D'font-size:8.0pt;font-family:"Courier New";color:maroon'>p <= span style=3D'font-size:8.0pt;font-family:"Courier New";color:red'>align<= span style=3D'font-size:8.0pt;font-family:"Courier New";color:blue'>=3D"cen= ter">

= <f= ont size=3D"6">NCAA basketball Top 25 Chal= lenge

Rearrange the form in the order you think the teams will finish the season

at....

=

<asp:webpartmanager id=3D"WebPartManager1" runat=3D= "server"/>

=

= <a= sp:linkbutton= id=3D"LinkButton1" runat=3D"server&= quot; onclick=3D"LinkButton1_Click">Reorder

= to enter the contest</asp:linkbutton>

= <a= sp:linkbutton= id=3D"LinkButton2" runat=3D"server&= quot; onclick=3D"LinkButton2_Click" visible=3D"False">Submit your

= completed ballot</asp:linkbutton>

= <a= sp:linkbutton= id=3D"LinkButton3" runat=3D"server&= quot; visible=3D"False" onclick=3D"LinkB= utton3_Click">Confirm your choices</asp:linkbutton= >

&l= t;br />

=

<asp:panel id=3D"Panel1" visible=3D"false= " runat=3D"server">

= <p= >

= YOUR CONTACT INFORMATION

= </= p>

= <p= >

= <a= sp:textbox id=3D"Email" runat=3D"server&= quot;/> E-mail address

= <a= sp:requiredfieldvali= dator id=3D"Requiredfieldvalidator1" display=3D"Dynamic" controltovalidate=3D&= quot;Email" runat=3D"server" errormessage=3D"* Required"/>

= <a= sp:regularexpression= validator id=3D"Regularexpressionvalidator1" runat=3D"server" controltovalidate=3D&= quot;Email" display=3D"Dynamic" validationexpression= =3D"^[\w-]+(?:\.[\w-]+)*@(?:[\w-]+\.)+[a-zA-Z]{2,7}$" errormessage=3D"Not a valid e-mail address"/>

= <b= r />=

= <a= sp:textbox id=3D"FirstName" runat=3D"server&= quot;/> First Name

= <a= sp:requiredfieldvali= dator id=3D"Requiredfieldvalidator2" display=3D"Dynamic" controltovalidate=3D&= quot;FirstName" runat=3D"server" errormessage=3D"* Required"/>

= <b= r />=

= <a= sp:textbox id=3D"LastName" runat=3D"server&= quot;/> Last Name

= <a= sp:requiredfieldvali= dator id=3D"Requiredfieldvalidator3" display=3D"Dynamic" controltovalidate=3D&= quot;LastName" runat=3D"server" errormessage=3D"* Required"/>

= <b= r />=

= <a= sp:textbox id=3D"Phone" runat=3D"server&= quot;/> Phone Number

= </= p>

</asp:panel>

So now we’ve completely laid out all the control= s we need - time to write some code. We write methods to handle the first two LinkButton controls’ OnClick ev= ent (LinkButton2 and LinkButton2). These even handlers get object references to the required WebPartMan= ager on the WebForm, toggle the WebPartDisplayMode enumeration between “Normal” or “Design”, set the Visible property for each of the LinkButtons,= and when necessary, set the Visible property for the Panel control.

void<= span style=3D'font-size:8.0pt;font-family:"Courier New"'> LinkButton1_Click(object sender, System.EventArgs e)

{

WebPartManager manager =3D (this.Items[<= span style=3D'color:blue'>typeof(WebPartMan= ager)] as WebPartM= anager);

if (manager.DisplayMode =3D=3D WebPartDisplayMode.Normal)

= manager.SetDisplayMode(WebPartDisplayM= ode.Design);

this.LinkButton1.Visible =3D false;

this.LinkButton2.Visible =3D true;

this.LinkButton3.Visible =3D false;

}

void<= span style=3D'font-size:8.0pt;font-family:"Courier New"'> LinkButton2_Click(object sender, System.EventArgs e)

{

WebPartManager manager =3D (this.Items[<= span style=3D'color:blue'>typeof(WebPartMan= ager)] as WebPartM= anager);

if (manager.DisplayMode =3D=3D WebPartDisplayMode.Design)

= manager.SetDisplayMode(WebPartDisplayM= ode.Normal);

this.LinkButton1.Visible =3D false;

this.LinkButton2.Visible =3D false;

this.LinkButton3.Visible =3D true;

this.Panel1.Visible =3D true;

}

Lastly, we wire an event handler for LinkButton3. It does exactly what the handlers = for the other LinkButtons do, plus creates a WebPartsCollection object, which it then passes as an argument to a helper method “SubmitBallot()” = to add the user’s rearranged team listing to a SQL Server database.

void<= span style=3D'font-size:8.0pt;font-family:"Courier New"'> LinkButton3_Click(object sender, System.EventArgs e)

{

WebPartManager manager =3D (this.Items[typeof(WebPartManager)] as WebPartManager);

this.LinkButton1.Visible =3D false;

this.LinkButton2.Visible =3D false;

this.LinkButton3.Visible =3D false;

this.WebPartZone1.Visible =3D false;

WebPartCollection coll =3D manager.GetWebPartsForZone(this.WebPartZo= ne1);

SubmitBallot(coll);

foreach (WebPart<= /span> wp in coll)

{

= Response.Write(" The team you picked to finish at #&q= uot; + Convert.ToString(Convert.ToInt16(wp.ZoneIndex+1)) + ": " + wp.Caption + "");

}

Response.Write(" Your ballot was submitted successfully!");

}

Within the SubmitBallot() method are calls to another private helper method, “LookupValues()”, which takes a WebPartCollection and a string as arguments, returning an integer value. This integer is the rank the user predicted selected for their team, which is the index position of the ContentWebPart, if moved, plus 1 (remember that indexing in .NET is zero-ba= sed). A For… loop in LookupValues() iterates through each ContentWebPart of the WebPartCollection, and if the Caption property matches the targetValue argument, the index position of th= at ContentWebPart within the parent WebPartZone is returned.

Again, this is hard-coded for now, but in Part 2 we= 217;ll learn how to do this dynamically.

private void SubmitBallot(WebPartCollection wpc= )

{

SqlConnection conn =3D new SqlConnection(ConfigurationSettings.AppSettings["Localhost"]);=

SqlCommand comm =3D new SqlCommand("InsertTop25NCAABa= llot",conn);

comm.CommandType =3D CommandType.StoredProcedure;

comm.Parameters.Add(new SqlParameter("@FirstName", FirstName.Text.Trim()));

comm.Parameters.Add(new SqlParameter("@LastName", LastName.Text.Trim()));

comm.Parameters.Add(new SqlParameter("@Email", Email.Text.Trim()));

comm.Parameters.Add(new SqlParameter("@Phone", Phone.Text.Trim()));

comm.Parameters.Add(new SqlParameter("@Stanford", LookupV= alues(wpc, "Stanford")));

comm.Parameters.Add(new SqlParameter("@Duke", LookupValue= s(wpc, "Duke")));

comm.Parameters.Add(new SqlParameter("@StJosephs", LookupValues(wpc, "St. Joseph\'s")));

comm.Parameters.Add(new SqlParameter("@Pittsburgh", LookupValues(wpc, "Pittsburgh")));

comm.Parameters.Add(new SqlParameter("@Connecticut", LookupValues(wpc, "UConn")));

try

{

= conn.Open();

= comm.ExecuteNonQuery();

= conn.Close();

}

catch (SqlExcepti= on ex)

{

= Response.Write("Database exception: " + ex.ToString());

}

catch (Exception<= /span> ex)

{

= Response.Write("General exception: " + ex.ToString());

}

finally

{

= if (conn.State =3D=3D ConnectionState.Open)

= conn.Close();

}

private int LookupValues(WebPartCollection wpc= ,string targetValue)

{

int returnValue =3D 0;

for (int i = =3D 0; i < wpc.Count; i++)

{

= if (wpc[i].Caption =3D=3D targetVa= lue)

= {

= returnValue =3D i;

= break;

= }

}

return returnValue+1;

}

So now, we just need to build the database layer and we’re done. Run this co= de in SQL Query Analyzer to create the database table and stored procedure to add= the ballot:

-- make the table

CREATE TABLE NCAATop25

(

&= nbsp; BallotID &= nbsp; INT &= nbsp; IDENTITY(1,1) PRIMARY KEY NOT NULL,

&= nbsp; FirstName &= nbsp; VARCHAR(50) NOT NULL,

&= nbsp; LastName VARCH= AR(80) NOT NULL,

&= nbsp; Email = VARCHAR(255) NOT NULL,

&= nbsp; Phone = VARCHAR(30) NULL,

&= nbsp; Stanford &= nbsp; INT &= nbsp; NOT NULL,

&= nbsp; Duke &= nbsp; INT &= nbsp; NOT NULL,

&= nbsp; Pittsburgh INT N= OT NULL,

&= nbsp; StJosephs &= nbsp; INT &= nbsp; NOT NULL,

&= nbsp; Connecticut INT N= OT NULL

)

-- make the stored procedure that adds a new ballot into the database

CREATE PROCEDURE InsertTop25NCAABallot

(

&= nbsp; @FirstName VARCHAR(50),=

&= nbsp; @LastName &= nbsp; VARCHAR(80),

&= nbsp; @Email VARCHAR(255),

&= nbsp; @Phone VARCHAR(30),

&= nbsp; @Stanford &= nbsp; INT,

&= nbsp; @Duke = INT,

&= nbsp; @Pittsburgh INT,

&= nbsp; @StJosephs INT,

&= nbsp; @Connecticut INT

)

&= nbsp; INSERT INTO NCAATop25 (FirstName,LastName,Email,Phone,Stanford,Duke,Pittsburgh,StJosephs,Connecticut)

&= nbsp; VALUES (@FirstName,@LastName,@Email,@Phone,@Stanford,@Duke,@Pittsburgh,@StJosephs,= @Connecticut)

Play with the example for awhile and build up a decent number of ballots submitted to your database. Then at the end of the season, whe= n the real-life results come in, you can query the DB to generate a recordset of = those people who have correctly predicted the winner:

SELECT DISTINCT Email FROM NCAATop25 WHERE

&= nbsp; -- list the finishers in their exact order

&= nbsp; Stanford =3D 5 AND

&= nbsp; StJosephs =3D 4 AND

&= nbsp; Duke =3D 3 AND

&= nbsp; Pittsburgh =3D 2 = AND

&= nbsp; Connecticut =3D = 1

&= nbsp; GROUP BY Email ORDER BY Email DESC

Summary

I hope what you’ve able to take away from this tutorial is how easy it is to build great front-end UIs for a variety of applications with Web Parts, and not just portals. This also extends the usefulness o= f the Web Parts feature of ASP.NET 2.0, showing how it can be applicable in environments where membership isn’t explicitly required.

While this sample application was based on a sports sa= mple, you could do the same for other sports or even other events such as electio= ns, award shows, favorite movies, books, student grades, etc.

The main downside of this type of application is that = the ContentWebParts must be built manually.&nb= sp; But fear not - in Part 2, I’ll show you how to do this all programmatically, so that a data source can be attached to the page, doing everything on-the-fly.