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

  • 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!

    Thursday, June 28, 2012 12:11 PM

Answers

  • 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.


    • Edited by jjr2527 Thursday, June 28, 2012 2:55 PM Added an additional JS method to fill out the logic to follow.
    • Proposed as answer by KjellSJ Friday, June 29, 2012 1:03 PM
    • Marked as answer by Qiao Wei Thursday, July 5, 2012 10:34 AM
    Thursday, June 28, 2012 2:52 PM

All replies

  • 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.


    • Edited by jjr2527 Thursday, June 28, 2012 2:55 PM Added an additional JS method to fill out the logic to follow.
    • Proposed as answer by KjellSJ Friday, June 29, 2012 1:03 PM
    • Marked as answer by Qiao Wei Thursday, July 5, 2012 10:34 AM
    Thursday, June 28, 2012 2:52 PM
  • jjr,

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

    Friday, June 29, 2012 11:12 AM