Consuming StackOverflow with WebMatrix and OData

Posted on August 30, 2010 by drewby

WebMatrix makes it really easy to build websites on Windows. The Open Data Protocol (OData) provides a standard way to query data on the web, making it really easy to access all sorts of data made available through popular websites like StackOverflow. So its only natural that you could use WebMatrix and OData together to quickly integrate a rich dataset into your website. The first thing to do is to download and install WebMatrix. Next you’ll want to download the OData Helper from CodePlex. This contains some extra functionality to simplify including OData feeds in your site. Click the Download button, accept the license agreement and save the binary to a folder on your computer. We’ll use this in just a moment. You can now create a website (or modify an existing website you’ve already created in WebMatrix). For this example, we’ll create a site from template.

Choose the Empty Site template. In the left pane, click the Files tab. You’ll see only one file called index.cshtml. This is the default file that is served when someone points their browser at your website. Open the file by double-clicking and you’ll see this code:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>

    </body>
</html>

To add the OData Helper to your website, do the following:

Right-click the file-list and select New Folder. Name the folder “bin”. This is short for binary and is a folder containing extra libraries to support your website.
Right-click the new folder and select Add Existing File…
Locate the file (Microsoft.Samples.WebPages.Helpers.OData.dll) that you downloaded earlier and click OK.

Now you are ready to consume an OData feed in your website.

Query the Feed and Render to a Grid

We’ll start by adding the following code to your index.cshtml right beneath the <head> element.

@using Microsoft.Samples.WebPages.Helpers
@{
    var result = OData.Get("http://odata.stackexchange.com/stackoverflow/atom/Posts");
    var grid = new WebGrid(result);
}

The first line tells the page that we want to use classes from the Microsoft.Samples.WebPages.Helpers namespace. All this does is shorten our code by not requiring us to type that namespace every time we want to call the OData class. The next block of code has two lines. The first line makes a request to StackOverflow’s OData feed to get back all Posts. The second line creates a new WebGrid using the result. In order to render the WebGrid in the page, we need to add one more line of code underneath the body element:

@grid.GetHtml();

Your index.cshtml code should now look like this:

<!DOCTYPE html>
<html>
    <head>
@using Microsoft.Samples.WebPages.Helpers
@{
    var result = OData.Get("http://odata.stackexchange.com/stackoverflow/atom/Posts");
    var grid = new WebGrid(result);
}
        <title></title>
    </head>
    <body>
    @grid.GetHtml();
    </body>
</html>

Now you can run your web page and see the results. Be sure that index.cshtml is selected in the Files list and then click Run in the WebMatrix ribbon. The output will look similar to the following:

Make it Look Better

That doesn’t look very pretty and probably has more detail in the output than you’d like. So let’s clean this up a little. Switch back to WebMatrix and find the @grid.GetHtml() code. Change this code to match the following:

    @grid.GetHtml(tableStyle: "dg_table",
     headerStyle: "dg_header",
     alternatingRowStyle: "dg_altrow",
     columns: grid.Columns(
          grid.Column("Title", header: "Title"),
          grid.Column("ViewCount", header: "Views"),
          grid.Column("AnswerCount", header: "Answers"),
          grid.Column("CommentCount", header: "Comments"))
     );

This tells the WebGrid how we want to render our table. The first three parameters define CSS style attributes that we want to use for different parts of the the grid. The last parameter defines the set of columns that we want to display from our source data. We’ll display the Title, ViewCount, AnswerCount and CommentCount. To use the CSS style attributes, we need to add a <style> section to the header just before the </head> closing tag. Add the following style code :

.dg_table {
    border-collapse: collapse;
    font-family: "Trebuchet MS", Arial, Helvetica, Sans-Serif;
    font-weight: normal;
    text-align: left;
    margin-top: 5px;
}

.dg_header {
    background-color: Grey;
    font-weight: bold;
    color: #FFF;
}

.dg_table th, .dg_table td {
    border:1px solid #C0C0C0;
    padding: 5px;
}

.dg_altrow {
    background-color: #EAF2D3;
    color: #000;
}

.dg_header a:active, .dg_header a:hover, .dg_header a:link, .dg_header a:visited {
    color: #FFF;
    text-decoration: none;
}

Expand the following code to see how your index.cshtml should now look.

<!DOCTYPE html>
<html>
    <head>
@using Microsoft.Samples.WebPages.Helpers
@{
    var result = OData.Get("http://odata.stackexchange.com/stackoverflow/atom/Posts");
    var grid = new WebGrid(result);
}
        <title></title>
    <style>
        .dg_table {
            border-collapse: collapse;
            font-family: "Trebuchet MS", Arial, Helvetica, Sans-Serif;
            font-weight: normal;
            text-align: left;
            margin-top: 5px;
        }

        .dg_header {
            background-color: Grey;
            font-weight: bold;
            color: #FFF;
        }

        .dg_table th, .dg_table td {
            border:1px solid #C0C0C0;
            padding: 5px;
        }

        .dg_altrow {
            background-color: #EAF2D3;
            color: #000;
        }

        .dg_header a:active, .dg_header a:hover, .dg_header a:link, .dg_header a:visited {
            color: #FFF;
            text-decoration: none;
        }
    </style>
    </head>
    <body>
    @grid.GetHtml(tableStyle: "dg_table",
     headerStyle: "dg_header",
     alternatingRowStyle: "dg_altrow",
     columns: grid.Columns(
          grid.Column("Title", header: "Title"),
          grid.Column("ViewCount", header: "Views"),
          grid.Column("AnswerCount", header: "Answers"),
          grid.Column("CommentCount", header: "Comments"))
     );
    </body>
</html>

Now try running the application again, and you will have a nicely formatted grid that looks something like the following:

Refine the Query

This looks better, but you probably don’t want to return all the questions from StackOverflow. So let’s change our query to the StackOverflow service to do the following:

Only return questions that are tagged with OData
Order the results by date created, in descending order.

Locate the line of code starting with OData.Get. We need to add two parameters to the query. The first will be $filter=substringof(‘<OData>’), TagNames). This looks for the substring of <OData> within the TagNames field. The second will be $orderby=CreationDate desc which gets the results in the order we’d like. To specify these parameters change the line of code to this:

var result = OData.Get("http://odata.stackexchange.com/stackoverflow/atom/Posts",
     "$filter=substringof('$lt;OData>', TagNames)&$orderby=CreationDate desc");

Run this again and your output will look something like the following:

The final modification we’ll make is to make the Title column a link. You can do this by changing the first column definition to the following:

grid.Column(format:@<a href="http://stackoverflow.com/questions/@item.Id">@item.Title</a>, header: "Title"),

Additional Resources

Tags: OData, StackOverflow, WebMatrix