Building a status calendar - ASP.NET - asp.net

Question

I need to build a status dashboard that reads Events (ID, Desc, Time) out of a database, and puts a marker on a day that drills down to detail, if there is an event - and just a checkmark if there is no event. Just like http://www.google.com/appsstatus.
I am a Jr. developer witha PHP background, I am using C# & ASP.NET. I chose to use the UpdatePanel/ScriptManager components for the grid even though there is some bandwidth costs.
My question is about the best way to build this table. In PHP, I would use a string and just keep adding HTML to it via nested iteration, like:
foreach($row in $rows){
MyHtml .= "<td>" . $variableFromDB[i] . "</td>";
i++
}
return MyHtml; //Output built HTML
In this case I need to query an array to see if an event exists for that day, if so, generate a link containing URL parameter (field1=value1&field2) so that I can display the corresponding detail information.
Since I'm using .NET, I'm wondering if there is a more elegant way to do this without querying for each cell to check for an event, and an easier way to build a table. I see .NET classes like "HtmlTableCell" & "HtmlTableRow", but I haven't seen any compelling examples that require a query in each cell.
Any guidance from you senior .NET folks would be great...

Answer 1

It sounds like you're wanting a grid or table layout to display your data. If that's the case, and you're using ASP.NET WebForms, consider using a GridView instead of building HTML manually. The advantage of ASP.NET's server controls is the ability to bind a collection of your business objects from your model to your controls.
Suggest you don't follow the HtmlTableCell and HtmlTableRow approach. You can get this job done much quicker by using server controls and data binding.
Here are a few steps in getting started with databinding.
On your .aspx markup page, write an <asp:GridView runat=server id=statusCal>.
Determine the columns that you want to show on your grid. Just like the HTML table you'd have built by hand, what data did you want to show? You'll end up with something like this:
<asp:GridView ID="statusCal" AutoGenerateColumns="false" runat="server">
<Columns>
<asp:BoundField DataField="Date" HeaderText="Status Date" />
<asp:BoundField DataField="Status" HeaderText="Status" />
<asp:BoundField DataField="UserName" HeaderText="User" />
<asp:BoundField DataField="Email" HeaderText="Email" />
</Columns>
</asp:GridView>
Is your data coming from a database? Somehow you'll want a class to hold your status calendar. Wherever you're getting the data from, you'll want to have a class to bind to your grid. Perhaps something like:
public class UserStatusCalendar
{
public string UserName {get;set;}
public string Email {get;set;}
public string Status {get;set;}
public string Date {get;set;}
}
Then it's a matter of:
Creating and populating an array or List<> of your UserStatusCalendar objects.
List<UserStatusCalendar> show = new List<UserStatusCalendar>();
show.Add(new UserStatusCalendar
{ UserName="foo", Email="foo#bar.com",
Status="Good", Date="Jan 1 2010 10:09"});
Bind your collection to the grid.
statusCal.DataSource = show;
statusCal.DataBind();
When navigating to the page, you'll see that your grid shows your data. You won't have had to mess with any lines of HTML markup. You can then dive into fancier tasks for your grid: creating <asp:HyperLink> fields instead of BoundFields, and all the rich easy editing support that the GridView allows you.
Here's a working test application to demonstrate the concepts. Name your page test.aspx.
C# code-behind: http://pastebin.com/DWaxRNmj
ASPX Markup: http://pastebin.com/XwrnGB0D
You'll end up with this grid: