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
$.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 +
"</option>");
}
}
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.
