HTML and CSS Reference
In-Depth Information
The Video data model class has three properties— Id , Title , and Url —that correspond to the
corresponding columns in the Videos table.
Fetching the Video Playlist
To display a list of videos in the drop-down list, you need to fetch the data from the Videos table using
jQuery's $.ajax() method. The controller class ( VideoPlayerController ) contains an action method—
GetPlayList() —that returns a list of Video objects. The GetPlayList() method and the associated jQuery
code that calls it are shown in Listing 3-10 and Listing 3-11, respectively.
Listing 3-10. GetPlayList() Action Method
public JsonResult GetPlayList()
VideoDbEntities db=new VideoDbEntities();
var data = from items in db.Videos
select items;
return Json(data.ToArray());
Listing 3-11. Calling the GetPlayList() Method Using $.ajax
type: "POST",
url: '/VideoPlayer/GetPlayList',
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: OnSuccess,
error: OnError
function OnSuccess(playListItems) {
for (var i = 0; i < playListItems.length; i++) {
$("#ddlPlayList").append("<option value='" + playListItems[i].Url + "'>" +
playListItems[i].Title +
function OnError(err) {
alert(err.status + " - " + err.statusText);
Notice that the GetPlayList() method selects all the records from the Videos table and returns an
array of Video objects as JsonResult . The jQuery $.ajax() method then makes a POST request to the
GetPlayList() action. The success function OnSuccess() receives a JSON array of Video objects. The
OnSuccess() function then iterates through this JSON array and, with each iteration, appends an <option>
element to the drop-down list using the append() method. The URL of a video file is assigned to the value
attribute of an <option> element, and its title is displayed in the drop-down list.
The OnError() function displays information about any errors encountered while invoking the
GetPlayList() method.
Search WWH ::

Custom Search