Search code examples
jqueryasp.netvb.netdatatableswebforms

Ajax doesn't work in DataTable using webforms visual basic


For reference, I'm using DataTable 2.0.6

I can't seem to make the DataTable call the function in aspx webforms in visual basic.

This method works:

$.ajax({
    type: 'POST',
    url: 'Index.aspx/TempGetEmployeeData',
    data: JSON.stringify({ Sqloption: 21 }),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function (response) {
        var parsedjsonChangeLogData = response.d;
        $('#TempEmployeeTable').DataTable({
            data: parsedjsonChangeLogData
        });
    }
});

but this method doesn't:

$('#TempEmployeeTable').DataTable({
    ajax: {
        type: 'POST',
        url: 'Index.aspx/TempGetEmployeeData',
        data: JSON.stringify({ Sqloption: 21 }),
        contentType: 'application/json; charset=utf-8',
        dataType: 'json'
    }
});

Here is the function.

<WebMethod()>
Public Shared Function TempGetEmployeeData(sqlOption As Integer) As String
    Dim dt As New DataTable()
    Using connection As New SqlConnection(SQLConnStr)
        Using command As New SqlCommand("someStoredProcedure", connection)
            command.CommandType = CommandType.StoredProcedure
            command.Parameters.AddWithValue("@pOption", sqlOption)
            connection.Open()
            Using SQLresult As SqlDataReader = command.ExecuteReader()
                dt.Load(SQLresult)
            End Using
        End Using
    End Using
    Dim jsonResult As String = JsonConvert.SerializeObject(dt)
    Return jsonResult
End Function

Any help will be much appreciated. Thank you

I tried removing the type and change it to 'GET', removing contentType, and changing the dataType into text then used a success function to output it in the console.log but the output is the whole html file

I also tried debugging the function, but it doesn't go to the function itself.


Solution

  • For anyone wondering, the sqlOption is now in the function and I used this code:

    $('#TempEmployeeTable').DataTable({
        ajax: {
            type: 'POST',
            url: 'Index.aspx/TempGetEmployeeData',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            dataSrc: function (response) {
                return JSON.parse(response.d);
            }
        }
    });