Fun With WebMatrix Helpers in ASP.NET MVC 3

it’s nearly the weekend, and it’s been long week, so let’s have a bit of fun…

so i take it you’ve all had a chance to look at webmatrix? if you haven’t then you should really make the effort to have a play around with it. i will admit that i was a bit snobby about it when i first read about it, but it is actually a really great way to build small, simple web sites. for the uninitiated, here are a few useful links:

• the official site
  http://www.microsoft.com/web/webmatrix/
• scott guthrie
  http://weblogs.asp.net/scottgu/archive/2010/07/06/introducing-webmatrix.aspx
• rob conery
  http://blog.wekeroad.com/microsoft/someone-hit-their-head
• scott hanselman
  http://www.hanselman.com/blog/hanseminutespodcast249onwebmatrixwithrobconery.aspx

you can install webmatrix through the web platform installer . it has loads of really great features, which are much better explained in the links above than i could ever do, but the one that hit me immediately as being really fun was the webmatrix helpers feature and i wondered if there was a way to use them in mvc.

well, webmatrix is built on asp.net, so it is actually a trivial task to add them to an asp.net mvc application.

getting going

there are loads of helpers available, today we are going to look at the microsoft web helpers. this package gives you the ability to quickly and easily add basic functionality for services such as twitter, bing, gravatar, facebook, google analytics and xbox live to your site. the awesomeness of nuget makes it easy to add the microsoft web helpers package to our project by typing:

install-package microsoft-web-helpers

into the the package manager console.

next you will need to add references to webmatrix.data and webmatrix.webdata and set the “copy local” property to true for both of them. if you fail to do this step you will receive a compilation error, “the type or namespace name ‘simplemembershipprovider’ could not be found” in app_code\facebook.cshtml.

and that’s it! you are now ready to start using the web helpers in your views. so let’s have a look at a few of them…

gravatar

you can add a gravatar image to your page by simply using the gravatar.gethtml() method in your razor view. for example:

@gravatar.gethtml("stevelydford@gmail.com")

displays this handsome chap (and no the glasses and bandito moustache are not real!):

if the email address supplied to the method doesn’t have a corresponding gravatar account the default gravatar image will be returned, i.e.

but you can also set the default image to be the url of any image you desire. for example, the following code:

@gravatar.gethtml
    ("you@me.com", defaultimage: "http://blog.stevelydford.com/content/nograv.jpg")
  

returns this stunning example of programmer art :

optional parameters allow you to set the size of the image, the gravatar rating and a couple of other attributes .

xbox live gamercard

this is a very simple method which returns an xbox live gamercard. it has one parameter which is a string containing the required xbox live gametag. for example:

@gamercard.gethtml("stinky53")

returns this:

which does nothing if not prove that i don’t get enough time to work on my gamerscore!

microsoft bing

web helpers has a bing class that enables you to easily let users google your site with bing .

first, we need to add the following code to our razor view:

@{
    bing.sitetitle = ".net web stuff, mostly";
    bing.siteurl = "http://blog.stevelydford.com";
}

we can then use either the bing.searchbox() or bing.advancedsearchbox() methods to display a bing search box in our view.

@bing.searchbox()

displays a bing search box which takes the user to bing.com to displays it’s results:

@bing.advancedsearchbox()

displays a bing search box which renders a <div> on your page containing the search results:

analytics

the analytics class of microsoft.web.helpers contains methods which generate scripts that enable a page to be tracked by google analytics, yahoo marketing solutions and/or statcounter.

they all work in a very similar way and just require you to pass the method the relevant account details. for example:

@analytics.getgooglehtml({your-analytics-webpropertyid-here})
@analytics.getyahoohtml({your-yahoo-accountid-here})

this will inject the necessary javascript into your view at runtime to enable tracking by the relevant service.

twitter

the microsoft.web.helpers namespace contains a twitter class with two methods – twitter.profile() and twitter.search().

twitter.profile() injects some javascript into your view which displays the feed for the twitter user specified in the username parameter:

@twitter.profile("stevelydford")

there are a whole raft of parameters, which allow you to customise the output in various ways, such as setting the width and height, colors, number of tweets returned, etc. a full list of these parameters can be found here .

twitter.search() displays the twitter search results for the search string specified in the searchquery parameter:

@twitter.search("london 2012")

again, there are a bunch of optional parameters to allow you to customize the output to your requirements.

when you use nuget to install the microsoft-web-helpers package a twittergoodies razor file is added to your app_code folder. this class contains helpers which provide additional twitter functionality. these helpers include twittergoodies.tweetbutton(), twittergoodies.followbutton(), twittergoodies.faves() and twittergoodies.list(), all of which can have their outputs customised using various optional parameters:

@twittergoodies.tweetbutton
    (tweettext: "i'm reading steve lydford's blog", url:"http://blog.stevelydford.com")

displays a tweet button which opens a new window to allow the user to send a tweet about your site. the url passed to the helper is automatically shortened using the twitter t.co url shortner:

@twittergoodies.followbutton("stevelydford")

displays a button which redirects them to twitter:

@twittergoodies.list("stevelydford", "f1-4")

displays a form which shows a public twitter list:

there are a few other methods in the twittergoodies razor file, which you can view in app_code/twittergoodies.cshtml.

facebook

as well as the twittergoodies.cshtml page, the microsoft-web-helpers package also installs facebook.cshtml to your app_code directory. this file contains many useful facebook helpers. i will look at a couple here, a full list can be found on the facebookhelper codeplex site .

one of the easiest to use out of the box is the facebook.likebutton() helper, which displays a ‘like’ button that either automatically ‘likes’ the url supplied, or opens a new facebook window ’on click’ if the user is not currently signed in:

@facebook.likebutton("http://blog.stevelydford.com")

next up is facebook.activityfeed() which displays stories when users ‘like’ content on a site or share content from a site on facebook.

@facebook.acivityfeed("http://www.bbc.co.uk")

most of the rest of the facebook helpers require initialization. in order to do this you will require a facebook application id. you can get one by browsing to http://www.facebook.com/developers/createapp.php and creating a new facebook application:

when you are setting up your app ensure that you enter the url of your site, including the correct port number if you are working on localhost:

you can then add the following code to your razor view to initialize:

@{
    facebook.initialize("{your-application-id-here}", "{your-application-secret-here}");
}

then it’s just a matter of adding a couple of lines of code to the view to add facebook comments to the page:

@facebook.getinitializationscripts()
@facebook.comments()

or, to show a facebook livestream to allow users of your site to communicate in real time:

@facebook.livestream()

conclusion

this post shows just a small fraction of what can be achieved very quickly and very easily using webmatrix web helpers in an mvc application. the microsoft web helpers package makes it incredibly easy to add a whole load of functionality to you site for very little effort.

have fun! let me know how you get on.

go play….