AJAX Enabled WCF Service With Datatables Issue

maliu1970

Hi Allen,

I am using an Ajax Enabled WCF Service to create a json object to populate the Datatable. It isn't working for some reason. The json is created and passed from C# but in the "ajax" it doesn't receive it. Here is the complete code. Please help. Thank you.

HTML and JavaScript
<%@ Page Title="" Language="C#" MasterPageFile="~/Master/CPSMasterPage.master" AutoEventWireup="true" CodeBehind="Worklist.aspx.cs" Inherits="CPSUI.CMS.Worklist" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="headPH" runat="server">

<script type="text/javascript" src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css " href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" />
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="titlePH" runat="server">
Worklist Management
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="messagePH" runat="server">
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="contentPH" runat="server">
<div style="border: 1px solid black; padding: 3px; width: 1200px">
<table id="tblWorklist" class="display">
<thead>
<tr>
<th>Worklist Name </th>
<th>Facility </th>
<th>VISN </th>
<th>Provider </th>
<th>Patient Type </th>
<th>Date Created </th>
<th>Date Updated </th>
<th>Total Users </th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
</tr>
</tfoot>
</table>
</div>

$(document).ready(function() { $('#tblWorklist').DataTable({ "dom": "frtS", "scrollY": "300px", "deferRender": true, "ajax": { "dataType": "json", "contentType": "application/json; charset=utf-8", "type": "GET", "url": "WorklistService.svc/GetWorklist", "dataSrc": function(json) { return $.parseJSON(json.d).data; } }, columns: [ { 'data': 'WorklistName' }, { 'data': 'FacilityName' }, { 'data': 'VISNId' }, { 'data': 'ProviderName' }, { 'data': 'PatientType' }, { 'data': 'DateCreated', 'render': function(dateCreated) { var date = new Date(parseInt(dateCreated.substr(6))); var month = date.getMonth() + 1; return date.getDate() + "/" + month + "/" + date.getFullYear(); } }, { 'data': 'DateUpdated', 'render': function(dateUpdated) { var date = new Date(parseInt(dateUpdated.substr(6))); var month = date.getMonth() + 1; return date.getDate() + "/" + month + "/" + date.getFullYear(); } }, { 'data': 'TotalUsers' } ] }); });

</asp:Content>

Code behind

using System;
using System.Data;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using MMM.His.CI.Common.Data;
using VapmData.WorklistComplete;

namespace CPSUI.Services
{
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class WorklistService
{
private readonly VapmLib.Lib.Worklist WorklistLib = new VapmLib.Lib.Worklist(Global.WorklistXmlConfigFile);
private readonly Worklist_Data ds_Worklist = new Worklist_Data();

    [OperationContract]
    [System.ServiceModel.Web.WebInvoke(Method = "GET", ResponseFormat = WebMessageFormat.Json)]   
    public string GetWorklist(int activeFlag)
    {
        DataSet ds = new DataSet();
        DataTable dt = new DataTable();
        ds = WorklistLib.GetWorklist(Convert.ToInt32(activeFlag), ds_Worklist);
        dt = ds.Tables[0];
        return DbHelper.GetJSONString(dt);
        }
    }

}

JSON Object
{"Worklist" : [{"WorklistID" : "20","Name" : "IV Therapy Clinic","SystemWorklistFlag" : "False","PSA" : "SALEM VAMC","PSACode" : "","FromFirstCharLastName" : "A","ToFirstCharLastName" : "Z","PatientType" : " ","VendorNameLong" : "","VendorEIN" : "","DateCreate" : "4/29/2011 2:32:15 PM","DateUpdate" : "11/19/2015 10:37:10 AM","TotalUsers" : "2","Active" : "False","ClaimTotal" : "250","VISNId" : "","ProviderName" : "TEST 3M 8}]}

I truncated the JSON Object as it was too long.

I have been searching online and have tried many things but to no avail. Thanking you in anticipation.

Ali