C＃无法访问jquery数据表中的Web服务 [英] C# unable to access web service in jquery datatable
本文介绍了C＃无法访问jquery数据表中的Web服务的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在SampleService.asmx文件中的代码就是工作
My code behind in SampleService.asmx file is ie working
[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);
}
}
和我的jquery页面服务电话如下
and my jquery page service call is as follows
<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()
我也这样做在mvc工作，但在asp.net我遇到了麻烦。请任何人可以帮助
I have do the same in mvc its working but here in asp.net I have trouble. Please any one can help
推荐答案
（ document ）。ready（ function （）{
debugger ;
(document).ready(function () { debugger;
（ ＃demoGrid）。DataTable（{
处理： true ， // 用于显示进度条
serverSide ： true ， // 用于流程服务器side
filter： true ， // 这是用于禁用过滤器（搜索框）
orderMulti： false ， // 一次禁用多列
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\": tru e },
{ \"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&g t;
<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>
("#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:
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
I have do the same in mvc its working but here in asp.net I have trouble. Please any one can help
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.
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.
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.
这篇关于C＃无法访问jquery数据表中的Web服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
