Controller method is not hitting in Datatables C# MVC

Question

I am using Datatables in my application, but to fetch the data controller method is not getting triggered. I am able to render the table on UI, but the data is coming is NULL.

Here is my code

Imported items in SITE.MASTER

 <link href="/Scripts/DataTables/media/css/demo_page.css" type="text/css"  rel="stylesheet" />

     <link href="/Scripts/DataTables/media/css/demo_table.css" type="text/css"  rel="stylesheet" />


      <script src="/Scripts/Lib/jquery-1.4.2.js" type="text/javascript" language="javascript"></script>

     <script type="text/javascript" charset="utf-8" src="/Scripts/DataTables/media/js/jquery.dataTables.js"></script>

Here is my HTML Looks

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>http://stackoverflow.com/questions/6946559/jqgrid-please-help</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <script type="text/javascript" charset="utf-8">
            $(document).ready(function () {
                $('#example').dataTable({
                    bProcessing: true,
                    sAjaxSource: '@Url.Action("GridData", "Home")'
                });
            });
        </script>

 </head>
<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
        <tr>
            <th width="20%">Rendering engine</th>
            <th width="25%">Browser</th>
            <th width="25%">Platform(s)</th>
            <th width="15%">Engine version</th>
            <th width="15%">CSS grade</th>
        </tr>
    </thead>
    <tbody>

    </tbody>

</table>
</div>
</html>

Here how my JS file which loads HTML looks

var rptTabs = function () {
    return {
        Init: function () {



            var placeholder = $("#rpt-tab");
            placeholder.setTemplateURL("/Templates/Home/report.htm");


            placeholder.load("/Templates/Home/report.htm");



        }
    }
} ();

Here how my Home controller method looks

public ActionResult GridData()
        {
            return Json(new
            {
                aaData = new[] 
            {
                new [] { "Trident", "Internet Explorer 4.0", "Win 95+", "4", "X" },
                new [] { "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", "1.8", "A" },
                new [] { "Webkit", "iPod Touch / iPhone", "iPod", "420.1", "A" }
            }
            }, JsonRequestBehavior.AllowGet);
        }

Please tell me what is wrong with my implementation.

What's this rptTabs variable and how is it related to your question? — Darin Dimitrov
– Darin Dimitrov, Commented Jan 16, 2013 at 6:59
rpttabs is a tab where in i will render the data. to this first control will come, then it will load the HTML template. from there datatable script triggers — Naruto
– Naruto, Commented Jan 16, 2013 at 7:00
I am not sure I understand. Could you show the code that is using it? — Darin Dimitrov
– Darin Dimitrov, Commented Jan 16, 2013 at 7:05
HI Darin problem is solved. I just altered the syntax of sAjaxSource, like this "sAjaxSource": '/Home/GridData', it started working.. thanks lot for ur support.. — Naruto
– Naruto, Commented Jan 16, 2013 at 7:05

Community · Accepted Answer · 2017-05-23 11:43:09Z

The problem is related to the fact that you are using a server side helper (Url.Action("GridData", "Home")) inside a static HTML template since you have incorrectly copy-pasted my solution from here without adapting it to your scenario. Furthermore you are using the WebForms view engine and not Razor.

So I would recommend you making this template an ASPX WebForm, served through a controller action which would allow you to use server side helpers inside.

public class TemplatesController: Controller
{
    public ActionResult Report()
    {
        return View();
    }
}

And then you will have a corresponding view:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>https://stackoverflow.com/questions/6946559/jqgrid-please-help</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $('#example').dataTable({
            bProcessing: true,
            sAjaxSource: '<%= Url.Action("GridData", "Home") %>'
        });
    });
    </script>
</head>
<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
        <tr>
            <th width="20%">Rendering engine</th>
            <th width="25%">Browser</th>
            <th width="25%">Platform(s)</th>
            <th width="15%">Engine version</th>
            <th width="15%">CSS grade</th>
        </tr>
    </thead>
    <tbody>

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

and then specify the correct path to this controller when loading the template (once again by using server side helper).

Collectives™ on Stack Overflow

Controller method is not hitting in Datatables C# MVC

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related