// Get the json from the controller
function GetListItems() {
    $.ajax({
        type: "POST",
        url: "/JsonService/GetItems",
        contentType: "application/json; charset=utf-8",
        data: "{}",
        dataType: "json",
        success: function (result) {
            DisplayListItems(result);
        },
        "error": function (result) {
            var response = result.responseText;
            alert('Error loading: ' + response);
        }
    });
}

// Create list items and append them inside <ul> element
function DisplayListItems(list) {
    $.each(list, function(index, element) {
        var itemHTML = ["<li>",
                                "<div>",
                                    "<div>",
                                        element.Title,
                                    "</div>",
                                    "<div>",
                                        element.Description,
                                    "</div>",                                    
                                "</div>",
                            "</li>"].join('\n');
        $(".list > ul").append(itemHTML);
    }
}

// Controller method that serves json data
public JsonResult GetItems()
{
    IQueryable<Item> itemList = new DAO().GetList();

    return Json(from e in itemList
                select new
                {
                    Title = e.Title,
                    Description = e.Description
                });
}

// Get the json from the controller
function GetListItems() {
    $.ajax({
        type: "POST",
        url: "/JsonService/GetItems",
        contentType: "application/json; charset=utf-8",
        data: "{}",
        dataType: "json",
        success: function (result) {
            DisplayListItems(result);
        },
        "error": function (result) {
            var response = result.responseText;
            alert('Error loading: ' + response);
        }
    });
}

// Create list items and append it inside <ul> element
function DisplayListItems(list) {
    $.each(list, function(index, element) {
        var itemHTML = ["<li>",
                                "<div>",
                                    "<div>",
                                        element.Title,
                                    "</div>",
                                    "<div>",
                                        element.Description,
                                    "</div>",                                    
                                "</div>",
                            "</li>"].join('\n');
        $(".list > ul").append(itemHTML);
    }
}

// Controller method that serves json data
public JsonResult GetItems()
{
    IQueryable<Item> itemList = new DAO().GetList();

    return Json(from e in itemList
                select new
                {
                    Title = e.Title,
                    Description = e.Description
                });
}

function GetListItems() {
    $.ajax({
        type: "POST",
        url: "/JsonService/GetMediaCenterFiles",
        contentType: "application/json; charset=utf-8",
        data: "{}",
        dataType: "json",
        success: function (result) {
            DisplayListItems(result);
        },
        "error": function (result) {
            var response = result.responseText;
            alert('Error loading: ' + response);
        }
    });
}

function DisplayListItems(fileList) {
    $.each(fileList, function(index, file) {
        var fileItemHTML = ["<li>",
                                "<div class='mediaElement'>",
                                    "<div class='mediaTitle'>",
                                        fileList.Title,
                                    "</div>",
                                    "<div class='description'>",
                                        fileList.Description,
                                    "</div>",
                                    "<a href='",fileList.FileAddress,"'>",fileList.FileName,"</a>",
                                "</div>",
                            "</li>"].join('\n');
        $(".list > ul").append(fileItemHTML);
    }
}

private JsonResult GetSiteFiles(string parentDirectory)
{
    var mediaCenterFiles = new SiteFileDAO().ListSiteFilesByParentDirectory(parentDirectory);

    return Json(from mcf in mediaCenterFiles
                select new
                {
                    Title = mcf.FileTitle,
                    Description = mcf.Description,
                    FileName = GetSiteFileName(mcf.FilePath, parentDirectory),
                    FileAddress = mcf.FilePath
                });
}

function GetListItems() {
    $.ajax({
        type: "POST",
        url: "/JsonService/GetMediaCenterFiles",
        contentType: "application/json; charset=utf-8",
        data: "{}",
        dataType: "json",
        success: function (result) {
            DisplayListItems(result);
        },
        "error": function (result) {
            var response = result.responseText;
            alert('Error loading: ' + response);
        }
    });
}

function DisplayListItems(fileList) {
    $.each(fileList, function(index, file) {
        var fileItemHTML = ["<li>",
                            "<div class='mediaElement'>",
                            "<div class='mediaTitle'>",
                            fileList.Title,
                            "</div>",
                            "<div class='description'>",
                            fileList.Description,
                            "</div>",
                            "<a href='",
                            fileList.FileAddress,
                            "'>",
                            fileList.FileName,
                            "</a>",
                            "</div>",
                            "</li>"].join('\n');
        $(".list > ul").append(fileItemHTML);
    }
}

private JsonResult GetSiteFiles(string parentDirectory)
{
    var mediaCenterFiles = new SiteFileDAO().ListSiteFilesByParentDirectory(parentDirectory);

    return Json(from mcf in mediaCenterFiles
                select new
                {
                    Title = mcf.FileTitle,
                    Description = mcf.Description,
                    FileName = GetSiteFileName(mcf.FilePath, parentDirectory),
                    FileAddress = mcf.FilePath
                });
}

Populating html list using Ajax call

jquery

jQuery