I really liked @Echilon answer, but I'd like to add that it's possible to send the Ajax request as GET too.
Having said that, and although OP's example didn't include a parameter in the GetPersonList() method, I'd like to show how parameters would need to be sent on an Ajax request depending if it's a GET or POST** request:
POST request
It doesn't matter if the value is of type int, string, boolean or an object, the way to send data is the same that @Echilon showed. Although here's a little variation:
data: function (data) {
data.parameterName = value;
return JSON.stringify(data);
}
And here's a brief example. Let's suppose that this is your original method:
[WebMethod]
//The parameter could be a int, string or bool
public static string GetPersonList(int|string|bool value)
{
//do something here...
}
And in your Ajax call:
$('#tableId').dataTable(
{
//your DataTable options here
$.ajax({
url: "/UserService.asmx/GetUsers",
type: 'POST',
contentType: 'application/json; charset=utf-8',
//dataType: "json", only include this if you're expecting the result in json format
data: function (data) {
data.value = 10|"Test"|false; //Send the appropriate data according to the parameter type in your method
return JSON.stringify(data);
},
dataSrc: "d.data" //DON'T forget to include this or your table won't load the data
},
// your columns settings here
});
In case you need to send an object here's a brief example. Let's suppose that this is your original method:
class Person
{
public int Id { get; set; }
public string UserName { get; set; }
}
[WebMethod]
public static string GetPersonList(Person person)
{
//do something here...
}
Then in your Ajax call:
var $person = {};
$person.Id = 9;
$person.UserName = "jsmith";
$('#tableId').dataTable(
{
//your DataTable options here
$.ajax({
url: "/UserService.asmx/GetUsers",
type: 'POST',
contentType: 'application/json; charset=utf-8',
//dataType: "json", only include this if you're expecting the result in json format
data: function (data) {
data.person = $person;
return JSON.stringify(data);
},
dataSrc: "d.data" //DON'T forget to include this or your table won't load the data
},
// your columns settings here
});
GET request
If you prefer to use a GET request, then the way to send the data varies a little. If the value is of type int or boolean, you can send it like this:
data: function (data) {
data.parameterName = value;
return data;
}
But if you want to send a string or an object, then you can send it like this:
data: function (data) {
data.parameterName = JSON.stringify(value);
return data;
}
Let's see a brief example. Let's suppose that this is your original method:
[WebMethod]
[ScriptMethod(UseHttpGet = true)] // I didn't include the ResponseFormat parameter because its default value is json
//The parameter could be a int or bool
public static string GetPersonList(int|bool value)
{
//do something here...
}
And in your Ajax call:
$('#tableId').dataTable(
{
//your DataTable options here
$.ajax({
url: "/UserService.asmx/GetUsers",
type: 'GET',
contentType: 'application/json; charset=utf-8',
//dataType: "json", only include this if you're expecting the result in json format
data: function (data) {
data.value = 10|false; //Send the appropriate data according to the parameter type in your method
return data;
},
dataSrc: "d.data" //DON'T forget to include this or your table won't load the data
},
// your columns settings here
});
In case you need to send a string or an object here's a brief example. Let's suppose that this is your original method:
class Person
{
public int Id { get; set; }
public string UserName { get; set; }
}
[WebMethod]
[ScriptMethod(UseHttpGet = true)] // I didn't include the ResponseFormat parameter because its default value is json
//The parameter could be an object or a string
public static string GetPersonList(Person person) // or (string value)
{
//do something here...
}
Then in your Ajax call:
var $person = {};
$person.Id = 9;
$person.UserName = "jsmith";
$('#tableId').dataTable(
{
//your DataTable options here
$.ajax({
url: "/UserService.asmx/GetUsers",
type: 'GET',
contentType: 'application/json; charset=utf-8',
//dataType: "json", only include this if you're expecting the result in json format
data: function (data) {
data.person = JSON.stringify($country);
//data.value = JSON.stringify("Test"); Or this one, depending the parameter of your method
return data;
},
dataSrc: "d.data" //DON'T forget to include this or your table won't load the data
},
// your columns settings here
});
