Main menu

Youtube Helper for ASP.Net WebMatrix [UPDATED For Beta 2]

THIS POST IS UPDATED TO WORK WITH WEBMATRIX BETA 2

ASP.Net WebMatrix is a lightweight web development tool that contains IIS Express, SQL CE 4.0 and ASP.Net Web Pages with Razor Syntax. to learn more about ASP.Net WebMatrix read this excellent tutorial.

The ASP.Net Web pages ships with some really cool helpers like easy database access, Twitter profile, & Facebook like button.  and it also allows us to create our own helpers. in the current beta release of the WebMatrix there are 2 ways to create a helper:

  1. Using a visual studio class library (Recommended).
  2. Use .cs file in the App_Code directory in the WebMatrix project folder.

In this post I’m going to show you how to create a Helper to add Youtube Videos to your WebMatrix pages. as you know a helper needs to be a static class. here is the code:

using System;
using System.Web;
using System.Web.Mvc; 
using System.Web.WebPages;
using System.Web.Helpers;
 
public static class MyHelpers
{
    public static IHtmlString Youtube(string link, int width = 480, int height = 385, bool allowFullScreen = true)
    {
        string innerHtml = string.Empty;
        var url = "http://www.youtube.com/v/{0}?fs=1&hl=en_US";
 
        //prepare video embed URL
        var uri = new Uri(link);
        var querystring = uri.Query;
        var videoCode = HttpUtility.ParseQueryString(querystring).Get("v");
 
        url = string.Format(url, videoCode);
 
        //prepare HTML
        var html = new TagBuilder("object");
        html.MergeAttribute("width", width.ToString(), true);
        html.MergeAttribute("height", height.ToString(), true);
 
        var param1 = new TagBuilder("param");
        param1.MergeAttribute("name", "movie", true);
        param1.MergeAttribute("value", url, true);
 
        var param2 = new TagBuilder("param");
        param2.MergeAttribute("name", "allowFullScreen", true);
        param2.MergeAttribute("value", allowFullScreen.ToString(), true);
 
        var param3 = new TagBuilder("param");
        param3.MergeAttribute("name", "allowscriptaccess", true);
        param3.MergeAttribute("value", "always", true);
 
        var embed = new TagBuilder("embed");
        embed.MergeAttribute("src", url, true);
        embed.MergeAttribute("type", "application/x-shockwave-flash", true);
        embed.MergeAttribute("allowscriptaccess", "always", true);
        embed.MergeAttribute("allowfullscreen", allowFullScreen.ToString(), true);
        embed.MergeAttribute("width", width.ToString(), true);
        embed.MergeAttribute("height", height.ToString(), true);
 
        innerHtml += param1.ToString(TagRenderMode.SelfClosing);
        innerHtml += param2.ToString(TagRenderMode.SelfClosing);
        innerHtml += param3.ToString(TagRenderMode.SelfClosing);
        innerHtml += embed.ToString(TagRenderMode.SelfClosing);
 
        html.InnerHtml = innerHtml;
 
        return new HtmlString(html.ToString(TagRenderMode.Normal));
    }
 
}

Few things to note in the above code.  i have referenced System.Web.Mvc to use the TagBuilder to create safe html, and System.Web.Helpers to create the helper. the second one, you can find in C:\program files\Microsfoft ASP.Net (or ASP.net installation directory).

And I’m using the System.Web.HttpUtility here to extract a query string from a Uri.

        //prepare video embed URL
        var uri = new Uri(link);
        var querystring = uri.Query;
        var videoCode = HttpUtility.ParseQueryString(querystring).Get("v");

I use the above code to convert the Youtube public link to the actual video link.

And since my code needs to return an html which should not be html encoded again. my methods return type is IHtmlstring. using this tells the ASP.Net pages not to encoded this html again, as this is already encoded.

Now create the folder App_Code in your WebMatrix Project, and create a file named MyHelpers.cs and paste the code above in that.

Now you can use this in your WebPages like this to embed youtube videos in your pages:

  @MyHelpers.Youtube("http://www.youtube.com/watch?v=ulzLU3At3lA");

Other parameters such as width,height are optional as you can notice we have used optional parameters.

UPDATES for beta 2:

  1. In beta 1 WebPages were in Microsoft.WebPages. but in WebMatrix beta 2 its moved to System.Web.WebPages
  2. I had to copy System.Web.Mvc.dll to the bin directory of WebMatrix project to make this workin in WebMatrix beta 2.

I Hope it helps

Aneef

Aneef Fashir (38 Posts)

Software Architect @ Assette, Sri Lanka


  • Wally

    Appologies for not sending your the beta2 version when I was suppossed to. I completely forgot.

    Wally (@wbm)

  • http://www.aneef.net Aneef Fashir

    Hi,

    Its ok, thanks anyway for the update, so i looked at it again to make it work. appreciate your comment :)

  • http://www.aneef.net Aneef

    Hi, its ok, i was looking at it once u told me about the issue and was able to get it fixed. have a goody good day :)

Tags

Archives