Using IQueryable data in Javascript

Question

I am very new to Javascript and pretty much just plugging and playing with this example, but here it is at a high level.

In my controller I am returning an Iqueryable to my view, which I then want to build a grid from.

My javascript looks like this:

$.ig.loader({
    ready: function () {
        $("#grid1").igGrid({
            dataSource: Model,
            primaryKey: "BatchNumber",
            autoGenerateColumns: false,
            height: "350px",
            width: "800px",
            columns: [
                { headerText: "Batch Number", key: "BatchNumber", dataType: "number" },
                { headerText: "Batch Group Item Date", key: "BatchGroupItemDate", dataType: "string" },
                { headerText: "Batch Comment", key: "BatchComment", dataType: "number" },
                { headerText: "Number Of Documents", key: "NumberOfDocuments", dataType: "number" },
                { headerText: "Total Transfered", key: "TotalTransfered", dataType: "date" },
                { headerText: "Not Transfered", key: "NotTransfered", dataType: "date" },
                { headerText: "CoId", key: "CoId", dataType: "date" }
            ],

    });
    }
});

Where the model is an IQueryable. I am using infragistics grid libraries as well. When I render the page nothing seems to happen and I get no output when monitoring the javascript in firefox. I am not sure where to start debugging this issue as my javascript knowledge is pretty limited. I am running asp.net mvc 4 as well.

Take a look at the source code that is being sent from the server. What does the line that contain `dataSource: ` look like? — Andy T, Dec 26 '13 at 15:44

score 0 · Accepted Answer · answered Dec 26 '13 at 15:47

0

You need to escape and JSON encode your model:

dataSource: @Html.Raw(Json.Encode(Model)),

answered Dec 26 '13 at 15:47

Chris Pratt

232,153
36
385
444

I am getting a syntax error when trying to implement it this way. I did a simple print to screen with the following `@{ var bleh = @Html.Raw(Json.Encode(Model)); }
@bleh
` and it seemed to print the correctly encoded JSON – Zach M. Dec 26 '13 at 16:13
If you're talking about a JavaScript syntax error in your view, just ignore it, Razor is stupid sometimes, and this makes it freak out for some reason, at least in version 2, I haven't noticed any problems yet in Razor 3. – Chris Pratt Dec 27 '13 at 17:40

Roman Pushkin · Answer 2 · 2013-12-26T15:54:21.937

It seems like in model you have a set of objects and want to render these objects inside of your view as a javascript. Add this code right to your view:

<script text="text/javascript">
var data = @Html.Raw(JsonConvert.SerializeObject(Model)); // converts an object to javascript object

$.ig.loader({
    ready: function () {
        $("#grid1").igGrid({
            dataSource: data, // your data
            primaryKey: "BatchNumber",
            autoGenerateColumns: false,
            height: "350px",
            width: "800px",
            columns: [
                { headerText: "Batch Number", key: "BatchNumber", dataType: "number" },
                { headerText: "Batch Group Item Date", key: "BatchGroupItemDate", dataType: "string" },
                { headerText: "Batch Comment", key: "BatchComment", dataType: "number" },
                { headerText: "Number Of Documents", key: "NumberOfDocuments", dataType: "number" },
                { headerText: "Total Transfered", key: "TotalTransfered", dataType: "date" },
                { headerText: "Not Transfered", key: "NotTransfered", dataType: "date" },
                { headerText: "CoId", key: "CoId", dataType: "date" }
            ],

    });
    }
});
</script>

Make sure to add a reference to NewtonSoft.Json with PM console:

PM> install-package NewtonSoft.Json

If you have your javascript in a separate file, you may want to wrap your js code into function. Like this:

(Scripts.js file)

function load_data(data)
{

$.ig.loader({
    ready: function () {
        $("#grid1").igGrid({
            dataSource: data, // your data
            primaryKey: "BatchNumber",
            autoGenerateColumns: false,
            height: "350px",
            width: "800px",
            columns: [
                { headerText: "Batch Number", key: "BatchNumber", dataType: "number" },
                { headerText: "Batch Group Item Date", key: "BatchGroupItemDate", dataType: "string" },
                { headerText: "Batch Comment", key: "BatchComment", dataType: "number" },
                { headerText: "Number Of Documents", key: "NumberOfDocuments", dataType: "number" },
                { headerText: "Total Transfered", key: "TotalTransfered", dataType: "date" },
                { headerText: "Not Transfered", key: "NotTransfered", dataType: "date" },
                { headerText: "CoId", key: "CoId", dataType: "date" }
            ],

    });
    }
});

}

Your cshtml file:

...other html code...
<script type="text/javascript">
    var data = @Html.Raw(JsonConvert.SerializeObject(Model)); // converts an object to javascript object
    load_data(data);
</script>
</body>
</html>

Using IQueryable data in Javascript

2 Answers2