Displaying Work Items on an ASP.NET 2.0 Web Page
A lot of the people I've met in the past year have requested code that demonstrates how to display work items on a webpage. I've created an ASP.NET 2.0 sample from my upcoming book Professional Team Foundation Server which I will share with you today.
There are a couple of really interesting elements to this code - first of all, it has no code behind. The sample was built completely using declarative code. The second thing you will notice is that it doesn't contain any hooks using the Work Item Tracking Object Model. There are a couple of reasons for this: first of all, the WIT OM approach can be quite slow, especially if you are pulling in a lot of work item data. I opted to directly query the relational table [TfsWorkItemTracking].[dbo].[WorkItemsLatest].There are also a lot of security settings that need to be put into place in order to allow the Work Item Tracking OM to access a Web page. Since we are using SQL queries, we don't have to worry about the restrictions. FYI, the WIT OM Web configuration setttings are documented on Naren Datha's blog: http://blogs.msdn.com/narend/archive/2006/07/29/682032.aspx
<%@ Control Language="C#" ClassName="WIT" %>
<asp:GridView AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="ID" EnableSortingAndPagingCallbacks="True" ID="GridView1" DataSourceID="SqlDataSource1" runat="server" BackColor="White" BorderColor="#999999" BorderStyle="None" BorderWidth="1px" CellPadding="3" Font-Bold="False" Font-Names="Arial" Font-Size="Small" GridLines="Vertical">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" SortExpression="ID">
<ItemStyle Font-Names="Arial" Font-Size="Small" />
<HeaderStyle Font-Bold="True" Font-Names="Arial" Font-Size="Small" />
</asp:BoundField>
<asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" >
<ItemStyle Font-Names="Arial" Font-Size="Small" />
<HeaderStyle Font-Bold="True" Font-Names="Arial" Font-Size="Small" />
</asp:BoundField>
<asp:BoundField DataField="WIType" HeaderText="Type" SortExpression="WIType">
<ItemStyle Font-Names="Arial" Font-Size="Small" />
<HeaderStyle Font-Bold="True" Font-Names="Arial" Font-Size="Small" />
</asp:BoundField>
</Columns>
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<RowStyle BackColor="#EEEEEE" Font-Names="Arial" Font-Size="Small" ForeColor="Black" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<HeaderStyle BackColor="#000084" Font-Bold="True" Font-Names="Arial" Font-Size="Small" ForeColor="White" />
<AlternatingRowStyle BackColor="#DCDCDC" />
</asp:GridView>
<asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:TfsWarehouse %>" ID="SqlDataSource1" runat="server" SelectCommand="SELECT [ID], [Title], WIType = [Work Item Type] FROM [TfsWorkItemTracking].[dbo].[WorkItemsLatest]"></asp:SqlDataSource>
You'll notice that the SqlDataSource has a reference to ConnectionStrings.TfsWarehouse. What you need to do is now add the following lines of code after the AppSettings block in the web.config file:
<connectionStrings>
<add name="TfsWarehouse" connectionString="Server=TFSRTM;Integrated Security=True;Database=TfsWorkItemTracking;Persist Security Info=True" providerName="System.Data.SqlClient" />
</connectionStrings>
To install the application, simply create an ASP.NET 2.0 Web page, add the GridView code into your Web form, edit your Web.config file and add the connection string (don't forget to change the TFSRTM server name to your own server name). This is a basic example but gives you a hint of the power of the technique - why limit it to work items? You can potentially display any data stored in the Team Foundation Data Warehouse easily and quickly. Here is a screenshot of the end result:
