Tuesday, 19 February 2013

CKEditor example in ASP.NET MVC 3, MVC 4 application.


Modifying html text area using Razor view engine and C# in ASP.NET MVC 3,4

Download this project.

After you finish this tutorial your textarea should look like this :


1. Create new ASP.NET MVC 3 Web Application project and name it CKEditor. Choose Razor view engine and internet application.




2. Go to http://ckeditor.com/download and download latest version. Unzip the file and copy ckeditor folder.

3. Inside your solution explorer right click on the name of solution and select paste.



4. Now go to Views – Shared and open _Layout.cshtml file. Inside this file we want to add reference to ckeditor.js, so we do not have to add this in every view.




5. Open ckeditor folder and drag and drop skeditor.js file under other js references

 
Go to Views - Home – About.cshtml. Delete the section <p></p> and type
@Html.TextArea("editor", new {@class = "ckeditor", @id = "aboutme"})

Using above code will produce this html code :  

<textarea class="ckeditor" cols="20" id="aboutme" name="editor" rows="2">

</textarea>


Please keep in mind that you have to add class “ckeditor” to every textarea you are using in your application. Field id and name are also required, otherwise ckeditor will not work.

You can find attachment with complete project.

Regards, Adam Bielecki.


Monday, 18 February 2013

Displaying YouTube videos in ASP.NET MVC Application






 Following this tutorial you will be able to get videos from channel and display them in a view. Channel name is hard coded to "blendercookie". It is very easy to pass the parameter from view Text box to controller with the channel name, but for this example I will leave it hard coded. 

I used Visual Studio 2010, MVC 3, C# and Razor syntax.

1       Download 3 packages from NuGet: 
 In you package manager console type:
      ○     Install-Package Google.GData.YouTube
     Install-Package Google.GData.Client
     Install-Package Google.GData.extensions



Once you successfully install those packages you will see new dll’s under reference folder



You will need to obtain unique google developer key. To do this go to http://code.google.com/apis/youtube/dashboard/gwt/
2      Write a new class inside Model.

This model is a List of YouTube objects with Youtube name and videoID

    public class YouTube
    {
        public string YouTubeMovieID { get; set; }
        public string YouTubeMovieTitle { get; set; }
    }

    public class YouTubeHelper
    {
        const string YT_CHANNEL_NAME = "blendercookie";
        const string YT_DEVELOPER_ID = "SOMETHING LIKE THAT : AI39si4MmBNkAvglhJrirLO19NpGcehhfdhdfDyT1qHRigohHdYDw8Lj2l_G_6djdfjdFQPGnGFTfxpwewuhJMukVxUZjmXA";

        public static List<YouTube> GetVideos()
        {
            YouTubeRequestSettings ytSettings = new YouTubeRequestSettings("YouTubeTest", YT_DEVELOPER_ID);
            YouTubeRequest ytRequest = new YouTubeRequest(ytSettings);
            string feedURL = String.Format("http://gdata.youtube.com/feeds/api/users/{0}/uploads?orderby=published", YT_CHANNEL_NAME);
            Feed<Video> videoFeed = ytRequest.Get<Video>(new Uri(feedURL));
            return (from video in videoFeed.Entries
                    select new YouTube() { YouTubeMovieID = video.VideoId, YouTubeMovieTitle = video.Title }).ToList();
        }

    }



3. In controller create a model YouTubeHelper
      

        public ActionResult YouTube()
        {
            var videos = YouTubeHelper.GetVideos();
            return View(videos);
        }

4. Finally in View display youtube videos.


<h2>YouTube</h2>

@foreach (var v in Model)
{
<object width="427" height="258">
           <param name="movie" value="http://www.youtube.com/v/@v.YouTubeMovieID" />
           <param name="allowFullScreen" value="true" />
           <param name="allowscriptaccess" value="always"/>
           <param name="wmode" value="opaque" />
           <embed src="http://www.youtube.com/v/@v.YouTubeMovieID"
              type="application/x-shockwave-flash" width="427"
              height="258" allowscriptaccess="always" allowfullscreen="true"
              wmode="opaque"></embed>  </object>
      
}


Modify _Layout file from Shared folder so you can add link to youtube view. Find ul with        id=”menu” and add new ActionLink.

<ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("YouTube", "YouTube", "Home")</li>
                </ul>


That’s how your website should look like once you finish.