Recently I have seen a number of examples using ASP.NET MVC with jQuery Mobile for displaying a list of blog posts to mobile devices. I thought I would show you similar code for doing this with the ASP.NET Web Pages Framework and Razor View Engine via WebMatrix. I want to warn you up front that the solution will seem too easy. One page, and only 1 page of code and markup is all that we will need to write to create the solution ( besides our sample database, of course ).

First things first, we need a database. Let's create a simple SQL Server CE 4 database right within WebMatrix itself. The database tooling feels a lot like SQL Server Management Studio, which is fantastic for new developers as they can take these skills with them for managing other versions of SQL Server. Here is a quick snapshot of the database definition:



Once we have the database defined and add a bit of data that I pulled from my blog, I can go ahead and create a blank Razor Page with all the necessary stylesheets, JavaScript files, HTML markup, and Razor code. You can click on the image to see a more viewable version of the page, but even now it looks way too easy.



 In the example, we connect to the database, define a query, and then execute the query and return the results. In this case the results are posts from the database. Further down the page we iterate through each post, displaying the date the post was published as well as a clickable title that takes you to the post.

The bonus here is that if the needs of your application grow, you can easily convert this to ASP.NET MVC 3. The top-most code gets swallowed up into a controller or service per your strategy for separating the concerns, leaving the HTML and Razor markup the same in the rest of the page.

Now here is the best part - click Run :)



You have a quick list of posts that give you a wonderful user experience on your mobile phone or tablet.