Ajax returning datatable always going in error part in asp.net

Question

I return list of values in a datatable and that I want to fill in success part of ajax function in dropdownlist . Till return dt I get all the values properly but after that it goes in error part. Below is what I tried.

Ajax function

function getMZONEWithState(evt) {

        var ddlState = $('#ContentPlaceHolder1_ddlState').val();

        var ddlMaintenanceZone = $("#ddlMaintenanceZone");

        ddlMaintenanceZone.empty().append('<option selected="selected" value="0" disabled = "disabled">State Loading...</option>');

        $.ajax({
            type: "POST",
            url: "Dashboard.aspx/GetMaintZone",
            data: JSON.stringify({ ddlState: ddlState }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {                   

            },
            error: function (response) {
                alert('Something went wrong..!!');
            }
        });
    }

And in code behind:-

[WebMethod]
    public static DataTable GetMaintZone(string ddlState)
    {   
        DataTable dt = new DataTable();
        try
        {
            CommonDB ObjCommon = new CommonDB();
            dt = ObjCommon.GetMZONE(ddlState);
            return dt;
        }
        catch (Exception)
        {                
            throw;
        }            
    }

Why it always goes in error part I don't understand ?? Please suggest If I am going wrong anywhere.

Answer 1

You can't return DataTable directly from your [WebMethod] like this. You need to convert your DataTable to JSON before sending to cleint.

Change your server side code like following.

        [WebMethod]
        public static string GetMaintZone(string ddlState)
        {
            DataTable dt = new DataTable();
            try
            {
                CommonDB ObjCommon = new CommonDB();
                dt = ObjCommon.GetMZONE(ddlState);
                return DataTableToJSON(dt);
            }
            catch (Exception)
            {
                throw;
            }
        }

        public static string DataTableToJSON(DataTable table)
        {
            JavaScriptSerializer jsSerializer = new JavaScriptSerializer();
            List<Dictionary<string, object>> parentRow = new List<Dictionary<string, object>>();
            Dictionary<string, object> childRow;
            foreach (DataRow row in table.Rows)
            {
                childRow = new Dictionary<string, object>();
                foreach (DataColumn col in table.Columns)
                {
                    childRow.Add(col.ColumnName, row[col]);
                }
                parentRow.Add(childRow);
            }
            return jsSerializer.Serialize(parentRow);
        }
    }