how to pass a list of items (objects) from asp.net to javascript

Question

Another question:

I have a sharepoint Web part page in which I create a list of thumbnail images from back end code (xxx.ascx.cs) using ImageButton.  When an image is clicked, I call javascript to display a <div> that contains the data of that thumbnail such as date, name (this works like a tooltip).  Now, I want to display a list of items (objects if possible) in a text area in that <div>,  I don't know how I can pass this list for each thumbnail to my <div>. 

Any suggestions?  For simple values such as date and name, I can add attributes to the ImageButton, and when the thumbnail is clicked, I call javascript to retrieve the values from attributes, but a list of items would be too much to pass in attributes (I think) and I don't know how I should handle this properly.

Thanks a lot!

Answer 1

In these scenarios I usually add a WCF service to my project to serve as the data source for the additional data you want to pull asynchronously.  To do this, ensure you have the CKS - Development Tools installed.  In VS2010+ go to Tools --> Extension Manager  and in the dialog search CKSDEV and select the appropriate version for your environment.  Then restart Visual Studio and you will have a new item available when adding a new item to a SharePoint project, WCF Service (CKSDEV).  Configure this service to return data in a web friendly format that you are familiar with, for me this is JSON, for you it may be XML.  Here is a link to an article doing this with JSON.

Once the service is configured you can call a JavaScript method like the one below in your button click event to dynamically pull the data and inject it into the page DOM.

    //Executes the search
    function _search() {
        try {
            $.ajax({
                type: "POST",
                url: '../_layouts/MyProject/ItemData.svc',
                data: { options: "{ ItemsPerPage: '250', PageNumber: '1', CustomerName: '" + $("#customername").val() + "', CustomerNumber: '" + $("#customernumber").val() + "', InvoiceNumber: '" + $("#invoicenumber").val() + "', StartDate: '" + $("#startdate").val() + "', EndDate: '" + $("#enddate").val() + "'}" },
                success: function (msg) {
                    _showInvoices(msg);
                },
                error: _searchFailed
            });
        }
        catch (e) {
            try {
                console.log('error invoking GetItems' + e);
            } catch (e) { }
        }
    }
    
    //Called by the search method to actually put the data in the DOM
    function _showInvoices(result) {
        try {
            console.log(result);
        } catch (e) { }

        var dataToView = '';

        $.each(result, function (i, invoice) {
            dataToView += "<tr>";
            dataToView += "<td>" + invoice.CustomerName + "</td>";
            dataToView += "<td>" + invoice.CustomerNumber + "</td>";
            dataToView += "<td>" + invoice.InvoiceDate + "</td>";
            dataToView += "<td>" + invoice.InvoiceNumber + "</td>";
            dataToView += "<td><a target=\"_blank\" href=\"" + invoice.Url + "\" title=\"Open File\">Open</a></td>";
            dataToView += "</tr>";
        });

        var tableStart = "";
        tableStart += "<table class=\"dataTable\" width='100%' style='width: 100%;'>";
        tableStart += "<thead>";
        tableStart += "<tr>";
        tableStart += "<th>Customer Name</th>";
        tableStart += "<th>Customer Number</th>";
        tableStart += "<th>Invoice Date</th>";
        tableStart += "<th>Invoice Number</th>";
        tableStart += "<th>&nbsp;</th>";
        tableStart += "</tr>";
        tableStart += "</thead>";
        tableStart += "<tbody>";

        var tableEnd = "";
        tableEnd += "</tbody>";
        tableEnd += "</table>";

        $("#AdvancedInvoiceSearchResults").html(tableStart + dataToView + tableEnd);
        $("#AdvancedInvoiceSearchResults").find("table.dataTable").dataTable({
            "bJQueryUI": true
        });
    }

Let me know if you have any additional sticking points.

---

Determination conquers all things.

Answer 2

jjr,

Thank you very much for your detailed information!  I will try your suggestion and hopefully it will work for me.