Error code 12031 in Ajax enabled wcf on JQuery call

Introduction:
This article explains how to resolve this error code 12031 in ajax enabled wcf service. I have the below service and code for calling wcf.



WCF Service

namespace WCFBAL
{
 [DataContract]
 public class Employee
 {
 [DataMember]
 public int EmpID;
 [DataMember]
 public string Name;
 [DataMember]
 public int Salary;
 [DataMember]
 public DateTime JoiningDate;
 }
 [ServiceContract(Namespace = "")]
 [AspNetCompatibilityRequirements(RequirementsMode = 

 AspNetCompatibilityRequirementsMode.Allowed)]
 public class WCFBALService
 {
 [WebInvoke(Method = "POST")]
 public Employee GetEmpInfo(int mEmpID)
 {
 try
 {
 //suppose you have a list of employee like as in the database
 List lst = new List() 
 { 
 new Employee { EmpID = 1, Name = "Deepak", Salary = 12000, JoiningDate = 
 Convert.ToDateTime("11/05/2011") },

 new Employee { EmpID = 2, Name = "Mohan", Salary = 18000},
 new Employee { EmpID = 3, Name = "Mohan", JoiningDate = 

  Convert.ToDateTime("06/10/2011") }
 };
 var q = lst.Where(m => m.EmpID == mEmpID).FirstOrDefault();
 Employee mobjEmp = new Employee();
 if (q != null)
 {
 mobjEmp.EmpID = q.EmpID;
 mobjEmp.Name = q.Name;
mobjEmp.Salary = q.Salary; // comment this line to expect same error 
 //The no error will be raised since "Salary" field is of int type and 
  default value of int variable is "0", so zero value will be assigned to it. 
 mobjEmp.JoiningDate = q.JoiningDate; 
  // comment this line and provide mEmpID=1 to raise error 
 //The error will be raised since "JoiningDate" field is not being serialized because
 //this of DateTime and this has no default value and not assign any value to it.
 }
 return mobjEmp;
 }
 catch (Exception mex)
 {
 return null;
 }
 }
 }
} 

WCF Service Method Calling Code 

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
      <script type="text/javascript">
     $('#btn').live('click', function () {
     // debugger;
     var value = $('#txtEmpID').val();
     if (value != '') {
     var strJSONFilterCriteria = '{"mEmpID":"' + value + '"}';
     $.ajax({ type: "POST", contentType: "application/json; charset=utf-8",
     url: '<%=ViewState["WCFBalUrl"]%>' + '/GetEmpInfo',
     data: strJSONFilterCriteria,
     dataType: "json",
     error: function (msg) {
     // debugger;
     alert('Service call failed: ' + msg.status + ' Type :' + msg.statusText);
     },
     success: function (msg) {
     //debugger;
     var str = "Emp ID:" + msg.d.EmpID + "\n";
     str += "Emp Name:" + msg.d.Name + "\n";
     str += "Emp Salary:" + msg.d.Salary + "\n";
     //str += "JoiningDate:" + new Date(parseInt(msg.d.JoiningDate.substr(6))) + "\n";
     alert(str);
     } }); }
     return false;
     });
     </script>
     <h2>
     WCF Error Code 12031
     </h2>
     <p>
     Learn more about Complete .Net Tutorials visit<a href="http://dotnet.vepsh.com/"
     title="Complete .Net Tutorials">
     www.dotnet.vepsh.com</a>.
     </p>
     <p>
     Enter Employee ID (1-3)
     </p>
     <p>
     <asp:TextBox ID="txtEmpID" runat="server" ClientIDMode="Static"></asp:TextBox>
      <asp:Button ID="btn" runat="server" Text="Get Info" ClientIDMode="Static" />
     </p>