Integrate Social Media: Viewing Your YouTube

By Bill Hatfield  |  eMail Email    Print Print  Post a comment

A Room with a View… And a Tube

Now go to the Index view. It’s in the Views/Home folder.

Here you want to remove all the stuff and replace it with the code below.

@using MvcApplication2.Models
@model Google.Apis.YouTube.v3.Data.SearchListResponse
@{
    ViewBag.Title = "Visual Studio Fan";
}
@section featured {
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>@ViewBag.Title.</h1>
<h2>@ViewBag.Message</h2>

            </hgroup>
<p>
                Visual Studio is the best IDE in the world and 
                you'll discover all its features
                and how to use them on Visual Studio Fan!
            </p>

        </div>

    </section>
}
<h3>Recent Visual Studio Videos</h3>
<ul>@foreach (var v in Model.Items) {
<li>@Html.ActionLink(@v.Snippet.Title, "WatchVideo", new YouTubeVideo { ID = @v.Id.VideoId, Title = @v.Snippet.Title })</li>
}</ul>

 

If you aren’t used to seeing Razor syntax, this might seem a bit bewildering to you. Again, I’ll walk through it, chunk at a time.

@using MvcApplication2.Models

This, as you’d expect, works just like a using keyword in standard C# files. Don’t forget to replace MvcApplication2 with your own project name.

@model Google.Apis.YouTube.v3.Data.SearchListResponse

You’ll see a line something like this at the top of every typed view. A typed view accepts an instance of a specific class as the data passed in – typically a type defined in a model. There are also un-typed views, but using them is discouraged. In this line, we are specifying that the object coming will be a SearchListResponse.

@{
    ViewBag.Title = "Visual Studio Fan";
}

 

The ViewBag.Title, like the ViewBag.Message you saw in the controller is used by the Web theme at the head of the page. The theme is defined by a CSS file using classes that are applied to section and div tags, as you see in the page header:

@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title.</h1>
                <h2>@ViewBag.Message</h2>
            </hgroup>
            <p>
                Visual Studio is the best IDE in the world and 
                you'll discover all its features
                and how to use them on Visual Studio Fan!
            </p>
        </div>
    </section>
}

 

You’ll see the resulting look later, when you run the app.

Here’s the interesting bit.

<h3>Recent Visual Studio Videos</h3>
<ul>
    @foreach (var v in Model.Items)
    {
 
        <li>
            @Html.ActionLink(@v.Snippet.Title, "WatchVideo",
                new YouTubeVideo { ID = @v.Id.VideoId, Title = @v.Snippet.Title })
        </li>
    }
</ul>

 

After the header, a bulleted list is constructed by iterating through each member of the Items collection which is a property of SearchListResponse. The keyword Model is used here to refer to the object that was sent in.

Html.ActionLink() is an HTML helper method. MVC defines these functions to make it easier to generate HTML tags. ActionLink() creates a link with the text of the first argument. The second argument identifies the controller method that the link will redirect to. The third argument is a value that’s passed to the controller method.

So in this case, the title of the video will itself be a link that, when clicked, redirects to the Home controller’s WatchVideo method (which we haven’t written yet). The information passed to the WatchVideo method is of type YouTubeVideo, holding the unique video ID and title.

First Run

Run your application. A browser will appear showing the list of videos retrieved from YouTube. Your list will be different than mine, since every time the page appears, it does a fresh request for the latest videos.

Web  Page@@@

Congratulations! You have, with Visual Studio’s help, created your first application using a Web API!

But you’re not finished yet. Just click on one of those links to see what happens. (Doh!) You could simply link to the associated video on YouTube. In that case the user would leave your site, though. To keep them here, let’s create another view that plays the video.

Must WatchVideo!

Go back to the home controller. Add a brand new method named WatchVideo(). It’s super-simple.

        public ActionResult WatchVideo(YouTubeVideo v)
        {
            ViewBag.Message = "Watch Video";
 
            return View(v);
        }

 

It accepts a YouTubeVideo-type object (the class we created with the ID and Title) and it simply passes it along to the associated view.

Now create a new view by right-clicking the Views\Home folder and choosing Add / View… In the Add View dialog, give it the name WatchVideo and click to check Create a strongly-typed view. In Model class, type in MvcApplication2.Models.YouTubeVideo (replacing MvcApplication2 with your project name). Click Add. Now modify the contents of the view so that it looks like this.

@model MvcApplication2.Models.YouTubeVideo
@{
    ViewBag.Title = "WatchVideo";
}
<br/>
@Html.ActionLink("< Back to List", "Index")
<br /><br />
 
<h3>@Model.Title</h3>
 
<iframe id="player" type="text/html" width="960" height="540"
    src="http://www.youtube.com/v/@Model.ID" />

That’s right – to show a video on your site, you don’t need any special API calls. Simply create an iframe like this and set it’s src to point to the video!

The Whole Shebang

Run again. Not only will you see the list, but clicking on an item will show the results in your own big-screen page.

Your VS 2015 Web App

Summary

This article began with a whirlwind tour of Web APIs - exploring what they are, common ways they’re used and specifics on several of the biggest. Then you created an application that interfaced with the YouTube API to do a search, retrieve the results and play selected videos all from your own ASP.NET MVC site. And throughout, you’ve seen how Visual Studio is there each step of the way to support the process and make you as quick and productive as possible.

This article was sponsored by Microsoft Corporation.

 


Page 5 of 5

Previous Page
1 2 3 4 5
 

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  • HTML5 eBook

    HTML5 ebook

    HTML5 is the new standard that is expected to take over the Web. New versions of browsers are already starting to support the advanced features. Learn why HTML5 is important and discover how to use start using it today.
  • Html5 Logo