unable to fetch data from DB using ajax

Question

I am developing an ASP.Net MVC application. I want to get data from database using ajax. It does not load data in web page and also there is no error on the console window and is no exception in visual studio. Following is my Controller code.

    [HttpGet]
    public JsonResult GetCompanies()
    {
        try
        {
            IEnumerable<Company> company = _companyService.GetCompanies().ToList();
            IEnumerable<CompanyListViewModel> viewModelListCompanies = Mapper.DynamicMap<IEnumerable<Company>, IEnumerable<CompanyListViewModel>>(company);


            return new JsonSuccessResult(viewModelListCompanies);
            //return Json(accountTypes, JsonRequestBehavior.AllowGet);
        }
        catch (Exception ex)
        {
            Response.StatusCode = (int)ResponseCode.UnprocessableEntity;
            return new JsonErrorResult(ex.ToString());
        }
    }

This is the code in my view.

<div class="row">

    <div class="col-md-9">

        <div class="block">
            <div class="header">
                <h2>Sortable table</h2>
            </div>
            <div class="content">
                <table cellpadding="0" cellspacing="0" width="100%" class="table table-bordered table-striped sortable" id="myDbTable">
                    <thead>
                        <tr>
                          <th data-hide width="20%">ID</th>
                            <th data-hide width="20%">Name</th>
                            <th data-hide width="20%">E-mail</th>
                            <th data-hide width="20%">Phone</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>

    </div>

</div>

   }
     @section Scripts{
    <script>

    var DataColumnsCount = 4;

    //***Start Fatching Data for datatable *** start //

    $.ajax({
        type: 'POST',
        url: @Url.Action("GetCompanies","Company"),
        dataType: 'json',
        data: "{}",
        success: fetchCompanyTableList});
function fetchCompanyTableList() {

    $('#myDbTable').DataTable({
        ajax: {
            url: @Url.Action("GetCompanies", "Company"),
            type: "GET",
            dataType: "json",
            dataSrc: 'DataSet',

        },
        "columns": [
                {"data" : "Id"},
                { "data": "Name" },
               { "data": "Email" },
                { "data": "Owner" }


        ],
        "aoColumnDefs": [
            {
                "aTargets": [DataColumnsCount],
                "mData": null,
                "bSortable": false,
                "mRender": function (data, type, fullRow) {
                    return '<th width="20%"><a href="#">Details</a></th>';
                }
            }
        ]

    }
      );


}

I am unable to figure out what really i am doing wrong. Please someone help in this regard.

What you get in response to Ajax request?.(check in inspect->Network->XHR on chrome). — CyberAbhay
– CyberAbhay, Commented May 20, 2017 at 7:09
and GetCompanies method of the controller is not found. This means that it is not getting my controller GET code.. What should I do here now? — Ahmad
– Ahmad, Commented May 20, 2017 at 7:16
There should be call back function into first ajax - In you first Ajax success: function(result) { if(result != null ) // call the function fetchCompanyTableList(); } — Asif Raza
– Asif Raza, Commented May 20, 2017 at 7:21
There is no need of first ajax call. Just use ajax call within datatable. — mmushtaq
– mmushtaq, Commented May 20, 2017 at 7:53

Asif Raza · Accepted Answer · 2017-05-20 07:44:12Z

2

For Datatable You need Change TYPE to [HttpPost] & in you ajax change type "POST" As a developer you need add breakpoint to your controller & check its getting hit or not . Also you can console.log() / see result in browser developer tool

edited May 20, 2017 at 7:44

answered May 20, 2017 at 7:38

Asif Raza

1,0297 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:18:24Z

1

You use [HttpGet] in your action , means only allow http GET request in your action. But your ajax call you use POST request . That's not accept in your action. so change POST to GET if you need GET request OR change [HttpGet] to [HttpPost] for POST request .

You do't need multiple ajax call.so need to change your ajax call because jquery datatable has own ajax call for data loading. you can fiend your answer this or this link. Or you can follow this YouTube video.

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered May 20, 2017 at 7:36

Ashiquzzaman

5,3144 gold badges30 silver badges40 bronze badges

1 Comment

Ahmad Over a year ago

By changing TYPE to GET it is gettitng data in dataset but not populating in the table. can you please tell me why is it not getting displayed in the table so that i may mark your answer

Collectives™ on Stack Overflow

unable to fetch data from DB using ajax

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related