C# unable to access web service in jquery datatable

Question

0.00/5 (No votes)

See more:

My code behind in SampleService.asmx file is ie working

C#

[System.Web.Script.Services.ScriptService]
public class SampleService : System.Web.Services.WebService {
[WebMethod]
    public string LoadData()
    {
        string constr = ConfigurationManager.ConnectionStrings["SqlCon"].ConnectionString;
        SqlConnection con = new SqlConnection(constr);
        DataTable table = new DataTable();
        SqlCommand cmd = new SqlCommand("SELECT top 10 CustomerID,CompanyName,ContactName,ContactTitle,Address, City,Region, PostalCode, Country, Phone, Fax FROM Customers");
        cmd.Connection = con;
        con.Open();
        SqlDataAdapter adp = new SqlDataAdapter(cmd);
        adp.Fill(table);
        con.Close();
        //DataTable dtCustomer = new DataTable();
        //dtCustomer.Columns.AddRange(
        //                      new DataColumn[] 
        //                      { new DataColumn("ID", typeof(int)), 
        //                        new DataColumn("Name", typeof(string)),
        //                        new DataColumn("City", typeof(string))
        //                      }
        //                      );
        //// Add value to the related column
        //dtCustomer.Rows.Add(1001, "PABITRA BEHERA", "Bhubaneswar");
        //dtCustomer.Rows.Add(1002, "Arya Kumar", "Cuttack");
        //dtCustomer.Rows.Add(1003, "Mr Roket(Braja)", "Nayagard");
        //dtCustomer.Rows.Add(1004, "Mr Trupti", "Bhadrak");

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

and my jquery page service call is as follows

C#

<pre><%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataTablePage.aspx.cs" EnableEventValidation="false" Inherits="DataTablePage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title>ShowGrid</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" />
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js "></script>

    <script type="text/javascript">
        $(document).ready(function () {           
            debugger;
            $("#demoGrid").DataTable({

                "processing": true, // for show progress bar
                "serverSide": true, // for process server side
                "filter": true, // this is for disable filter (search box)
                "orderMulti": false, // for disable multiple column at once
                "pageLength": 100,

                "ajax": {
                    "type": "POST",
                    "url": "SampleService.asmx/LoadData",
                    "data": "{}",
                    "contentType": "application/json; charset=utf-8",
                    "dataType": "json"
                },
               
                "columnDefs":
                [{
                    "targets": [0],
                    "visible": true,
                    "searchable": false
                },
                {
                    "targets": [2],
                    "visible": true,
                    "searchable": true
                },
                {
                    "targets": [7],
                    "searchable": false,
                    "orderable": false
                },
                {
                    "targets": [8],
                    "visible": false,
                    "searchable": false,
                    "orderable": false
                },
                {
                    "targets": [9],
                    "visible": false,
                    "searchable": false,
                    "orderable": false
                }],

                "columns": [
                      { "data": "CustomerID", "name": "CustomerID", "autoWidth": true },
                      { "data": "CompanyName", "name": "CompanyName", "autoWidth": true },
                      { "data": "ContactName", "title": "ContactName", "name": "ContactName", "autoWidth": true },
                      { "data": "ContactTitle", "name": "ContactTitle", "autoWidth": true },
                      { "data": "City", "name": "City", "autoWidth": true },
                      { "data": "PostalCode", "name": "PostalCode", "autoWidth": true },
                      { "data": "Country", "name": "Country", "autoWidth": true },
                      { "data": "Phone", "name": "Phone", "title": "Status", "autoWidth": true },

                      {
                          "render": function (data, type, full, meta) {
                              return '<a class="btn btn-info" href="/Demo/Edit/' + full.CustomerID + '">Edit</a>';
                          }
                      }
                      ,

                       {
                           data: null, render: function (data, type, row) {
                               return "<a href='#' class='btn btn-danger' onclick=DeleteData('" + row.CustomerID + "'); >Delete</a>";
                           }
                       },

                ]

            });
        });
    </script> 
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div class="container">
        <br />
        <div style="width:90%; margin:0 auto;">
            <table id="demoGrid" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th>CustomerID</th>
                        <th>CompanyName</th>
                        <th>ContactName</th>
                        <th>ContactTitle</th>
                        <th>City</th>
                        <th>PostalCode</th>
                        <th>Country</th>
                        <th>Phone</th>
                        <th>Edit</th>
                        <th>Delete</th>
                    </tr>
                </thead>
            </table> 
        </div>
    </div>
    
    </div>
    </form>
</body>
</html>

What I have tried:

I am unable to connect the <pre>SampleService.asmx function LoadData()

I have do the same in mvc its working but here in asp.net I have trouble. Please any one can help

Posted 4-Jan-18 1:54am

pabitra behera

Updated 4-Jan-18 23:18pm

Add a Solution

Comments

F-ES Sitecore 4-Jan-18 7:57am

Start with the basics, does the method get called at all? Look at the network section of the browser's dev tools (f12) to see if an attempt is made to call the service and if so what the result of that call is (404 means it wasn't found, 500 means it called it but the service returned an error, if no attempt was made to call the method the problem lies in your js somewhere).

pabitra behera 5-Jan-18 1:25am

yes I have already try but the service is not called, can you please run my code

pabitra behera 4-Jan-18 8:04am

Hi thank you for attempting to solve the issue.
The same is working in MVC. also I call the method in ajax its working but inside this section
$("#demoGrid").DataTable({}) its not get response.
I think I miss some syntax
can you guide me.

I have test the service in the same page i.e.

var data = "";
$.ajax({
type: "POST",
url: "SampleService.asmx/LoadData",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {

window.document.write(r.d);
data = r.d;

},
error: function (r) {
debugger;
data = r.responseText;
alert(r.responseText);
},
failure: function (r) {
debugger;
alert(r.responseText);
}
});
the above is working
but inside the object it not invoke

ZurdoDev 4-Jan-18 8:24am

You missed the point that F-ES was making. You need to debug this. Is there an error message? Put a breakpoint and figure out what is happening. Did you think we could just look at code without running it and tell you what is wrong? All you have to do is basic troubleshooting.

pabitra behera 5-Jan-18 1:24am

if I have the ability then why I put all the code here, the js library is called but the service is not called. but the same code is working fine in mvc. that's my question

ZurdoDev 5-Jan-18 7:26am

I know that's your question but how can we possibly answer it? We can't run your code so why would we know why it isn't working.

This is very simple. Put a breakpoint on your success function and one on your error function and see what happens. Only you can do this and it is so simple to do.

pabitra behera 5-Jan-18 1:46am

Hi Initially I say may be I have some syntax error , i.e. I write the code in single line it work.
and the service is invoked but it does not assign value in table my trying code is as follows.
"ajax": {"url":"SampleService.asmx/LoadData","type": "POST","datatype": "json"},
I write in a single line

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

F-ES Sitecore · Answer 1 · 2018-01-04T23:18:00

Solution 1

If you'd actually followed my advice and used the dev tools you'd see that your web method was called but it returned a 500 error, and the response would explain the error, giving you something to google. The problem is the mismatch in the content type and what you're sending. You can omit the content type altogether and use an empty object for the data.

"ajax": {
    type: "POST",
    url: "SampleService.asmx/LoadData",
    data: {},               
    dataType: "json"
},

That will get your method called but there may well we further issues elsewhere in the code. It doesn't help you or us to simply write 100s of lines of code without testing bit and bit then stating it "doesn't work" and expecting others to debug your code and then finish it off. Debugging is a vital part of coding.

Posted 4-Jan-18 23:18pm

F-ES Sitecore

Comments

pabitra behera 5-Jan-18 5:31am

I got this error:
DataTables warning: table id=demoGrid - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

I think the response of service is not consume the data.
Am using SOAP(Webservice)The Result data is :

<string xmlns="http://tempuri.org/">
[{"CustomerID":1,"CompanyName":"Alfreds Futterkiste","ContactName":"Maria Anders","ContactTitle":"Sales Representative","Address":null,"City":"Berlin","Region":null,"PostalCode":"12209","Country":"Germany","Phone":"030-0074321","Fax":null},{"CustomerID":2,"CompanyName":"Ana Trujillo Emparedados y helados","ContactName":"Ana Trujillo","ContactTitle":"Owner","Address":"Avda. de la Constitución 2222","City":"México D.F.","Region":null,"PostalCode":"05021","Country":"Mexico","Phone":"(5) 555-4729","Fax":"(5) 555-3745"},{"CustomerID":3,"CompanyName":"Antonio Moreno Taquería","ContactName":"Antonio Moreno","ContactTitle":"Owner","Address":null,"City":"México D.F.","Region":null,"PostalCode":"05023","Country":"Mexico","Phone":"(5) 555-3932","Fax":null},{"CustomerID":4,"CompanyName":"Around the Horn","ContactName":"Thomas Hardy","ContactTitle":"Sales Representative","Address":"120 Hanover Sq.","City":"London","Region":null,"PostalCode":"WA1 1DP","Country":"UK","Phone":"(171) 555-7788","Fax":"(171) 555-6750"},{"CustomerID":5,"CompanyName":"Berglunds snabbköp","ContactName":"Christina Berglund","ContactTitle":"Order Administrator","Address":"Berguvsvägen 8","City":"Luleå","Region":null,"PostalCode":"S-958 22","Country":"Sweden","Phone":"0921-12 34 65","Fax":"0921-12 34 67"},{"CustomerID":6,"CompanyName":"Blauer See Delikatessen","ContactName":"Hanna Moos","ContactTitle":"Sales Representative","Address":"Forsterstr. 57","City":"Mannheim","Region":null,"PostalCode":"68306","Country":"Germany","Phone":"0621-08460","Fax":"0621-08924"},{"CustomerID":7,"CompanyName":"Blondesddsl père et fils","ContactName":"Frédérique Citeaux","ContactTitle":"Marketing Manager","Address":"24, place Kléber","City":"Strasbourg","Region":null,"PostalCode":"67000","Country":"France","Phone":"88.60.15.31","Fax":"88.60.15.32"},{"CustomerID":8,"CompanyName":"Bólido Comidas preparadas","ContactName":"Martín Sommer","ContactTitle":"Owner","Address":"C/ Araquil, 67","City":"Madrid","Region":null,"PostalCode":"28023","Country":"Spain","Phone":"(91) 555 22 82","Fax":"(91) 555 91 99"},{"CustomerID":9,"CompanyName":"Bon app\u0027","ContactName":"Laurence Lebihan","ContactTitle":"Owner","Address":"12, rue des Bouchers","City":"Marseille","Region":null,"PostalCode":"13008","Country":"France","Phone":"91.24.45.40","Fax":"91.24.45.41"},{"CustomerID":10,"CompanyName":"Bottom-Dollar Markets","ContactName":"Elizabeth Lincoln","ContactTitle":"Accounting Manager","Address":"23 Tsawassen Blvd.","City":"Tsawassen","Region":"BC","PostalCode":"T2F 8M4","Country":"Canada","Phone":"(604) 555-4729","Fax":"(604) 555-3745"}]

F-ES Sitecore 5-Jan-18 5:36am

The data you are returning is probably not what the code is expecting. Start with the examples on the bootstrap site and get those working, then slowly extend that to your own code and your own data.

pabitra behera 5-Jan-18 5:40am

can u help me for this