Using IQueryable<Model> 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.

Answer 1

You need to escape and JSON encode your model:

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

Answer 2

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>